Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
258 lines (130 sloc) 14.5 KB
<!doctype html>
<!--[if lt IE 9]> <html class="no-js oldie" lang="en"> <![endif]-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>What Web Designers need to know about EPUB | Divya Manian</title>
<meta name="author" content="Divya Manian">
<meta name="description" content="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, &hellip;">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="canonical" href="">
<link href="/stylesheets/screen.css" rel="stylesheet">
<link href="" rel="alternate" title="Subscribe" type="application/atom+xml">
<link href="" rel="alternate" title="Subscribe to Web Development updates" type="application/atom+xml">
<body >
<div class="container">
<div class="content">
<header role="banner"> <h1><a href="/">Divya Manian</a></h1>
<h2><a class="twitter" href="">twitter</a> <a class="rss" href="">RSS Feed</a> <a class="youtube" href="">Youtube Channel</a> <a class="github" href="">Github</a></h2>
<nav class="sitenav"><a href="/">Home</a>
<a href="/archives">Archives</a>
<a href="/about.html">About</a>
<nav class="article">
<a class="previous" href="/book-reviews-for-jan-2010-part-2.html" title="Book Reviews for Jan 2010 – Part 2">❬</a>
<a class="next" href="/the-final-coming-of-svg.html" title="The Final Coming of SVG">❭</a>
<time datetime="2010-02-06T00:00:00-08:00" pubdate><span class='month'>Feb</span> <span class='day'>06</span> <span class='year'>2010</span></time>
<h1 class="entry-title"><a href="/what-web-designers-need-to-know-about-epub.html">What Web Designers need to know about EPUB </a></h1>
<div class="entry-content"><p>Steve Jobs<a href=";en=dc35254b0fcd5490&amp;ei=5090&amp;partner=rssuserland&amp;emc=rss" title="The Passion of Steve Jobs - Bits Blog -"> ate his hat</a> 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.</p>
<p><a href="" title="EPUB - Wikipedia, the free encyclopedia">EPUB</a> 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. </p>
<p>EPUB is a collection of 3 specifications:</p>
<li>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).</li>
<li>Open Packaging Format (OPF) 2.0, describes metadata, and structure of the .epub file in XML</li>
<li>OEBPS Container Format (OCF) 1., specifies the directory structure of the EPUB ZIP archive.</li>
<p>EPUB has most recently found an advocate in Apple, but is also supported by many stand-alone Book readers like <a href="" title="Stanza Desktop: A Revolution in Reading | Lexcycle">Stanza</a>, <a href="" title="Adobe - Digital Editions">Adobe Digital Editions</a>, <a href="" title="Read ePub ebooks online : Bookworm ePub reader">Bookworm</a>, <a href="">Sony Reader</a>, and <a href="" title="epubBooks Digital eBook Readers. Read your epub books on an iPhone, Sony Reader, iPod Touch, Blackberry and many other eReaders | Unleash Your Books">more</a>. </p>
<p>Officially, Kindle does not support EPUB, but <a href="" title="Savory - Massively Parallel Procrastination">Savory</a> is an application you can download to Kindle, which converts EPUB to Kindle format on the fly.</p>
<h3>What is in it for you, Web Designer?</h3>
<li>Authors are attempting to self-publish e-books, and <a href="" title="Kindle Conniptions: How I Published My First E-Book | Xconomy">realise they need HTML expertise to do so</a>. With your superior HTML knowledge you would have a great opportunity to win authors as clients.</li>
<li>Kindle sales are one of the driving factors of <a href="" title="Amazon Kindle Sales Push Profits Up 71% -- Amazon -- InformationWeek">Amazon&#8217;s 71% increase in profit since the last financial year</a>.</li>
<li>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. </li>
<h3>How do I get started?</h3>
<li>Both Kindle and EPUB formats are based on HTML. Unfortunately, there are not many online resources for creating a Kindle book, but <a href="">Kindle Formatting: The Complete Guide To Formatting Books For The Amazon Kindle</a> and its <a href="" title="Kindle Formatting">associated website</a> are highly recommended.</li>
<li>There are several resources for creating an EPUB book though. Read <a href="">this in-depth tutorial on creating an EPUB book</a> (registration required). For a light read, read this article on the <a href="" title=".epub eBooks Tutorial">different methods of automating the creation of an EPUB book</a>.</li>
<h3>What about HTML5 &amp; CSS3?</h3>
<p>I know it is cool to talk about HTML5 and CSS3, but you <em>cannot</em> use any of that in an EPUB book.</p>
<p>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. </p>
<p>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 <a href="" title="Issues for EPUB Maintenance | EPUB Maintenance">Bug Tracker</a>, it seems like there will be a new version sometime in the future.</p>
<p>Open Publication Structure officially requires EPUB readers to support SVG, but only <a href="">Adobe Digital Editions supports it</a>. EPUB also supports <a href="">embedded fonts(preferably OTF) using the CSS2 definition of the @font-face rule</a>.</p>
<p>Open Publication Structure does not talk about <a href="" title="Using HTML5 video in ePub : Threepress Consulting blog">displaying HTML5 Videos or Flash animations</a> and most EPUB readers do not support them. </p>
<pre><code>&lt;p&gt;Open Publication Structure &lt;a href="" title="Open Publication Structure (OPS) 2.0 v1.0"&gt;spectacularly fails to make the case for internationalization&lt;/a&gt;, 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. &lt;/p&gt;
&lt;p&gt;Fortunately, &lt;a href="" title=" Pi - India's First eBook Reader"&gt;EPUB readers sold in India and China&lt;/a&gt; seem to have out-of-the box support for non-western fonts. &lt;/p&gt;
&lt;p&gt;You have even &lt;a href="" title="EPUB needs support for vertical directionality in writing | EPUB Maintenance"&gt;worse luck trying to render languages with vertical script&lt;/a&gt; (and most historical texts in Asia are written in them). &lt;/p&gt;
&lt;p&gt;There is a way to get around it using &lt;a href="" title="Digital Editions: Bidirectional text and MathML"&gt;SVG in Adobe Digital Editions&lt;/a&gt;. 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.&lt;/p&gt;
<h3>How do I keep track of this in case it becomes as cool as HTML5?</h3>
<li>O&#8217;Reilly is a big EPUB supporter and has a <a href="" title="EPUB Resources and Guides - O'Reilly Labs">great set of resources for EPUB</a> (you can follow the trail from there onwards).</li>
<li>You might also want to read <a href="" title="Bleeding Cool Comic Book News and Rumors &raquo; Uncanny Valleygirl by Alex De Campi #9: Valentine Sales, ePub How-To And iPad">this cartoonist&#8217;s take on how he created an EPUB book</a> for his <a href="" title="Valentine: serialized multilingual device-independent comics Boing Boing">wildly popular comic series, Valentine</a>.</li>
<li>Here is an <a href="">OPML file of feeds from websites I track for EPUB news</a>. </li>
<p>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!</p>
<p class="meta">This post was posted by
<a href="/about.html">Divya Manian</a>
<time datetime="2010-02-06T00:00:00-08:00" pubdate><span class='month'>Feb</span> <span class='day'>06</span> <span class='year'>2010</span></time> in
<span class="categories">
<a class='category' href='/categories/web-development/'>Web Development</a>
. If you would like to update this post, <a href="">please send a pull request</a>.
<div id="disqus_thread" aria-live="polite"><noscript>Please enable JavaScript to view the <a href="">comments powered by Disqus.</a></noscript>
<aside id="articles">
<p><img class="avatar" src="/assets/divya.png" height=50> <a href="">Divya Manian</a> is a Web Developer in Seattle. <a href="/about.html">More about me ❭</a></p>
<h2>Posts on Web Development</h2>
<ul><li><a href="/html5please.html">html5please</a></li><li><a href="/mustache.html">mustache, hogan, handlebars</a></li><li><a href="/redesign-notes.html">Redesign Notes</a></li><li><a href="/summary-of-various-exciting-css-drafts-and-proposals.html">Summary of various exciting CSS drafts and proposals</a></li><li><a href="/this-revolution-needs-new-revolutionaries.html">This revolution needs new revolutionaries</a></li><li><a href="/some-css-transition-hacks.html">Some CSS Transition hacks</a></li><li><a href="/safe-css-defaults.html">Safe CSS Defaults</a></li><li><a href="/unplugged-2011.html">Unplugged 2011</a></li><li><a href="/bokeh-with-css3-gradients.html">Bokeh with CSS3 Gradients</a></li><li><a href="/making-pure-css3-demos-better.html">Making "Pure CSS3" demos better</a></li><li><a href="/web-opener-at-opera.html">Web Opener at Opera</a></li><li><a href="/current-color-in-css.html">Current Color in CSS</a></li><li><a href="/css-vocabulary.html">CSS Vocabulary</a></li><li><a href="/active-web-development.html">Active Web Development</a></li><li><a href="/sexy-css3-buttons.html">Sexy CSS3 Buttons</a></li><li><a href="/accessible-css-barcharts.html">Accessible CSS Barcharts</a></li><li><a href="/svg-is-coming.html">SVG is coming!</a></li><li><a href="/wee-marquee.html">Wee! Marquee</a></li><li><a href="/vignettes-with-css3-box-shadows.html">Vignettes with CSS3 Box Shadows</a></li><li><a href="/drop-shadows-with-css3.html">Drop Shadows with CSS3</a></li><li><a class="btn" href="/categories/web-development/">More</a></li></ul>
<footer role="contentinfo"><p>
Copy to your heart’s content 2012 - Divya Manian -
<span class="credit">Powered by <a href="">Octopress</a></span>
<script type="text/javascript">
var disqus_shortname = 'nimbublog';
var disqus_developer = 1;
var disqus_url = '';
var disqus_identifier = '';
(function () {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
<script src="/javascripts/octopress.js"></script>
var _gaq=[['_setAccount','UA-97188-1'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];