HTML5 for Publishers

Chapter 6. Embedding HTML5 in EPUB

Thus far, we’ve built several HTML5 applications well suited to be embeded in ebooks. Now we’ll take a look at how to structure and embed this HTML5 content in an EPUB.

An EPUB document (both EPUB 2.01 and EPUB 3.0) is a ZIP archive comprising five main components:

A mimetype document containing the text application/epub+zip, which identifies the document as an EPUB
A set of HTML content documents and referenced media files that contain all the book content
A Package Document (often referred to as the OPF file), which contains a <manifest> that lists all the resources in the document and a <spine> that specifies the proper sequencing of the HTML content
A META-INF directory containing a container.xml file that identifies the location of the Package Document and, optionally, an encryption.xml file that holds encryption info if your EPUB will contain DRM
A Table of Contents document (in EPUB 2.01, a NCX file; in EPUB 3, a Navigation Document)

Note

A detailed discussion/tutorial on constructing EPUB documents is beyond the scope of this book, but see Additional Resources for some great articles that provide more guidance.

Embedding HTML5 content within an EPUB is done in the same fashion as any other HTML content; just add the file to your EPUB zip, and reference it in the OPF file. However, one important caveat is that many ereaders (most notably, iBooks) will not successfully parse HTML5 content unless the standard XHTML namespace is included on the <html> tag as follows:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
Exciting HTML5 content goes here...
</html>

So be careful not to leave out the declaration highlighted in bold above. Also, any and all resources referenced in your HTML content need to be listed in the OPF <manifest>. Here’s a sample manifest <item> for an external JavaScript file:

<item id="modernizr" href="modernizr-1.6.min.js" media-type="text/javascript"/>

Here’s an <item> for an MP3 audio file:

<item id="rem_song" href="losing_my_religion.mp3" media-type="audio/mp3"/>

And here’s an <item> for an MP4 video:

<item id="teen_vampires" href="new_moon.mp4" media-type="video/mp4"/>

The media-type attribute should contain the appropriate MIME media type for the file format; you can find a list of MIME types at http://www.iana.org/assignments/media-types/index.html

Alternatives to HTML5 and EPUB

As an open standard widely supported by nearly all major ereader devices (with one notable exception), EPUB is an excellent option for doing HTML5 ebook development, especially once the EPUB 3.0 specification is formally adopted. However, if you’re interested in adding multimedia and interactivity to your ebook content, but don’t want to go the HTML5/EPUB 3 route, here are some other options.

HTML5 and Mobi

If you’re interested in making your ebook content available on Amazon’s Kindle hardware and software platforms, EPUB is not an option. Kindle devices support only the proprietary Mobipocket (Mobi) format. Amazon provides a tool called Kindlegen for converting EPUB to Mobi, but Kindlegen and the Kindle’s HTML and CSS support in Mobi is generally less robust than that in EPUB (although greatly improved in their new KF8 format).

However, Kindle does now support embedded audio and video in Mobi content via the HTML5 <audio> and <video> tags. Per the latest version of the “Amazon Kindle Publishing Guidelines” (released 1/11/2012), videos in .mp4, .mpg, .ps, and .ts formats are accepted. Audio files must be in .mp3 format. See pages 28–33 of the guidelines for more details on content and metadata requirements.

Warning

As of January 2012, embedded audio and video content are only supported in Kindle for iOS. Per page 28 of the guidelines, “Kindle Edition with Audio/Video books are not supported on Kindle eInk devices or Kindle Fire.”

HTML5 and Ebook Apps

If instead of EPUB, you’re interested in making ebook apps, you may want to look into PhoneGap. PhoneGap allows you to write your application using HTML5, CSS, and JavaScript, and then deploy as an app for multiple platforms, including Apple iOS, Android, BlackBerry, and WebOS. In addition to fully supporting HTML5, PhoneGap has APIs for accessing and controlling many common smartphone features, including the camera, accelerometer, and compass. PhoneGap makes use of Apple’s Xcode infrastructure, and thus requires an Intel-based Mac. Check out their Getting Started guide for detailed information on how to get up and running.

You may also be interested in looking into the Baker ebook framework, a lighter-weight alternative to PhoneGap designed expressly for the release of interactive ebook content to Apple IOS devices. For more information, see Baker’s tutorial on compiling an ebook app and releasing to Apple’s App Store.

HTML5 and iBooks Author

iBooks Author is the name of a proprietary ebook format and corresponding GUI ebook-development tool introduced by Apple in January of 2012, which is supported in the iBooks reader for iPad. In addition to graphical design and formatting/layout tools for the production of standard text-and-graphic e-content in both portrait and landscape orientations, iBooks Author also supports a series of “widgets” for easy, code-free embedding of multimedia and interactive elements, including video, 3-D models, and interactive quizzes. Additionally, iBooks Author offers an HTML widget, which allows you to write your write your own custom HTML+CSS+JS mini-apps in Apple’s Dashcode application, which is part of the Xcode developer suite.

If you’re interested in learning more about developing ebooks in iBooks Author, you may want to check out O’Reilly’s free ebook, Publishing with iBooks Author.

Additional Resources

Here are some additional resources to check out:

IDPF EPUB 3.0 Specification: The official EPUB 3.0 specification. An absolute must-read if you’re planning on creating EPUB 3.0 files
EPUB 3 Best Practices by Matt Garrish and Markus Gylling (O’Reilly Media): A comprehensive reference guide to the ins and outs of the EPUB 3 specification, covering everything from metadata to font embedding and media overlays.
“Build a digital book with EPUB” by Liza Daly: Comprehensive instructions on how to construct an EPUB file. This tutorial is EPUB 2–specific, but the majority of the content is still applicable under EPUB 3 (consult the 3.0 spec for more information on the Navigation Document, which replaces the NCX TOC)
“Creating epub files” by Bob Ducharme: Additional discussion on some of the nuances of EPUB creation and validation. Pay extra attention to the discussion of how to properly zip up your EPUB archives, which is a bit less straightforward than you might expect.
Readium: Open source engine for rendering EPUB 3 from the International Digital Publishing Forum (IDPF). Readium is available as both a plugin for Google Chrome, and as a binary for Mac OS X. It’s an excellent tool for testing and QA of EPUB 3 content.
EpubCheck: The definitive tool for validating your EPUB files. The latest version of epubcheck (version 3.0) was released in December 2012; it supports validation of both EPUB 2.1 and EPUB 3 content, and is available for free download.
Kindle Publishing Guidelines: Official documentation publishing by Amazon with instructions and guidelines for publishing content for Kindle in Mobi format, covering both the new KF8 Mobi format and the legacy Mobi7 format. In particular, see the chapters on embedded audio/video and the appendices on HTML/CSS support for the latest information on the state of HTML5 support for the Kindle platform.
Publishing with iBooks Author by Nellie McKesson and Adam Witwer (O’Reilly Media): Free ebook covering Apple’s iBooks Author tool in-depth. In particular, see the coverage of Widgets in Chapter 4, if you’re interested in adding interactive/multimedia elements to iBooks Author publications.