ePUB 3 and Publishing e-books

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