ePUB 3 and                       Publishing e-books                              Kerem Karatal                           C...
e-book Market      $1,000          $800          $600          $400          $200                       2002   2003   2004...
e-book vs. Physical                             Books                       http://www.zdnet.com/blog/btl/e-book-sales-wil...
e-book Formats                             Publisher                                Format                          Apple ...
What is ePUB?                       • Current version is 3.0                       • HTML5, CSS3, XHTML and XML           ...
ePUB File Format                                            OEBPS                    META-INF                             ...
.opf File                              Open Packaging Format                       • Metadata                         • Ti...
Sample .opf File      <package	  version="2.0"	  unique-­‐identifier="bookid"	  xmlns:dc="http://purl.org/dc/elements/1.1/...
.ncx File                                Table of Contents                       • Superseded by ePUB Navigation Docs     ...
Sample .ncx file                       <ncx	  version="2005-­‐1"	  xmlns="http://www.daisy.org/                       z3986...
New ePUB Navigation                            Document                        <nav	  epub:type="toc"	  id="toc">         ...
<guide> Replacement                 <nav	  epub:type="landmarks">                 	  	  	  	  <h2>Guide</h2>              ...
Flow Layout vs. Fixed                              Layout      Best format for text-heavy books, novels                   ...
Flow Layout Techniques                                                 Best format for text-heavy books, novels           ...
Fixed Layout Techniques               • One XHTML doc per page, two                       per spread               • Image...
Non-Linear Docs                <html>                  <body>                     ...                        <a href="char...
Read Aloud                       Capture AudioFriday, April 13, 12
Implement Read Aloud                                                           <par id="par1">                            ...
Embedding Javascript                       • For animations use CSS3 if possible -                            hardware acc...
Embedding Audio Video                                       Standard HTML5 tags                <video src="myvideo.m4v"   ...
A word about Mobi &                                 KF8                • KF8 is the new fixed                       layout ...
A word about iBooks                                Author                       • Can insert Dashcode                     ...
An iPad ePUB app                       • Book Creator for iPad                       • http://                         www...
eBook Publishing                           Services                        http://www.booktango.com/Friday, April 13, 12
Other ePUB tools                       • Adobe Digital Publishing - ePUB 2                         • New 1.8 version in la...
Feature by Feature                       Comparison of Readers                          http://ibooksauthorguide.wordpress...
Questions?                       This talk is partially based on WWDC 2011                                          sessio...
Upcoming SlideShare
Loading in...5
×

ePUB 3 and Publishing e-books

10,845

Published on

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.

Published in: Technology, Business
4 Comments
14 Likes
Statistics
Notes
No Downloads
Views
Total Views
10,845
On Slideshare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
422
Comments
4
Likes
14
Embeds 0
No embeds

No notes for slide

ePUB 3 and Publishing e-books

  1. 1. ePUB 3 and Publishing e-books Kerem Karatal CTO, Colligo Networks http://www.colligo.com/company/careers/Friday, April 13, 12
  2. 2. 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
  3. 3. 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
  4. 4. 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
  5. 5. 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
  6. 6. ePUB File Format OEBPS META-INF Media Files ePUB Metadata ePUB Metadata XHTML CSS OPF XML NCX ADOFriday, April 13, 12
  7. 7. .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
  8. 8. 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
  9. 9. .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
  10. 10. 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
  11. 11. 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
  12. 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
  13. 13. Flow Layout vs. Fixed Layout Best format for text-heavy books, novels Flow Layout Fixed Layout 39Friday, April 13, 12
  14. 14. 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
  15. 15. 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
  16. 16. 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
  17. 17. Read Aloud Capture AudioFriday, April 13, 12
  18. 18. 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
  19. 19. 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
  20. 20. 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
  21. 21. 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
  22. 22. 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
  23. 23. An iPad ePUB app • Book Creator for iPad • http:// www.redjumper.net/ bookcreator/ • Generates more standards compliant ePUBFriday, April 13, 12
  24. 24. eBook Publishing Services http://www.booktango.com/Friday, April 13, 12
  25. 25. 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
  26. 26. Feature by Feature Comparison of Readers http://ibooksauthorguide.wordpress.com/Friday, April 13, 12
  27. 27. Questions? This talk is partially based on WWDC 2011 session: iBooks: Create Beautiful Books with HTML5, CSS3 and EPUBFriday, April 13, 12
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×