Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Writing EPUB 3 - Tokyo Ebook Expo

26,520 views

Published on

These are my slides from my presentation titled "Writing EPUB 3" at the Tokyo Ebook Expo (http://www.ebooks-expo.jp/en/) For more details, see http://www.pigsgourdsandwikis.com/2012/07/epub3-idpf-and-tokyo-with-rakuten-kobo.html and http://www.pigsgourdsandwikis.com/2012/07/epub-3-has-finally-arrived.html)

Published in: Technology
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... ,DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ,DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ,DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ,DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ,DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ,DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD FULL. BOOKS INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • @6VbqI6Yf Thank you for your constructive contribution to this topic!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • .key files suck... There is a world outside of Apple
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Writing EPUB 3 - Tokyo Ebook Expo

  1. 1. Writing EPUB 3Liz Castro @lizcastro www.pigsgourdsandwikis.com
  2. 2. What is EPUB?
  3. 3. EPUB 3 uses HTML5<html><body><p>hello</p></body></html>
  4. 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. 5. Readium
  6. 6. Readium
  7. 7. NOOK Color Kobo Vox
  8. 8. Kobo for iOS
  9. 9. iBooks on iPhone iBooks on iPad
  10. 10. Kindle FireKindle 3G
  11. 11. EPUB3 Tools
  12. 12. InDesign CS6
  13. 13. InDesign CS6Export to EPUB3(EPUB 3 出力)Validates(バリデーション)CSS support is good(CSSサポートは良好)Creates NCX andHTML TOC(NCXとHTML TOCの生成)Separates documents(章ごとのファイル分割)
  14. 14. InDesign CS6
  15. 15. Text Editor
  16. 16. EpubCheck 3http://code.google.com/p/epubcheck/
  17. 17. EPUB 3 Readers
  18. 18. What’s does EPUB 3 look like?
  19. 19. content.opf
  20. 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. 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. 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. 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. 24. HTML5
  25. 25. HTML5Filename should end with .xhtml extension (拡張子.xhtmlが必要)
  26. 26. HTML5DOCTYPE can be omitted from XHTML docs (DOCTYPE宣言は省略可能)
  27. 27. HTML5Declare the character set with the meta tag. (metaタグによるcharset宣言)
  28. 28. HTML5With “XHTML syntax”quoted attributes, closing tags, lowercaseelement and attribute names, attribute valuesrequired, etc. XHTMLシンタックス 属性は引用符で囲む。終了タグが必要。タグ、タグ属性は小文字で。 属性値は必須
  29. 29. HTML5New HTML5 features: audio/video, canvas,media overlays, javascript, MathML, Asianlanguage support (Ruby, language direction,etc.), etc. (新しいHTML5の機能:audio/video、CANVAS、Media Overlays、JavaScript、MathML、 アジア言語サポート(ルビ、言語の方向))
  30. 30. CSS
  31. 31. CSSCSS 2.1 except no fixed positioning, or languagedirection directives(位置固定と言語の方向をのぞき、CSS 2.1は使用可能)some properties from CSS3 Speech, CSS3 Fonts,CSS3 Text (hypens, line breaks, word breaks, CSS3Writing 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. 32. CSSbody {-epub-writing-mode: vertical-rl;}p.copyright {-epub-writing-mode: horizontal-tb;}
  33. 33. CSS@charset "UTF-8";
  34. 34. Table of contentsNCX file no longer required (still supported) (NCX形式の目次は不要(サポートは継続))New nav element with HTML TOC required (新しいHTML TOC形式のnav要素が必須)
  35. 35. Table of contentsIn 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. 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. 37. Table of contentsIn content.opf, declare item, withproperties="nav": (パッケージ文書内で、TOCである項目を、properties= nav で宣言)<item id="toc" href="toc.xhtml" media-type="application/xhtml+xml"properties="nav" />
  38. 38. Table of contents
  39. 39. What can you do with EPUB 3?
  40. 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. 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. 42. Vertical writing
  43. 43. Ruby (ルビ)<h2 class="chapter" id="r01">第一章 僕の「課外授業」を、君に渡す<ruby>襷<rt>たすき</rt></ruby>として</h2>
  44. 44. tate-chu-yoko (縦中横)1. Style TCY characters(either in InDesign, or inXHTML)2. Use CSS:span.tcy{-epub-text-combine:horizontal;}
  45. 45. Kenten(圏点) Again, style in InDesign or XHTML. Then apply CSS: span.kenten {-epub-text-emphasis-style: sesame;}
  46. 46. FontsSet the font to either:(for vertical)font-family:"@Hiragino Mincho ProN","@ヒラギノ明朝 Pro W3", "@IPAexMincho", "@IPAex明朝","@MS Mincho", "@MS 明朝","ヒラギノ明朝 Pro W3", "Hiragino Mincho ProN", "IPAexMincho","IPAex明朝",serif;font-family:"@HiraKakuProN-W3", "@ヒラギノ角ゴ Pro W3","@MS Gothic","@MS ゴシック","HiraKakuProN-W3","ヒラギノ角ゴ Pro W3",sans-serif;(for horizontal) font-family: "Hiragino Mincho ProN","ヒラギノ明朝 Pro W3","IPAexMincho","IPAex明朝","MSMincho","MS 明朝",serif; font-family: "HiraKakuProN-W3","ヒラギノ角ゴ Pro W3","MS Gothic","MS ゴシック",sans-serif;and the line-height:1.75;
  47. 47. Audio• <audio> is official part of HTML5 and thus EPUB3 (<audio>要素はHTML5の正式な要素であり、EPUB 3でも使用可能)• .mp3 support required, .mp4 support recommended (.mp3のサポート必須。.mp4のサポート推奨)
  48. 48. Audio <audio src="audio/ diables.mp3"controls="controls"> </audio>
  49. 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. 50. Video<video src="video/caterp.mp4" controls="controls" poster="images/caterp.jpg"> </video>
  51. 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. 52. MathML
  53. 53. Footnotes• Semantically code footnotes (セマンティックな脚注のコーディング)• Ereaders (like iBooks) can "associate specialized behavior" (iBooksのようなリーダーでは、特別なふるまいとして関連づけてよい)
  54. 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. 55. Footnotes
  56. 56. Media OverlayAdd pre-recorded audio track to book(あらかじめ録音されたオーディオトラックを書籍に追加)Synchronize with text(テキストと音声のシンクロ)Play audio while corresponding text ishighlighted(オーディオの再生と、対応するテキストのハイライト)
  57. 57. Media OverlayText in XHTML file must be adequately labeled (XHTML内のテキストにはラベルが必要)
  58. 58. Media OverlayNext, create the audio files, and find theduration of the chunks that match the text. (オーディオファイルを作成し、テキストに対応する箇所の持続時間を調べる)
  59. 59. Media OverlayExport the duration information from Audacityand convert it into a SMIL file. (該当箇所の持続時間の情報をAudacityから出力し、SMILに変換)
  60. 60. Media OverlayDeclare and relate audio and smil in thecontent.opf file (content.opfでオーディオとSMILの関係を定義)
  61. 61. Media OverlayWhen the reader presses the play button, thetext is read, and highlighted. (リーダーで再生ボタンを押せば読まれているテキストがハイライトする)
  62. 62. Fixed LayoutIDPF Fixed Layout format approved in May,already supported by Readium and Kobo foriOS(IDPF Fixed Layoutは5月に承認された。ReadiumとKobo for iOSでサポート済み)Very similar to Apple FXL(Apple FXLと似ている)Significantly different from NOOK andKindle FXL(NOOKやKindleのFXLとは大きく異なる)
  63. 63. Fixed LayoutStill no great tools for creating fixed layout(便利な作成ツールはまだない)Most work must be done by hand coding(多くのコードは手書きするしかない)
  64. 64. Fixed LayoutAdd 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. 65. Fixed LayoutAdd rendition options: (renditionオプションの追加)layout, orientation, spread
  66. 66. Fixed LayoutIn content: viewport is required(コンテンツのHTML5ファイルでviewportが必須)
  67. 67. Fixed LayoutAdd .com file so it’ll work in iBooks(iBooksでの動作用に.comファイルを追加)
  68. 68. Fixed LayoutIDPF FXL file works in Readium on desktop:
  69. 69. Fixed Layout...and in Kobo for iOS too:
  70. 70. Fixed Layout...and in iBooks for iOS too:
  71. 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

×