Interactivity in EPUB using JavaScript, HTML5 and CSS3: BEA/IDPF video posted

by Liza Daly

I re-recorded my talk at IDPF Digital Book as a video. Getting the audio synced properly was no fun so I apologize for a few production issues.

Here’s the executive summary of the talk:

  • You can add interactivity to an EPUB book using either the <object> or <script> elements.
  • Currently object has the best support, especially using Flash in Adobe Digital Editions.
  • The script element is specifically discouraged (though not disallowed) in EPUB 2.0.1, and no major reading system supports it. However, all browsers do!
  • The primary advantage of interactivity using script is that the content creator has the ability to manipulate every part of the ebook: all of the text, its layout, even potentially the user interface of the reading system itself. With object you can apply interactivity to just an arbitrary rectangle.
  • There is a great deal of interesting animation and even interactivity possible using CSS3, which is allowed in EPUB 2.0.1 and is supported by iBooks and other WebKit-based ereaders.
  • Interactivity is also possible using JavaScript combined with the HTML5 canvas element, though canvas is not part of EPUB 2.0.1.
  • With access to JavaScript on mobile devices, ebooks can potentially gain access to information about the reading device itself, such as the location of the reader in the physical world, or the device’s orientation, or even add photos and video from the device’s camera.
  • Any ereader that allows JavaScript provides the ability for ebooks to access live data on the web.
  • The primary blocker for extremely rich interactive ebooks is ereader support, but by embedding browser-based reading systems like Monocle, content creators can distribute such ebooks today.
  • It remains to be worked out how to handle JavaScript in larger ereading systems both safely and with proper fallbacks to non-interactive content.

I’ll also be posting some of the example files used in the tutorial in a forthcoming post.