Skip to main content
Participant
July 1, 2010
Question

New code for working with ePubs and XHTML

  • July 1, 2010
  • 2 replies
  • 1350 views

Hi all

I've open-sourced some code that I wrote last year while working on a TLF-based ePub reader. The two things that are most interesting are the translator that converts XHTML to TLF markup, and the ePub loading/parsing stuff.

I know there's been a lot of complaints about using html with the new TLF so maybe this can help some of you.

All available at github: http://www.github.com/maxl0rd/walflower with a couple simple Flex samples that exercise the libs.

I've put a few notes about it on my blog: http://designwithoutdesign.blogspot.com

Hope some of you find it useful.

Max

This topic has been closed for replies.

2 replies

Participant
July 8, 2010

Hi Max,

Thank you very much for such a contribution. I'm trying your lib and the EPubExample to  read and display the "Alice's adventures in wonderland" ePub provided by Adobe. However while the text is displayed fine, the images are not. Setting a break point at the last line of the function parseImage in XhtmlToTextFlow.as gave me an flashx.textLayout.elements.InlineGraphicElement with some of the values as follows:

actualHeight = 0

actualWidth = 0

elementHeight = 0

elementWidth = 0

...

graphic = null

height = undefined

...

source = null

status = "loadPending"

...

width = undefined

Could you please give any hints on this problem?

Moreover, does your lib support loading the ePub's css files and applying these styles? The Alice ePub text is being displayed without any formatting styles. As far as i know, the css files should be compiled into swfs before they can be loaded by the TLF, right?

Thank you very much!

Dan

Participant
July 8, 2010

Hi Dan

I'm glad you're finding it useful. Unfortunately, this is still just some pieces of a project right now, and not a finished ePub reader application. There is a sort of spaghetti-code class in my app that hooks up the images and does all the styling. I haven't had time to refactor this into something generally useful yet. So, this explains the omission.

The images are all unzipped from the ePub and all have loaders that are indexed by url in the ePub's images Object. So, you only have to add something like this somewhere to hook up an img tag to the bitmap. Then you would also have to add some styling to make it show at the right dimension in the flow.

inlineGraphicElement.source = Bitmap( epub.images["/images/my_img.jpg"].loader.content );

The CSS is an unfortunate topic. At the time I was doing this, I determined there was no way to get the CSS styles applied to the flow "for free" using any of the existing means that I knew of. I feared it would be necessary to write my own engine, and I stopped before going there. I was interested in applying my own styles in the application, rather than those in the doc. So this code does not respect stylesheets at all yet.

I hope that there will be a better answer to this in the future.

The various ways of applying styling across TLF documents is something that should be explored more. I may be able to get a post together describing the approach I took. Also very interested in what others who are working on big documents have done.

Max

Participant
July 13, 2010

Hi Max,

Thank you for your response and hints. Following your hint, I've refractored your codes a bit to load and display images and it works fine now. CSS is really an issue. Flash engine does not understand some standard css units like "em" and "%". I'm trying the CSSFormatReolver class provided in the SimpleEditorWithCSS sample from the TLF team as the formatResolver for the textFlow, and the mx.styles.StyleManager to load the css which was compiled as swf. However not all the css styles are applied to the textflow. I'll take more time into this while really eager to wait for your css solution.

Thank you

Dan

July 2, 2010

Thanks, Max!