Writing EPUB 3 - Tokyo Ebook Expo

Writing EPUB 3Liz Castro @lizcastro www.pigsgourdsandwikis.com

What is EPUB?

EPUB 3 uses HTML5<html><body><p>hello</p></body></html>

Backwards compatibility （後方互換性）• EPUB 3 compliant ereaders “should” support EPUB 2 （EPUB 3に準拠したリーダーは、EPUB 2もサポートすべきである。）• EPUB 3 ﬁles generally work in EPUB 2 readers （EPUB 3ファイルは一般的には、EPUB 2リーダーでも動作する。）

Readium

NOOK Color Kobo Vox

Kobo for iOS

iBooks on iPhone iBooks on iPad

Kindle FireKindle 3G

EPUB3 Tools

InDesign CS6

InDesign CS6Export to EPUB3（EPUB 3 出力）Validates（バリデーション）CSS support is good（CSSサポートは良好）Creates NCX andHTML TOC（NCXとHTML TOCの生成）Separates documents（章ごとのファイル分割）

InDesign CS6

Text Editor

EpubCheck 3http://code.google.com/p/epubcheck/

EPUB 3 Readers

What’s does EPUB 3 look like?

content.opf

content.opf<?xml version="1.0" encoding="UTF-8"standalone="yes"?><package xmlns="http://www.idpf.org/2007/opf"unique-identiﬁer="bookid" version="3.0"><metadata>...</metadata><manifest>...</manifest><spine>...</manifest>

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>

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>

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>

HTML5Filename should end with .xhtml extension （拡張子.xhtmlが必要）

HTML5DOCTYPE can be omitted from XHTML docs （DOCTYPE宣言は省略可能）

HTML5Declare the character set with the meta tag. （metaタグによるcharset宣言）

HTML5With “XHTML syntax”quoted attributes, closing tags, lowercaseelement and attribute names, attribute valuesrequired, etc. XHTMLシンタックス属性は引用符で囲む。終了タグが必要。タグ、タグ属性は小文字で。属性値は必須

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、アジア言語サポート（ルビ、言語の方向））

CSSCSS 2.1 except no ﬁxed 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

CSSbody {-epub-writing-mode: vertical-rl;}p.copyright {-epub-writing-mode: horizontal-tb;}

CSS@charset "UTF-8";

Table of contentsNCX ﬁle no longer required (still supported) （NCX形式の目次は不要（サポートは継続））New nav element with HTML TOC required （新しいHTML TOC形式のnav要素が必須）

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>

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>

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" />

Table of contents

What can you do with EPUB 3?

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/

Vertical writing （縦書き）CSS:body {-epub-writing-mode: vertical-rl;}p.copyright {-epub-writing-mode: horizontal-tb;}content.opf:<spine page-progression-direction="rtl">

Vertical writing

Ruby （ルビ）<h2 class="chapter" id="r01">第一章僕の「課外授業」を、君に渡す<ruby>襷<rt>たすき</rt></ruby>として</h2>

tate-chu-yoko （縦中横）1. Style TCY characters(either in InDesign, or inXHTML)2. Use CSS:span.tcy{-epub-text-combine:horizontal;}

Kenten（圏点） Again, style in InDesign or XHTML. Then apply CSS: span.kenten {-epub-text-emphasis-style: sesame;}

FontsSet 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明朝","MSMincho","ＭＳ明朝",serif; font-family: "HiraKakuProN-W3","ヒラギノ角ゴ Pro W3","MS Gothic","ＭＳゴシック",sans-serif;and the line-height:1.75;

Audio• <audio> is ofﬁcial part of HTML5 and thus EPUB3 （<audio>要素はHTML5の正式な要素であり、EPUB 3でも使用可能）• .mp3 support required, .mp4 support recommended （.mp3のサポート必須。.mp4のサポート推奨）

Audio <audio src="audio/ diables.mp3"controls="controls"> </audio>

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フォーマット）

Video<video src="video/caterp.mp4" controls="controls" poster="images/caterp.jpg"> </video>

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へ変換すれば良い）

MathML

Footnotes• Semantically code footnotes （セマンティックな脚注のコーディング）• Ereaders (like iBooks) can "associate specialized behavior" （iBooksのようなリーダーでは、特別なふるまいとして関連づけてよい）

Footnotes• Link: <a epub:type="noteref" href="#n1">1</a>• Footnote: <aside epub:type="footnote" id="n1"> <p>This is the footnote.</p> </aside>

Footnotes

Media OverlayAdd pre-recorded audio track to book（あらかじめ録音されたオーディオトラックを書籍に追加）Synchronize with text（テキストと音声のシンクロ）Play audio while corresponding text ishighlighted（オーディオの再生と、対応するテキストのハイライト）

Media OverlayText in XHTML ﬁle must be adequately labeled （XHTML内のテキストにはラベルが必要）

Media OverlayNext, create the audio ﬁles, and ﬁnd theduration of the chunks that match the text. （オーディオファイルを作成し、テキストに対応する箇所の持続時間を調べる）

Media OverlayExport the duration information from Audacityand convert it into a SMIL ﬁle. （該当箇所の持続時間の情報をAudacityから出力し、SMILに変換）

Media OverlayDeclare and relate audio and smil in thecontent.opf ﬁle （content.opfでオーディオとSMILの関係を定義）

Media OverlayWhen the reader presses the play button, thetext is read, and highlighted. （リーダーで再生ボタンを押せば読まれているテキストがハイライトする）

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と似ている）Signiﬁcantly different from NOOK andKindle FXL（NOOKやKindleのFXLとは大きく異なる）

Fixed LayoutStill no great tools for creating ﬁxed layout（便利な作成ツールはまだない）Most work must be done by hand coding（多くのコードは手書きするしかない）

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#">

Fixed LayoutAdd rendition options: （renditionオプションの追加）layout, orientation, spread

Fixed LayoutIn content: viewport is required（コンテンツのHTML5ファイルでviewportが必須）

Fixed LayoutAdd .com ﬁle so it’ll work in iBooks（iBooksでの動作用に.comファイルを追加）

Fixed LayoutIDPF FXL ﬁle works in Readium on desktop:

Fixed Layout...and in Kobo for iOS too:

Fixed Layout...and in iBooks for iOS too:

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

http://www.pigsgourdsandwikis.com	8941
http://www.scoop.it	183
http://feeds.feedburner.com	55
http://ebokdesign.blogspot.no	34
http://translate.googleusercontent.com	20
http://www.oupressblog.com	17
https://twitter.com	11
http://www.hanrss.com	2
http://www.ebokdesign.blogspot.no	1

Writing EPUB 3 - Tokyo Ebook Expo

by liz_castro on Aug 20, 2012

Accessibility

Categories

Upload Details

Usage Rights

9 Embeds 9,264

Statistics

Writing EPUB 3 - Tokyo Ebook Expo Presentation Transcript