Recommended
More Related Content
Featured
Featured (20)
Writing EPUB 3 - Tokyo Ebook Expo
- 1. Writing EPUB 3 Liz Castro @lizcastro www.pigsgourdsandwikis.com
- 3. EPUB 3 uses HTML5 <html> <body> <p>hello</p> </body> </html>
- 4. Backwards compatibility （後方互換性） • EPUB 3 compliant ereaders “should” support EPUB 2 （EPUB 3に準拠したリーダーは、EPUB 2もサポートすべきである。） • EPUB 3 files generally work in EPUB 2 readers （EPUB 3ファイルは一般的には、EPUB 2リーダーでも動作する。）
- 5. Readium
- 6. Readium
- 7. NOOK Color Kobo Vox
- 8. Kobo for iOS
- 9. iBooks on iPhone iBooks on iPad
- 11. EPUB3 Tools
- 12. InDesign CS6
- 13. InDesign CS6 Export to EPUB3 （EPUB 3 出力） Validates （バリデーション） CSS support is good （CSSサポートは良好） Creates NCX and HTML TOC （NCXとHTML TOCの生成） Separates documents （章ごとのファイル分割）
- 14. InDesign CS6
- 15. Text Editor
- 17. EPUB 3 Readers
- 18. What’s does EPUB 3 look like?
- 19. content.opf
- 20. content.opf <?xml version="1.0" encoding="UTF-8" standalone="yes"?> <package xmlns="http://www.idpf.org/2007/opf" unique-identifier="bookid" version="3.0"> <metadata>...</metadata> <manifest>...</manifest> <spine>...</manifest>
- 21. content.opf <metadata xmlns:dc="http://purl.org/dc/elements/1.1/"> <meta name="generator" content="Adobe InDesign" /> <dc:title>オオカバマダラ Vertical</dc:title> <dc:creator>Wikipedia</dc:creator> <dc:date>2012-06-25</dc:date> <dc:language>ja</dc:language> <dc:subject>Monarch Butterflies</dc:subject> <dc:subject>オオカバマダラ</dc:subject> <meta property="dcterms:modified">2012-06-25T12:00:00Z</ meta> <dc:identifier id="bookid">urn:uuid:8463909E-0CA2-43F2- A7D4-1DEF2527475D</dc:identifier> </metadata>
- 22. content.opf <manifest> <item id="M" href="M.xhtml" media-type="application/xhtml+xml" /> <item id="M1" href="M1.xhtml" media-type="application/xhtml+xml" /> <item id="M2" href="M2.xhtml" media-type="application/xhtml+xml" /> ... <item id="ncx" href="toc.ncx" media-type="application/x-dtbncx+xml" /> <item id="toc" href="toc.xhtml" media-type="application/xhtml+xml" properties="nav" /> <item id="M.css" href="css/M.css" media-type="text/css" /> <item id="extra.css" href="css/extra.css" media-type="text/css" /> <item id="Sazanami-Gothic-Regular.otf" href="font/Sazanami-Gothic- Regular.otf" media-type="application/vnd.ms-opentype" /> <item id="x203.png" href="image/203.png" media-type="image/png" properties= "cover-image" /> <item id="cater.png" href="image/cater.png" media-type="image/png" /> ... </manifest>
- 23. content.opf <spine page-progression-direction="rtl" toc="ncx"> <itemref idref="Monarchjp" /> <itemref idref="Monarchjp-1" /> <itemref idref="Monarchjp-2" /> <itemref idref="Monarchjp-3" /> <itemref idref="Monarchjp-4" /> <itemref idref="Monarchjp-5" /> <itemref idref="Monarchjp-6" /> <itemref idref="Monarchjp-7" /> </spine>
- 24. HTML5
- 25. HTML5 Filename should end with .xhtml extension （拡張子.xhtmlが必要）
- 26. HTML5 DOCTYPE can be omitted from XHTML docs （DOCTYPE宣言は省略可能）
- 27. HTML5 Declare the character set with the meta tag. （metaタグによるcharset宣言）
- 28. HTML5 With “XHTML syntax” quoted attributes, closing tags, lowercase element and attribute names, attribute values required, etc. XHTMLシンタックス 属性は引用符で囲む。終了タグが必要。タグ、タグ属性は小文字で。 属性値は必須
- 29. HTML5 New HTML5 features: audio/video, canvas, media overlays, javascript, MathML, Asian language support (Ruby, language direction, etc.), etc. （新しいHTML5の機能：audio/video、CANVAS、Media Overlays、JavaScript、MathML、 アジア言語サポート（ルビ、言語の方向））
- 30. CSS
- 31. CSS CSS 2.1 except no fixed positioning, or language direction directives （位置固定と言語の方向をのぞき、CSS 2.1は使用可能） some properties from CSS3 Speech, CSS3 Fonts, CSS3 Text (hypens, line breaks, word breaks, CSS3 Writing modes, Media queries, Namespaces, Ruby, Multi-column, footers and headers （CSS 3のいくつかのプロパティも使用可能） Details: http://idpf.org/epub/30/spec/epub30- contentdocs.html#sec-css
- 32. CSS body {-epub-writing-mode: vertical-rl;} p.copyright {-epub-writing-mode: horizontal-tb;}
- 34. Table of contents NCX file no longer required (still supported) （NCX形式の目次は不要（サポートは継続）） New nav element with HTML TOC required （新しいHTML TOC形式のnav要素が必須）
- 35. Table of contents In HTML, create nav element: （HTML内でnav要素を作成） <nav xmlns:epub="http://www.idpf.org/2007/ ops" id="toc" epub:type="toc"> ...ordered list... （ol：順序付きリスト） </nav>
- 36. Table of contents <ol> <li><a href="Monarchjp-1.xhtml#toc_marker-1">オオカバマダラ</a> <ol> <li><a href="Monarchjp-2.xhtml#toc_marker-1-1">特徴</a></li> <li><a href="Monarchjp-3.xhtml#toc_marker-1-2">大移動</a></li> <li><a href="Monarchjp-4.xhtml#toc_marker-1-3">保護の現状</a></li> <li><a href="Monarchjp-5.xhtml#toc_marker-1-4">人間との関係</a></li> <li><a href="Monarchjp-6.xhtml#toc_marker-1-5">参考文献</a></li> </ol> </li> </ol>
- 37. Table of contents In content.opf, declare item, with properties="nav": （パッケージ文書内で、TOCである項目を、properties= nav で宣言） <item id="toc" href="toc.xhtml" media- type="application/xhtml+xml" properties="nav" />
- 39. What can you do with EPUB 3?
- 40. Asian Language support • Vertical writing with right to left pagination （縦書きと、右から左へのページネーション） • Ruby characters, Tate-chu-yoko, Kenten （ルビ、縦中横、圏点） • Support for Asian language fonts and UTF-8 encoding （アジア言語フォントとUTF-8のサポート） • Control over text-orientation （文字の方向の制御） • Many more details: http://www.w3.org/TR/css3- writing-modes/
- 41. Vertical writing （縦書き） CSS: body {-epub-writing-mode: vertical-rl;} p.copyright {-epub-writing-mode: horizontal-tb;} content.opf: <spine page-progression-direction="rtl">
- 42. Vertical writing
- 43. Ruby （ルビ） <h2 class="chapter" id="r01">第一章 僕の「課外授業」 を、君に渡す<ruby>襷<rt>たすき</rt></ruby>として</h2>
- 44. tate-chu-yoko （縦中横） 1. Style TCY characters (either in InDesign, or in XHTML) 2. Use CSS: span.tcy {-epub-text-combine: horizontal;}
- 45. Kenten （圏点） Again, style in InDesign or XHTML. Then apply CSS: span.kenten {-epub-text-emphasis-style: sesame;}
- 46. Fonts Set the font to either: (for vertical) font-family:"@Hiragino Mincho ProN","@ヒラギノ明朝 Pro W3", "@IPAexMincho", "@IPAex明朝", "@MS Mincho", "@ＭＳ 明朝","ヒラギノ明朝 Pro W3", "Hiragino Mincho ProN", "IPAexMincho", "IPAex明朝",serif; font-family:"@HiraKakuProN-W3", "@ヒラギノ角ゴ Pro W3","@MS Gothic","@ＭＳ ゴシッ ク","HiraKakuProN-W3","ヒラギノ角ゴ Pro W3",sans-serif; (for horizontal) font-family: "Hiragino Mincho ProN","ヒラギノ明朝 Pro W3","IPAexMincho","IPAex明朝","MS Mincho","ＭＳ 明朝",serif; font-family: "HiraKakuProN-W3","ヒラギノ角ゴ Pro W3","MS Gothic","ＭＳ ゴシック",sans-serif; and the line-height:1.75;
- 47. Audio • <audio> is official part of HTML5 and thus EPUB3 （<audio>要素はHTML5の正式な要素であり、EPUB 3でも使用可能） • .mp3 support required, .mp4 support recommended （.mp3のサポート必須。.mp4のサポート推奨）
- 48. Audio <audio src="audio/ diables.mp3" controls="controls"> </audio>
- 49. Video • <video> element is part of HTML5 and thus EPUB3 （<video>要素はHTML5の正式な要素であり、EPUB 3でも使用可能） • Which codec? H.264 or VP8 (but neither is required) （コーデックは何を使う？ H.264またはVP8（ただしいずれのサポートも必須ではない）） • .mp4 format （.mp4フォーマット）
- 50. Video <video src="video/caterp.mp4" controls="controls" poster="images/caterp.jpg"> </video>
- 51. MathML • Supported to varying degrees in Readium, Azardi, iBooks （Readium、Azardi、iBooksでそれぞれに可能な範囲でサポートされている） • Only presentational MathML; no extra code required. Convert equations to MathML with conversion tools. （MathMLの表示に追加のコード不要。数式を変換ツールでMathMLへ変換すれば良い）
- 52. MathML
- 53. Footnotes • Semantically code footnotes （セマンティックな脚注のコーディング） • Ereaders (like iBooks) can "associate specialized behavior" （iBooksのようなリーダーでは、特別なふるまいとして関連づけてよい）
- 54. Footnotes • Link: <a epub:type="noteref" href="#n1">1</a> • Footnote: <aside epub:type="footnote" id="n1"> <p>This is the footnote.</p> </aside>
- 55. Footnotes
- 56. Media Overlay Add pre-recorded audio track to book （あらかじめ録音されたオーディオトラックを書籍に追加） Synchronize with text （テキストと音声のシンクロ） Play audio while corresponding text is highlighted （オーディオの再生と、対応するテキストのハイライト）
- 57. Media Overlay Text in XHTML file must be adequately labeled （XHTML内のテキストにはラベルが必要）
- 58. Media Overlay Next, create the audio files, and find the duration of the chunks that match the text. （オーディオファイルを作成し、テキストに対応する箇所の持続時間を調べる）
- 59. Media Overlay Export the duration information from Audacity and convert it into a SMIL file. （該当箇所の持続時間の情報をAudacityから出力し、SMILに変換）
- 60. Media Overlay Declare and relate audio and smil in the content.opf file （content.opfでオーディオとSMILの関係を定義）
- 61. Media Overlay When the reader presses the play button, the text is read, and highlighted. （リーダーで再生ボタンを押せば読まれているテキストがハイライトする）
- 62. Fixed Layout IDPF Fixed Layout format approved in May, already supported by Readium and Kobo for iOS （IDPF Fixed Layoutは5月に承認された。ReadiumとKobo for iOSでサポート済み） Very similar to Apple FXL （Apple FXLと似ている） Significantly different from NOOK and Kindle FXL （NOOKやKindleのFXLとは大きく異なる）
- 63. Fixed Layout Still no great tools for creating fixed layout （便利な作成ツールはまだない） Most work must be done by hand coding （多くのコードは手書きするしかない）
- 64. Fixed Layout Add prefix to package at top of content.opf: （パッケージ文書の先頭でプリフィックスを追加する） <package xmlns="http://www.idpf.org/2007/ opf" version="3.0" xml:lang="en" unique- identifier="uid" prefix="rendition: http:// www.idpf.org/vocab/rendition/# cc: http:// creativecommons.org/ns#">
- 65. Fixed Layout Add rendition options: （renditionオプションの追加） layout, orientation, spread
- 66. Fixed Layout In content: viewport is required （コンテンツのHTML5ファイルでviewportが必須）
- 67. Fixed Layout Add .com file so it’ll work in iBooks （iBooksでの動作用に.comファイルを追加）
- 68. Fixed Layout IDPF FXL file works in Readium on desktop:
- 69. Fixed Layout ...and in Kobo for iOS too:
- 70. Fixed Layout ...and in iBooks for iOS too:
- 71. Liz Castro • EPUB Straight to the Point (and other EPUB miniguides) www.elizabethcastro.com/epub • Pigs, Gourds, and Wikis www.pigsgourdsandwikis.com • Twitter: @lizcastro, #eprdctn • email: liz@elizabethcastro.com
Editor's Notes
- EPUB3 was approved by the IDPF&#x2014;a consortium of publishers and technology companies&#x2014;as a final approved recommendation in October, 2011. It's greatest asset is that it is an international standard, beholden to no single company. Its very independence has led to its adoption by all but one of the leading ebook retailers and most publishers.\n
- EPUB is a zipped package of files. There are three primary elements: the mimetype file, the META-INF folder, and the OEBPS folder, which contains the contents of the ebook. The OEBPS also contains a content.opf XML file which gives information about an EPUB document, including metadata, a list of the included content, and instructions about how the content should be ordered, and a TOC document which helps the reader navigate the content.\n
- HTML5 is the same language that is used for most of the web, and it helps to ensure the universality of content files. I'll get into the specifics of how to use HTML5 later on, but it's important to remember that just because something uses HTML5, it doesn't mean it uses all the most complicated parts of HTML5. It just means it has the capacity to use the complicated parts. Many times, like in the example shown above, and with many ebooks, an HTML5 document will be very simple.\n
- No publisher wants to create ebooks that will be outdated before the end of the week. One of the promises of EPUB 3 is that the spec recommends that compliant ereaders support EPUB 2 as well, and thankfully, EPUB 3 also works in many existing ereaders (that may only promise EPUB 2).\n
- Readium is an EPUB 3 reader developed by the IDPF. Its support for Japanese writing is excellent, being able to display Japanese text both horizontally and vertically, with the proper page progression (left-to-right or right-to-left, respectively).\n
- I will show you just how to create a Vertically displayed Japanese book in a few moments.\n
- The NOOK Color and Kobo Vox only claim to support EPUB 2, but both open the EPUB 3 file without complaint. They both require the Japanese fonts to be embedded in the file, and can only display text horizontally from left to right. \n
- Kobo's new iOS app, doesn't promise EPUB 3, but nevertheless has excellent support for both Vertical writing and right-to-left progression.\n
- Apple's iBookstore officially supports EPUB 3 as of just a few weeks ago, but its support of Japanese writing is still in its infancy. Like NOOK and Kobo, it only displays Japanese horizontally and from left to right.\n
- Amazon doesn't offically support any version of EPUB (or Japanese writing), although it does allow publishers (both large and small) to deliver EPUB files that Amazon will later convert to its own mobi and KF8 formats with KindleGen. Nevertheless, it has no difficulty properly converting from EPUB 3, and like the other popular ereaders, currently only supports horizontal left-to-right writing systems. \n
- \n
- InDesign is an excellent tool for creating Japanese language ebooks. Be sure to choose the proper binding when you create your document so that the generated EPUB has the proper page-progression-direction. (As expected, a left binding will generate a left to right page progression, a right binding will get you right to left page progression in the EPUB.) InDesign also offers tate-chu-yoko, kenten, ruby characters, and other Japanese language effects.\n
- InDesign's EPUB 3 support is very good. To generate an EPUB 3 file, choose File > Export, EPUB format, and then EPUB 3.0 in the General Panel that appears. \n
- One of InDesign CS 6's best new features is ability to add additional CSS style sheets to an exported EPUB without having to crack it open. This additional CSS is applied after the ID generated CSS and thus, with selectors of equal specificity, will override it. \n
- Although InDesign's support for EPUB 3 is robust, it is not perfect. It's sometimes necessary to open the EPUB file and edit the contents manually. For that, or for writing EPUB 3 from scratch, you will need a text editor. Some popular text editors for Macintosh are BBEdit, TextMate, and Coda, while for Windows, there is Notepad++ and others. The important thing is that you be able to save in text-only format, and choose the proper character set. If you can do powerful search and replace, that is also a benefit.\n
- ePubCheck is a very important tool for generating EPUB 3, as it can pinpoint errors in your files that would make them display incorrectly (or not at all) in an ereader. Many ebookstores require validation before accepting your files. One thing to keep in mind is that ePubCheck can validate both EPUB 2 and EPUB 3 files. The version that you declare is the one that it compares your file against. (In other words, just because EpubCheck3 validates your file doesn't mean it's an EPUB 3 file.\n
- There are three ereaders that officially support EPUB 3, iBooks, Azardi and Readium. Readium has by far the most robust support, as we will see. I would also take a good look at Kobo's iOS app, which has excellent support for Japanese writing systems. It's also important and hopeful that other ereaders are improving their support of both EPUB 3 and Japanese and other Asian writing systems.\n
- As we saw earlier, EPUB 3 is a package that includes a mimetype and META-INF folders that are the same from file to file, and then the OEBPS folder which holds all the files that make up the content of the ebook: the XHTML, CSS, images, audio, video, and more, as well as a special content.opf file and the TOC. We'll start with the content.opf file. \n
- \n
- The content.opf file has three main components: the metadata section that gives information about the book, that lists the files that make up the ebook, and the spine, which describes the order in which the documents in the ebook should be displayed by the ereader device. In the header, the version number is how you tell an ereader (or ePubCheck) that the EPUB file uses EPUB 3 features.\n
- The metadata section gives information about the book both with meta tags and dc:property tags. The namespace for the latter must be declared in the metadata element, as shown here. You can either code this section by hand, generate it with InDesign, or some combination of the two (which is often necessary). Good metadata helps your book be found in a sea of other publications. The dc:modified element is new to EPUB 3 and helps you know which is the latest version of a given file. Some metadata is required (like the date and dc:modified), most is optional but highly recommended.\n
- The manifest section of the content.opf file lists every file that is used to create the content of the ebook, from XHTML and CSS, to both the ncx and XHTML TOC files, the fonts and images, audio, and video. Each declaration includes a unique id, a link to the document in the EPUB package, and a media-type that describes what kind of document it is. All documents in an EPUB package must be manifested, except the mimetype and those within the META-INF folder.\n
- Since an EPUB 3 package can contain a number of XHTML documents, the spine tells the ereader device which one comes first, and which then follow. Each XHTML document is referenced by its idref value (which was declared, together with the file's location, in the manifest (that we just looked at). By default, the items in the spine are displayed from left to right, that is each successive item can be found by swiping towards the right. If you add page-progression-direction="rtl" to the spine element, the elements will be displayed from right-to-left, and thus swiping to the left will get the next successive element. InDesign adds this attribute according to the binding you choose when you create the doc.\n
- In EPUB 3 all of the text, indeed all of the content, is referenced in HTML5 documents. \n
- HTML5 files can either end in .html or .xhtml. In EPUB 3 they must end in .xhtml As usual, they should be saved in text-only format with the UTF-8 encoding.\n\n
- The specs say that as long as an HTML5 is served as XHTML, which it is in EPUB 3, the Doctype is optional. \n
- The character set must be declared in the first 1024 characters of the document, so it's a good idea to list it at the top of the head section. Of course, the document must be saved with a UTF-8 encoding as well.\n
- There are various flavors of HTML5, the one that is used with EPUB 3 is called an "XHTML serialization", which basically means that you can use the new elements from HTML5 but you have to continue to use the syntax from XHTML: quoted attributes, required closing tags, lowercase element and attribute names, required attribute values, etc. Note that in the above example, with no quotes around the attribute value, the document would validate as HTML5, but if included in EPUB 3, would not validate as EPUB 3. \n
- One of the great advantages of EPUB 3's adoption of HTML5 is that of course, it can now benefit from all the features in HTML5, including support for audio and video, canvas, media overlays, javascript, MathML, Asian Language Support\n
- CSS, which stands for Cascading Style Sheets, and provides formatting and styling for an ebook's content.\n\n
- EPUB 3 supports CSS 2.1 except for fixed positioning and language directives. It also supports some properties from a number of CSS modules, including Speech, Fonts, Text, Writing modes, Media queries, Namespaces, Ruby, Multi-column, and footers and headers.\n\n
- The properties from the CSS 3 modules must be prefixed with -epub- as shown in this example. I'll go into more detail about Japanese language properties a little later on. Properties from CSS 2 should not carry the -epub- prefix.\n\n
- Don't forget: if stylesheet contains non-latin characters, declare character set on first line.\n\n
- EPUB 3 requires a new HTML-based TOC which is little more than a standard ordered list. It is much more user readable and much easier to construct and edit. It also allows the older toc.ncx file to be included, which facilitates opening EPUB 3 files with older ereaders (that ostensibly only support EPUB 2). Happily, InDesign CS 6 generates both the new and old style TOC documents when exporting to EPUB 3.\n
- If you want to write the TOC by hand, or if you need to edit it, it's good to know what it looks like. In the HTML file, after the heading, you create a nav element, with the proper namespace declaration, an id attribute equal to toc and an epub:type attribute set to "toc" as well.\n
- Within the nav element, you create a standard ordered list, with the ol element, in which each li item is an entry in the TOC. You can add nested ol elements to create hierarchical TOCs. Note that each li item is linked to the XHTML file to which it refers. Where necessary (and InDesign does this by default), you can also add an anchor to target the link to a particular part of a document.\n
- You must add properties="nav" to the manifest declaration for the toc.xhtml file in the manifest section of the content.opf file.\n
- The table of contents is laid out by the ereading system, generally in a way that appears on top of the book content and can then be hidden again once the reader has navigated to the desired position. It is different from the inline TOC that is sometimes included in an ebook and that sits on an actual page in the ebook.\n
- \n
- There are a number of interesting EPUB 3 features that facilitate the creation of an ebook with Asian language writing systems. I'm going to focus on Japanese for this presentation, and please bear with me, as I can neither speak nor read Japanese. I've relied heavily on Wikipedia and Google Translate to create these examples. Koike-san from Voyager also kindly shared some of his examples with me, which I will show you shortly.\n
- There are two important pieces to setting up an ebook with Vertical writing. First, the content in individual documents must be styled so that that it is displayed vertically (and it is also possible to have some text displayed horizontally, as shown above). The second step is to specify which document should follow another and in which direction, by specifying the page-progression-direction in the spine element of the content.opf file. (ID does this automaticallly) If you (or ID) don't specify, you'll probably get left-to-right. At some point there may be settings that let the reader choose, but there aren't yet.\n
- Koike-san from Voyager created this beautifully laid out ebook. He found that you need to use padding (and not margin) to separate the vertically oriented paragraphs. You can use text-indent to offset the beginning of the line.\n
- To add Ruby characters to your document, add <ruby> before the character that the Ruby should go next to, then <rt> and the supplemental characters, then </rt> to signal the end of the Ruby characters, and then </ruby> to denote the end of the reference character. \n
- To style tate-chu-yoko characters, you can style them in InDesign (I created a character style called "tcy" which had no style information and then applied it to all of the single and double digits in my document.) Then, in the CSS, add the code above so that just those characters are displayed horizontally, even in vertical text. (I believe InDesign lets you add tate-chu-yoko as a character style feature.)\n
- You can apply Kenten style highlights to your text in a similar way. First style the text in InDesign (I used a character style called "kenten") or directly in XHTML (with a span tag and class="kenten"). Next, add the -epub-text-emphasis-style: sesame CSS property value pair to the kenten class. This illustration is from Bookle, a Mac EPUB reader, but the results are very similiar in Readium.\n
- By default, Japanese that is specified with the -epub-writing-mode: vertical-rl is shown with stacked characters, while Latin characters are rotated 90&#xB0;. This is called "mixed-right". You can use the text-orientation property to choose how characters should be displayed. "upright" will display horizontal systems text (like English) with stacked characters instead of rotated, sideways-left and sideways-right will display both Japanese and say Latin text as if it were horizontal, but also rotated!\n
- InDesign CS 6 will either embed (and encrypt fonts) or not. You can add the above font choices to the extra.css file which will override the generated CSS. This way, it's more likely that the ebook will be displayed correctly in various devices. I will make this code available on my blog because it's very difficult to read here.\n
- There was no fully supported and standard way to embed audio in an HTML file before HTML5. Now there is: the <audio> element. While supported by iBooks over a year ago as an add-on to EPUB 2, it is now an official part of EPUB 3. MP3 support is required by compliant readers, mp4 support is also recommended.\n
- \n
- Video was in the same boat as audio before HTML5: not supported officially. With EPUB 3 adoption of HTML5 comes the standard <video> element. Compliant ereaders are not required to support any codec, but H.264 is recommended, and the .mp4 container is also very common. Currently, only desktop ereaders like Readium and iBooks support video in EPUB but I imagine that will progress change very quickly. One advantage of iPad is you can change orientation and see differently oriented videos.\n
- \n
- MathML is XML based way of displaying mathematical expressions with just text. It makes the expressions completely resolution free. This facilitates the creation of text books and other scientific texts and makes them usable on any size screen. \n
- Here is an example of the quadratic formula, expressed in MathML. There are tools that can do the conversion for you. Then notice in the example, how you can make the formula larger or smaller, according to the reader's preferences.\n
- EPUB3 has a special epub:type attribute that can be used to give additional symantec meaning to certain elements. For example, you can label footnotes as such and then ereaders can treat them in a special way. In the case of Apple's iBooks, it can have footnotes automatically pop-up and then disappear. \n
- The first step in creating footnotes in EPUB 3 is to create the link in the text that will go to the footnote. This is a standard anchor link (a element) with the special epub:type attribute set to "noteref" and an href that links to the id of the footnote itself. Then, we create the content of the footnote. For the pop-up to work in iBooks, Apple suggests using the HTML5 aside element with the epub:type attribute set to "footnote" and the id that identifies the footnote so that the link knows where to go. \n
- An aside element is automatically hidden in iBooks, and only appears when the reader taps the link.\n
- A media overlay is a text document that relates a pre-recorded audio track to the corresponding text in an ebook. When the audio is played, the corresponding text can be highlighted according to the rules created in the CSS file. Media overlay is appropriate for both flowing and fixed layout books (as we'll see later).\n
- The first step is to label each chunk of text that should be highlighted when the corresponding audio is played. A simple span element with a unique id works fine. Although you can do this by hand, it makes a lot more sense to use GREP or some other automated solution. \n
- The next step is to analyze the audio and ascertain the duration of each chunk of text that was labeled in the XHTML. You can use a program like the open-source Audacity, and there are rumors of automatic division programs coming. Once you've marked the divisions, Audacity will export the duration times to a text file.\n
- Use GREP or some other automation process to convert the exported durations into a SMIL file. \n
- In the content.opf file, you must specify the duration of each file, the total duration of all of the audio, the narrator, and also the CSS property that will be used to control the highlighting of the text when the audio is played. In the manifest section of the content.opf file, you connect an XHTML file with the SMIL file by adding media-overlay="smilfileid" to the XHTML declaration. And of course, you have to declare the audio and smil files as well. Finally, make sure that the actual smil and audio files are added to your EPUB document.\n
- Notice here that the play button is in the toolbar. When it is pressed, the narration begins. In general, this book highlights entire sentences at a time, but because the first words of this American classic are so famous, it highlights them individually. Both systems are perfectly legitimate. The choice is up to the book designer. The manner in which the text is highlighted is controlled in the CSS.\n
- Fixed Layout is a kind of ebook in which the text size cannot be changed, and so the text does not flow from page to page. Like a print book, a given page always has exactly the same content on it. This is useful for children's books, manga, photography books, cookbooks, and more. IDPF developed FXL with support from Barnes & Noble and Apple, so likely to be adopted by all, very similar to current Apple solution. Both Readium and Kobo for iOS support the IDPF FXL format pretty well, including with support for Japanese language.\n
- There are many rumors of good fixed layout tools, including extensions to InDesign, but to date, no perfect solution exists, and most professional book production people are still creating fixed layout by hand, working from a template. Hopefully, good tools will be released soon!\n
- The attribute that distinguishes a FXL book from a flowing one is prefix="rendition..." plus the URL shown above. \n\n
- Once you specify in the package that you want to control the rendition, you can either use the default values for the entire document (reflowable layout, auto orientation, and auto spread), you can specify ebook wide values in the metadata section of the content.opf file with the code shown above, or you can specify chapter-specific rendition values by appending a value to spine elements. The layout may be "pre-paginated" or "reflowable", the orientation can be "landscape", "portrait', or "auto", and the spread (facing pages) can be "none", "landscape", "portrait", "both" or "auto" .\n\n
- The viewport is specified in pixels but that is really just a way of specifying the aspect ratio or proportions of the pages, since the book will almost always be resized to fit the dimensions of the reader it is being displayed in. Still, I recommend choosing the highest numbers that match the proportions of your pages and when multiplied together are less than 2 million (the current upper limit on iOS devices).\n
- Apple's fixed layout format is so similar to the IDPF that the only change you need to make so that your EPUB 3 fixed layout file works on iOS is to add an Apple-specific options file to the META-INF folder that specifies that the EPUB document be viewed as a fixed-layout document. This is non-standard, and hopefully won't always be required.\n
- Here is a fixed layout file in Readium on the desktop. (currently the only ereader device that can display fixed layout documents on a desktop. \n
- And here is that same file in Kobo ereader on the iPad. \n
- As long as you add the com file, it will also work in iBooks on iOS. Indeed, Apple supports both the new IDPF FXL spec as well as the new media overlay. As you can see it highlights the words as they are spoken. Notice that iBooks does not yet get the page-progression right. [Demo of Fixed Layout Manga]\n
- \n