Posted on by & filed under conferences, css, epub, geek, html5, ibooks, interactivity, talks, video.

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.)


5 Responses to “Cost-effective Development of Enhanced Content with EPUB3 (Digital Book World 2011)”

  1. Mike Cane

    What was the size of the ePub without the enhancements vs with the ehancements? And if you don’t know, just the final size would be helpful too.

  2. Louie Bacani Foronda

    wow… that’s great… especially when used on a children’s book… one thing more… I wanted to see a video of… special characters… and other language support… n_n

  3. Bill Burgess

    Is it easy to embed the sound under the train? It seems like the picture is mapped to where the part with the train is “clickable” and opens the sound. Can you share exactly how this was done? Thanks,

    Bill Burgess

  4. Dean

    This seems like we will be starting some form of browser wars all over again. I thought the standard was to help provide some stability/compatibility across platforms. This seems to remove that.