ePUB 3 and Publishing e-books

ePUB 3 and
Publishing e-books
Kerem Karatal
CTO, Colligo Networks

http://www.colligo.com/company/careers/
Friday, April 13, 12

e-book Market
$1,000

$800

$600

$400

$200

2002 2003 2004 2005 2006 2007 2008 2009 2010 2011
Source: International Digital Publishing Forum

http://idpf.org/about-us/industry-statistics


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


e-book Formats
Publisher Format

Apple iBooks ePUB3 + ADO

Amazon Mobi and new KF8

Barnes & Noble ePUB2

http://pubit.barnesandnoble.com/pubit_app/bn?t=support
http://www.amazon.com/gp/feature.html?docId=1000729511
http://kindlegen.s3.amazonaws.com/AmazonKindlePublishingGuidelines.pdf


What is ePUB?

• Current version is 3.0
• HTML5, CSS3, XHTML and XML
• Bundle of documents, media and
scripts
• Zipped with .epub extension


ePUB File Format

OEBPS META-INF

Media Files ePUB Metadata ePUB Metadata

XHTML CSS OPF XML
NCX ADO


.opf File
Open 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 element

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"
/>

<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"
/>

<reference
type="text"
/>

</guide>
</package>


.ncx File
Table of Contents

• Superseded by ePUB Navigation Docs
• A new valid XHTML format
• Most existing samples still use .ncx
• .ncx can live side by side


Sample .ncx ﬁle

<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>


New ePUB Navigation
Document
<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>


<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>


Flow Layout vs. Fixed
Layout
Best format for text-heavy books, novels

Flow Layout Fixed Layout
39


Flow Layout Techniques
Best format for text-heavy books, novels
• Width in %, font size
ems

• Pseudo CSS Class
• :first-of-type
• Pseudo CSS Elements
• :first-line, :first-
letter, :before

• Embed Fonts p.handwritten {
font-family: "LeagueScript"; }

@font-face {
font-family: "LeagueScript";
src: url(../fonts/LeagueScript.otf); }


Fixed Layout Techniques
• 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>

page01.xhtml

<display_options>
<platform name="*">
<option name="fixed-layout">true</option>
</platform>
</display_options>

Apple Display Options


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.opf


Read Aloud
Capture Audio


Implement Read Aloud
<par id="par1">
<text src="page1.xhtml#word1"/>
<audio src="audio/page1.m4a" clipBegin="0.267029s" clipEnd="0.998458s" />
<p> </par>
<span id="word1">Hello</span>
<span id="word2">I</span> <par id="par2">
</p> <text src="page1.xhtml#word2"/>
<audio src="audio/page1.m4a" clipBegin="1.578957s" clipEnd="2.287166s" />
</par>

page1.xhtml page1.smil

.-epub-media-overlay-active {
color: orange;
}

style.css

<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

Embedding Javascript
• For animations use CSS3 if possible -
hardware accelerated
• epubReadingSystem object
• Content document needs to have
scripted property set in manifest
<package>

…

<manifest>

…
alert("Reading
System
name:
"
+

<item
id="chap01"

navigator.epubReadingSystem.name);

href="scripted01.xhtml"


properties="scripted"/>

scripted01.xhtml

</manifest>
</package>

book.opf


Embedding Audio Video

Standard HTML5 tags

<video src="myvideo.m4v"
<video src="myvideo.m4v"
controls="controls"
controls="controls"

poster="posterimage.jpg"
poster="posterimage.jpg"
width="300" height="200" />
width="300" height="200" />
<audio src="myaudio.m4a"
controls="controls"
width="300" />
<audio src="myaudio.m4a"
controls="controls"
width="300" />

54


A word about Mobi &
KF8
• KF8 is the new ﬁxed
layout optimized format

• Kindle Fire uses it
• Almost ePUB3 with
restrictions

• KindlePreviewer Tool
• KindleGen command
line tool
http://www.amazon.com/gp/feature.html?
ie=UTF8&docId=1000234621

• Convert from ePUB to http://kindlegen.s3.amazonaws.com/AmazonKindlePublishingGuidelines.pdf
Amazon formats


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


An iPad ePUB app

• Book Creator for iPad
• http://
www.redjumper.net/
bookcreator/

• Generates more
standards compliant
ePUB


eBook Publishing
Services

http://www.booktango.com/


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

Feature by Feature
Comparison of Readers

http://ibooksauthorguide.wordpress.com/


Questions?

This talk is partially based on WWDC 2011
session:
iBooks: Create Beautiful Books with HTML5, CSS3 and EPUB


ePUB 3 and Publishing e-books

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to ePUB 3 and Publishing e-books

Similar to ePUB 3 and Publishing e-books (20)

Recently uploaded

Recently uploaded (20)

ePUB 3 and Publishing e-books