epub 3 and publishing e-books
DESCRIPTION
A quick overview of the ePUB 3 format and various implementations of it in e-book publishing. This is the talk given at HTML5 meetup in Vancouver on April 12, 2012.TRANSCRIPT
ePUB 3 and Publishing e-books
Kerem KaratalCTO, Colligo Networks
http://www.colligo.com/company/careers/Friday, April 13, 12
e-book Market
$200
$400
$600
$800
$1,000
2002 2003 2004 2005 2006 2007 2008 2009 2010 2011
Source: International Digital Publishing Forum
http://idpf.org/about-us/industry-statistics
Friday, April 13, 12
e-book vs. Physical Books
http://www.zdnet.com/blog/btl/e-book-sales-will-outpace-app-revenue-by-2013-says-yankee-group/44325
http://www.nytimes.com/2011/05/20/technology/20amazon.html
Friday, April 13, 12
e-book Formats
Publisher Format
Apple iBooks
Amazon
Barnes & Noble
ePUB3 + ADO
Mobi and new KF8
ePUB2
http://pubit.barnesandnoble.com/pubit_app/bn?t=supporthttp://www.amazon.com/gp/feature.html?docId=1000729511http://kindlegen.s3.amazonaws.com/AmazonKindlePublishingGuidelines.pdf
Friday, April 13, 12
What is ePUB?
• Current version is 3.0
• HTML5, CSS3, XHTML and XML
• Bundle of documents, media and scripts
• Zipped with .epub extension
Friday, April 13, 12
ePUB File Format
OEBPS META-INF
XHTML CSS
Media Files
NCX
OPF
ePUB Metadata
ADO
XML
ePUB Metadata
Friday, April 13, 12
.opf FileOpen Packaging Format
• Metadata
• Title, language, identifier ...
• Manifest
• List all files in the package
• Spine
• List all pages in linear reading order
• Guide (Deprecated was Optional before)
• Identifies key files in the book (cover, text)
• Use landmarks nav elementFriday, April 13, 12
Sample .opf File<package version="2.0" unique-‐identifier="bookid" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns="http://www.idpf.org/2007/opf"> <metadata> <dc:title>A new book</dc:title> <dc:creator>A. N. Author</dc:creator> <dc:publisher>www.redjumper.net/bookcreator</dc:publisher> <dc:date>2012</dc:date> <dc:language>en</dc:language> <dc:identifier id="bookid">http://www.redjumper.net/book/78DDE9A4-‐D231-‐42E6-‐9935-‐31FFB903CFA1</dc:identifier> <meta name="cover" content="imgcov" /> </metadata> <manifest> <item id="ncx" href="toc.ncx" media-‐type="application/x-‐dtbncx+xml" /> <item id="css" href="styles.css" media-‐type="text/css" /> <item id="pg000" href="page000.xhtml" media-‐type="application/xhtml+xml" /> <item id="pg001" href="page001.xhtml" media-‐type="application/xhtml+xml" /> <item id="imgcov" href="Cover.jpg" media-‐type="image/jpeg" /> </manifest> <spine toc="ncx"> <itemref idref="pg000" /> <itemref idref="pg001" /> </spine> <guide> <reference type="cover" href="page000.xhtml" /> <reference type="text" href="page001.xhtml" /> </guide></package>
Friday, April 13, 12
.ncx FileTable of Contents
• Superseded by ePUB Navigation Docs• A new valid XHTML format• Most existing samples still use .ncx• .ncx can live side by side
Friday, April 13, 12
Sample .ncx file
<ncx version="2005-‐1" xmlns="http://www.daisy.org/z3986/2005/ncx/"> <docTitle> <text>A new book</text> </docTitle> <navMap> <navPoint id="cover" playOrder="1"> <navLabel><text>Cover</text></navLabel> <content src="page000.xhtml" /> </navPoint> </navMap></ncx>
Friday, April 13, 12
New ePUB NavigationDocument
<nav epub:type="toc" id="toc"> <h1>Table of contents</h1> <ol> <li> <a href="chap1.xhtml">Chapter 1</a> <ol> <li> <a href="chap1.xhtml#sec-‐1.1">Chapter 1.1</a> <ol hidden=""> <li> <a href="chap1.xhtml#sec-‐1.1.1">Section 1.1.1</a> </li> <li> <a href="chap1.xhtml#sec-‐1.1.2">Section 1.1.2</a> </li> </ol> </li> <li> <a href="chap1.xhtml#sec-‐1.2">Chapter 1.2</a> </li> </ol> </li> <li> <a href="chap2.xhtml">Chapter 2</a> </li> </ol></nav>
Friday, April 13, 12
<guide> Replacement
<nav epub:type="landmarks"> <h2>Guide</h2> <ol> <li><a epub:type="toc" href="#toc">Table of Contents</a></li> <li><a epub:type="loi" href="content.html#loi">List of Illustrations</a></li> <li><a epub:type="bodymatter" href="content.html#bodymatter">Start of Content</a></li> </ol></nav>
Friday, April 13, 12
Flow Layout vs. Fixed Layout
64
Best format for text-heavy books, novels
39
Flow Layout Fixed Layout
Friday, April 13, 12
Flow Layout Techniques• Width in %, font size
ems
• Pseudo CSS Class
• :first-of-type
• Pseudo CSS Elements
• :first-line, :first-letter, :before
• Embed Fonts
Best format for text-heavy books, novels
39
p.handwritten {font-family: "LeagueScript"; }
@font-face {font-family: "LeagueScript";src: url(../fonts/LeagueScript.otf); }
Friday, April 13, 12
Fixed Layout Techniques
64
• One XHTML doc per page, two per spread
• Images 1.5x intended display size
<head><title>Fixed Layout Example</title><link href="css/stylesheet.css" type="text/css" rel="stylesheet"/> <meta content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=800, height=600" /></head>
<display_options> <platform name="*"> <option name="fixed-layout">true</option> </platform></display_options>
Apple Display Options
page01.xhtml
Friday, April 13, 12
Non-Linear Docs<html> <body>
... <a href="chart.xhtml"> <img src="images/chart.png" alt="Chart"/> </a>
... </body></html>
Page.xhtml
<html> <body> <table></table> </body></html>
Chart.xhtml
<spine toc=”ncx”> ... <itemref idref="chart" linear="no" /></spine>
book.opf53
Friday, April 13, 12
Read AloudCapture Audio
Friday, April 13, 12
Implement Read Aloud
<p> <span id="word1">Hello</span> <span id="word2">I</span></p>
<par id="par1"> <text src="page1.xhtml#word1"/> <audio src="audio/page1.m4a" clipBegin="0.267029s" clipEnd="0.998458s" /></par>
<par id="par2"> <text src="page1.xhtml#word2"/> <audio src="audio/page1.m4a" clipBegin="1.578957s" clipEnd="2.287166s" /></par>
page1.xhtml page1.smil
<manifest> ... <item id="mo-page1" href="page1.smil" media-type="application/smil+xml"/> <item id="narrat" href="audio/page1.m4a" media-type="audio/mpeg"/> <item id="page1" href="page1.xhtml" media-type="application/xhtml+xml" media-overlay="mo-page1"/> ... </manifest>
book.opf
.-epub-media-overlay-active { color: orange;}
style.css
Friday, April 13, 12
Embedding Javascript• For animations use CSS3 if possible -
hardware accelerated
• epubReadingSystem object
• Content document needs to have scripted property set in manifest
alert("Reading System name: " + navigator.epubReadingSystem.name);
<package> … <manifest> … <item id="chap01" href="scripted01.xhtml" media-‐type="application/xhtml+xml" properties="scripted"/>
</manifest></package>
scripted01.xhtml
book.opf
Friday, April 13, 12
Embedding Audio Video
<video src="myvideo.m4v" controls="controls" poster="posterimage.jpg" width="300" height="200" />
<audio src="myaudio.m4a" controls="controls" width="300" />
Standard HTML5 tags
54
<video src="myvideo.m4v" controls="controls" poster="posterimage.jpg" width="300" height="200" />
<audio src="myaudio.m4a" controls="controls" width="300" />
Friday, April 13, 12
A word about Mobi & KF8
• KF8 is the new fixed layout optimized format
• Kindle Fire uses it
• Almost ePUB3 with restrictions
• KindlePreviewer Tool
• KindleGen command line tool
• Convert from ePUB to Amazon formats
http://www.amazon.com/gp/feature.html?ie=UTF8&docId=1000234621
http://kindlegen.s3.amazonaws.com/AmazonKindlePublishingGuidelines.pdf
Friday, April 13, 12
A word about iBooks Author
• Can insert Dashcode widgets into HTML widget (.wdgt)
• Proprietary layout in HTML - under object tags
• Almost impossible to convert to non-iBooks stores
Friday, April 13, 12
An iPad ePUB app
• Book Creator for iPad
• http://www.redjumper.net/bookcreator/
• Generates more standards compliant ePUB
Friday, April 13, 12
eBook Publishing Services
http://www.booktango.com/
Friday, April 13, 12
Other ePUB tools
• Adobe Digital Publishing - ePUB 2
• New 1.8 version in labs - some support for ePUB 3
• Nook uses ePUB 2
• Free Mac ePUB viewer - Ehon
• Readium.org -> Chrome Extension
• See Quora question for more:http://www.quora.com/What-is-best-ePub-reader-for-Mac-OS
Friday, April 13, 12
Feature by FeatureComparison of Readers
http://ibooksauthorguide.wordpress.com/
Friday, April 13, 12
Questions?
This talk is partially based on WWDC 2011 session:
iBooks: Create Beautiful Books with HTML5, CSS3 and EPUB
Friday, April 13, 12