Divya Manian

RSS Feed Youtube Channel Github

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.

EPUB has most recently found an advocate in Apple, but is also supported by many stand-alone Book readers like Stanza, Adobe Digital Editions, Bookworm, Sony Reader, and more.

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?

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?

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!