What Web Designers need to know about EPUB
Steve Jobs ate his hat when he announced the iBook application for the tablet, but the iBook portends a bright future for web designers too. Wait, what? Books and web designers, how are they even related? One word: EPUB.
EPUB is a publishing standard designed for reflowable content which means the book can be viewed on devices of multiple dimensions. It does this by using XHTML/CSS for rendering the book and a set of standards on top of that to store metadata that can be extracted by E-Book readers to render a table of contents and other details.
EPUB is a collection of 3 specifications:
- Open Publication Structure (OPS) 2.0, defines what formats are allowed to be used for the content (e.g. XHTML 1.1 and CSS 2).
- Open Packaging Format (OPF) 2.0, describes metadata, and structure of the .epub file in XML
- OEBPS Container Format (OCF) 1., specifies the directory structure of the EPUB ZIP archive.
Officially, Kindle does not support EPUB, but Savory is an application you can download to Kindle, which converts EPUB to Kindle format on the fly.
What is in it for you, Web Designer?
- Authors are attempting to self-publish e-books, and realise they need HTML expertise to do so. With your superior HTML knowledge you would have a great opportunity to win authors as clients.
- Kindle sales are one of the driving factors of Amazon's 71% increase in profit since the last financial year.
- Most e-books today are created by automated tools which are, at best, tag soup generators with no concern for design. My guess is publishers who consistently output great e-book designs would do much better in the marketplace.
How do I get started?
- Both Kindle and EPUB formats are based on HTML. Unfortunately, there are not many online resources for creating a Kindle book, but Kindle Formatting: The Complete Guide To Formatting Books For The Amazon Kindle and its associated website are highly recommended.
- There are several resources for creating an EPUB book though. Read this in-depth tutorial on creating an EPUB book (registration required). For a light read, read this article on the different methods of automating the creation of an EPUB book.
What about HTML5 & CSS3?
I know it is cool to talk about HTML5 and CSS3, but you cannot use any of that in an EPUB book.
EPUB is an open format but no new version of the specifications have been released since 2007 (one of them is dated 2006). XHTML format has, since then, become extinct too.
There is no public roadmap, nor are the mailing list archives open to non-members (you need to pay USD1000/year to be a member). From the Bug Tracker, it seems like there will be a new version sometime in the future.
Open Publication Structure officially requires EPUB readers to support SVG, but only Adobe Digital Editions supports it. EPUB also supports embedded fonts(preferably OTF) using the CSS2 definition of the @font-face rule.
Open Publication Structure does not talk about displaying HTML5 Videos or Flash animations and most EPUB readers do not support them.
<p>Open Publication Structure <a href="http://www.idpf.org/2007/ops/OPS_2.0_final_spec.html#Section1.3.6" title="Open Publication Structure (OPS) 2.0 v1.0">spectacularly fails to make the case for internationalization</a>, and most popular EPUB readers do not support non-western glyphs. The only way you can get around it is by embedding the font required to display international characters within the EPUB archive. </p> <p>Fortunately, <a href="http://www.infibeam.com/Pi" title="Infibeam.com Pi - India's First eBook Reader">EPUB readers sold in India and China</a> seem to have out-of-the box support for non-western fonts. </p> <p>You have even <a href="http://www.daisy.org/epub/issues/epub-needs-support-vertical-directionality-writing" title="EPUB needs support for vertical directionality in writing | EPUB Maintenance">worse luck trying to render languages with vertical script</a> (and most historical texts in Asia are written in them). </p> <p>There is a way to get around it using <a href="http://blogs.adobe.com/digitaleditions/2007/08/bidirectional_text_and_mathml.html" title="Digital Editions: Bidirectional text and MathML">SVG in Adobe Digital Editions</a>. But, as the comments note, this is not good enough. That article was written in 2007, and there is still no sign of internationalization in Adobe Digital Editions.</p>
How do I keep track of this in case it becomes as cool as HTML5?
- O'Reilly is a big EPUB supporter and has a great set of resources for EPUB (you can follow the trail from there onwards).
- You might also want to read this cartoonist's take on how he created an EPUB book for his wildly popular comic series, Valentine.
- Here is an OPML file of feeds from websites I track for EPUB news.
Hopefully this post will spur you to become an E-Book designer. You know where to send royalty cheques in case you become a world-famous one!