ePUB 3 and Publishing e-books
Upcoming SlideShare
Loading in...5
×
 

ePUB 3 and Publishing e-books

on

  • 10,310 views

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.

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.

Statistics

Views

Total Views
10,310
Views on SlideShare
10,268
Embed Views
42

Actions

Likes
13
Downloads
368
Comments
4

6 Embeds 42

http://www.box-color.com.tw 21
http://www.scoop.it 8
http://localhost 6
http://www.pearltrees.com 5
http://pinterest.com 1
http://www17.jimdo.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

ePUB 3 and Publishing e-books ePUB 3 and Publishing e-books Presentation Transcript

  • 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-statisticsFriday, 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.htmlFriday, April 13, 12 View slide
  • 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.pdfFriday, April 13, 12 View slide
  • What is ePUB? • Current version is 3.0 • HTML5, CSS3, XHTML and XML • Bundle of documents, media and scripts • Zipped with .epub extensionFriday, April 13, 12
  • ePUB File Format OEBPS META-INF Media Files ePUB Metadata ePUB Metadata XHTML CSS OPF XML NCX ADOFriday, April 13, 12
  • .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 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 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 sideFriday, 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 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>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 Best format for text-heavy books, novels Flow Layout Fixed Layout 39Friday, April 13, 12
  • 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); }Friday, April 13, 12
  • 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 OptionsFriday, 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.opfFriday, April 13, 12
  • Read Aloud Capture AudioFriday, April 13, 12
  • 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.opfFriday, 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 <package>        …        <manifest>                … alert("Reading  System  name:  "  +                <item  id="chap01"        navigator.epubReadingSystem.name);                        href="scripted01.xhtml"                          media-­‐type="application/xhtml+xml"                        properties="scripted"/> scripted01.xhtml        </manifest> </package> book.opfFriday, April 13, 12
  • 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" /> 54Friday, 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 http://www.amazon.com/gp/feature.html? ie=UTF8&docId=1000234621 • Convert from ePUB to http://kindlegen.s3.amazonaws.com/AmazonKindlePublishingGuidelines.pdf Amazon formatsFriday, 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 storesFriday, April 13, 12
  • An iPad ePUB app • Book Creator for iPad • http:// www.redjumper.net/ bookcreator/ • Generates more standards compliant ePUBFriday, 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-OSFriday, April 13, 12
  • Feature by Feature Comparison 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 EPUBFriday, April 13, 12