Cost-effective Development of Enhanced Content with EPUB3 (Digital Book World 2011)

by Liza Daly

I presented at Digital Book World 2011 about using EPUB3 to produce multimedia and interactive ebooks that will be compatible with multiple devices and software ereaders.

Anyone who’s ever been to a digital publishing conference knows that there is always a bewildering array of products that create and display enhanced content: ebooks that contain video, audio, animation, or other forms of interactivity. Generally each new platform requires an entirely different way of preparing the content and all the multimedia assets. While the production of static ebooks has become relatively standardized (using EPUB2), publishers are still struggling with how to produce more digital-native products without tremendous expense and constant re-tooling.

I’m optimistic that EPUB3 will provide significant headache-reduction in this area. While creating high-quality static, pure-text ebooks still has challenges, things are a lot better today than even a year ago. If we’re to see similar consolidation in the enhanced ebook space in the same timeframe, publishers are going to have to be firm that they will only (or at least primarily) produce standards-based multimedia books.

Slides from DBW

EPUB3 interactivity demo in iBooks

The talk includes a video demo. I had created an EPUB document several months ago for a research project, using Abroad by Thomas Crane as source material (edition from the Internet Archive). I wanted to emulate the accelerometer-driven animation of the Alice for iPad book using only the tools available in EPUB3.

Since the source was a heavily-illustrated children’s book, EPUB’s reflow capability was not really an asset. This quality made the book perfect for use in Apple’s fixed-layout mode. The video below shows the book running in iBooks on an iPad:


In the first example, I use the accelerometer interface in JavaScript (some sample code), to cause the ship to “sail” back and forth as the user tilts the device.


In the second example, if the user touches any of the birds on the title page, they fly away. I modified the jQuery Path library to use CSS3 transforms to efficiently animate along a curve. JavaScript performance in iBooks appears to be somewhat worse than Mobile Safari; optimizing using CSS3 rather than DOM position updates is recommended.

Canvas, Processing.js, HTML5 audio

I’m a big fan of the Processing visual programming language. In the last example, the train appears to give off puffs of steam; each time the steam comes out of the train the puffs are in slightly different positions.

I embedded Processing.js code (which is itself then interpreted by JavaScript) and rendered the puffs to a transparent canvas. The puffs appear in a slightly random position, fade out as they reach the top of the page and then spawn anew.

Finally, there’s also an event bound to the invisible canvas: tapping on it will fire an HTML5 audio (a sample of a train).

(At this time we’re not able to share the demo EPUB file itself.)