EPUB導覽文件完全攻略

從目次設計到印刷書頁碼對應一次搞定
民國113年1月24日 13:30-17:30 城邦書房
台灣數位出版聯盟
汪達數位出版／W3C邀請專家　董福興

Transcript

1. 113 1 月 24 日 13:30-17:30 建 系 ／ W3C 。 EPUB 文 目 宇 頁 一
2. ？ 基 子 ？W3C i18 WG 文 ？ 音 ？EPUB 3.1~3.3 證部 ？ ？ EPUB ？ 基 證• 傳 子 TTS ； 系 報 人 •W3C 自 己 引
3. Creative Commons BY-SA 4.0 https://creativecommons.org/licenses/by-sa/4.0/ ⼿ ． 決 必 🙏 片文 用文鼎 Universal Design 黑 B5Pro Adobe Creative Cloud 用
4. ． HTML； HTML is not a programming language.
5. ？ 尺 文 ？ 一 次 目 ？ 部 ？ 次 ？頂 用 ？ ．取 宇 頁 page-list ？ 片目 EPUB 文 navigation document 章 告
6. ？EPUB 3.0傳 用 目 table of content ？ 部 路吳 大一 ⽅ 而人 ？ 一 XHTML⼿ 文 ？ ⾃ 部 👉 ？ 足 擔籤👉 次 ？ 用 ⼿ 頁 人 籤👉 常 ？ <manifest> ．較<item>路⾃properties="nav" 文 尺 EPUB 3 文 …
7. ？PDF ？ ⾃ 目 ？正⾃ 和另 目 星 問… 次 麻
8. ？EPUB 2 ？NCX 自 Daisy ？Navigation Control file for XML ？ ？ • ？EPUB 3 而 支 ？ 用 和另 目 星 問… 次 麻
9. ？ ⼿ 文 一 ？ 一 HTML <ol> ？ 擔籤 目 用 ？ 人 籤 目 ？ 部 ？ 用 CSS XHTML⼿ 文 EPUB 3 文
10. ？ ？ 一 ？ ？ 大 的 一 用 ？ 一 的 一 擔籤• 一 人 籤 目 ⾃尺 … 一 一
11. ？ 文 OPF <item media-type="application/xhtml+xml" href="nav.xhtml" id="_nav.xhtml" properties="nav" /> ？⼿ 一 ⾃ 一 <nav> <nav epub:type="toc" role="doc-toc"> ？<nav> ？ ⾃ 一一 <h1>~<h6> ？ ⾃ 一 <ol> 立目 文
12. <nav epub:type="toc" role="doc-toc"> <h2> 目 </h2> <ol> <li><span> 改</span> <ol> <li><a href="bodymatter_0_2.xhtml#toc_index_1"> 改 </a></li> <li><a href="bodymatter_0_3.xhtml#toc_index_1"> 改 </a></li> <li><a href="bodymatter_0_4.xhtml#toc_index_1"> 改 </a></li> </ol></li> </ol> </nav> 見 目
13. ？ <a> <li><a href="bodymatter_0_2.xhtml#toc_index_1"> 改 </a></li> ？ <li><a href="bodymatter_0_2.xhtml#toc_index_1"><span> 改 </ span></a></li> ？ <span> 文 <li><span> 改</span></li> ？ 見 的 <a> 易 文 <span>
14. 目 ⼿ 【推薦序】這本書好 【推薦序】這本書讚 【推薦序】這本書最棒 ⼿ 目 ɾ 推 薦 序 這 本 書 好 ／ 楊 醫 師 這 本 書 讚 ／ 許 律 師 這 本 書 最 棒 ／ 胡 網 紅
15. 目 改 籤 改 第 一 章.xhtml ⼿ 目 ɾ 第 章 　 　 第 節 第 節 ɾ 第 章 　 　 第 節 第 節 ɾ 名 詞 說 明 　 　 第 章 的 專 有 名 詞 第 章 的 專 有 名 詞 第 二 章.xhtml 第 一 章第 一 節.xhtml 第 一 章第 二 節.xhtml 第 一 章的專有名詞.xhtml 第 二 章第 一 節.xhtml 第 二 章第 二 節.xhtml 第 二 章的專有名詞.xhtml
16. ？EPUB 跨 3.2 - 5.4.2.2 toc nav ？ toc nav 改 ？ EPUB⼿ 文 ⼿ 改 ？ 目 和明 EPUB⼿ 文 改； ？EPUB 3.3 - 7.4.2 toc nav ？EPUB 較 toc nav 改 ？明 目 EPUB Checker EPUB Check 目 改 籤 改
17. ？ 一 訊EPUB 目 自 基 生 ？章 • 小 • 小小 目 ？ 章 小 證 而言 ⾃ 用 ？👉 • 示 ？ 小 <ol> hidden="hidden" ？ ⼿ 文目 符 ？ 籤 示 自行 罕 界 用 hidden="hidden" 示 小
18. ⭕ 籤 人 籤 ❌ 人 籤 籤 示目 ⼿ 比 目 ． ⽅傳 ． 小 ． 風 「 這 一 段引 言 無法 對閱讀程式隱藏 為了不讓引 言 出現在這裡， 只能分開以兩 份檔案提供。
19. 目 行 <nav> • 入 HTML⼿ 放． ． 次 「 ？<nav> •</nav> ⼿ ．明 文 跨 示目
20. 目 用 片 示用 ． 擔 符 ？ 目 用 片 的 1. ⼿⾃ 用 ． 問 片 2. 片 示 目 3. 符 用 片 ？⼿ 文目 示 ． 用 CSS ？ 籤 目 大 符 ． 「
21. 目 界 用 CSS ？ 目 ？ <ol> <li> 用 margin易padding ？ 目 文 ？ <a> <span> • 寸 ？ ⾃ ． 用 display: inline-block ．前 馬 ： ． 去 「
22. 目 界 用 CSS ？ 目 小 ？⾃ 小 ⼿ 文 ？ display: inline / inline-block ？ ::before / ::after content: "" 入 山 ． ． 「
23. ？landmark ？page-list 頁 ？loi list of illustrations 片一 ？lot list of tables 一 ？lov list of videos •loa list of audios 片 音一 門目 目 目 HTML body toc nav head landmark nav page-list nav
24. ？ 籤 用 ？ 人比 用 ？ 一 訊 用 hidden="hidden" ？Amazon Kindle 用 傳 ． bodymatter 序傳 landmark frontmatter（正 文 前） 序、獻詞、推薦 文 等 cover（封 面 ） toc（ 目 次） bodymatter（正 文 起） 內 文 backmatter（正 文 後） 謝詞、後記、索引等
25. ？ 籤 用 ？ 人 用 ？ 支 ？ 支 示 頁頁 示 page-list 頁 面
26. ？ 籤 用 ？ 人 用 ？ 手工 ？ 一 訊 文 用 lot / lot 一 / 片 一 黃 ． 人 文 金 ． 文 「
27. 1. ⼿ 文 XHTML 入 ⽅ 頁 page break markup 2. 文 入 page-list <nav> 3. OPF 入 宇 ISBN 章 章 制 EPUB 入 宇 頁
28. 次 頁 <span role="doc-pagebreak" epub:type="pagebreak" id="pg24" aria-label="24"/> <span /* 在<p>中分 頁 時，使 用 <span> */ role="doc-pagebreak" /* 這是ARIA role，告知此處 文 件分 頁 點 */ epub:type="pagebreak" /* 這是EPUB 3.0時代的遺留，現在可以不加 */ id="pg24" /* 一 定要有id來供導覽 文 件連結 */ aria-label="24"/> /* aria-label是TTS朗讀時會唸出的 文 字 */ ⼿ 文 XHTML 入 ⽅ 頁
29. 頁 <div role="doc-pagebreak" epub:type="pagebreak" id="pg24" aria-label="24">24</div> <span /* 在<p>元素之間或其他位置時，使 用 <div> */ role="doc-pagebreak" epub:type="pagebreak" id="pg24" aria-label="24">24</div> /* 如果要顯 示頁 碼，請改成這樣 也可以使 用 CSS來修改顯 示 */ ⼿ 文 XHTML 入 ⽅ 頁
31. <nav id="page-list" epub:type="page-list" role="doc-pagelist"> <h3>印刷書 頁 面 索引</h3> <ol> <li><a href="bodymatter_0.xhtml#pg1"><span>1</span></a></li> <li><a href="bodymatter_1.xhtml#pg2"><span>2</span></a></li> <li><a href="bodymatter_2.xhtml#pg3"><span>3</span></a></li> ... </ol> </nav> 支 ． 文 入 page-list <nav>
32. <package> <metadata> <dc:source id="pg-src">urn:isbn:9789869206129</ dc:source> <meta property="source-of" refines="#pg- src">pagination</meta> ... </metadata> ... </package opf <metadata> 入 ⽅ 頁 ISBN
33. 工 …
34. ？Markdown 擔． 用 [%1] 用 ⽅ 頁 ． 自 基 生 page- list nav ？Sigil PageList plug-in https://www.mobileread.com/forums/showthread.php? t=265237 告 手 基 入 HTML． 告 生 page-list nav ？InDesign plug-in https://epubsecrets.com/droptoscript.php 手 基 入 ⽅ 頁 ． 用 和另 工
35. 面頁面 SVG shape Xlink 非 用 片 問 目 星 …
36. 問 HTML imagemap
37. ？ HTML 入 片 ． 造⽇ 頁 ？ 片 用 <svg> 入 面 頁面 ？ 片 一 頁 大小 ？ 用 日 EPUB 3 ？ EPUB 3 用 頁 片 用 SVG Wrapping 第 EPUB 3
38. ？OPF <manifest>路 頁 XHTML properties="svg" <item media-type="application/xhtml+xml" href="pic1.xhtml" id="_pic1.xhtml" properties="svg" /> ？OPF <spine> 面 頁 <itemref idref="_pic1.xhtml" properties="rendition:layout-pre- paginated rendition:spread-auto page-spread-left" /> ？rendition:layout-pre-paginated 頁 面 ？rendition:spread-auto page-spread-left 頁 頁 OPF•HTML <head> <body> SVG Wrapping星
39. ？HTML <head> <meta> 長 ． 片 <meta name="viewport" content="width=1135,height=1600" /> ？HTML <body> <svg> 入 片 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 1135 1600"> <image width="1135" height="1600" xlink:href="nav.jpg"/> <title> 目 </title> </svg> ？<title> svg wrapping 文 方 XHTML <head> <body> SVG Wrapping星
40. ？<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 1135 1600"> <image width="1135" height="1600" xlink:href="nav.jpg"/> <title> 目 </title> <a xlink:href="bodymatter1.xhtml" xlink:title=" 一 "> <rect x="900" y="100" width="50" height="100"/> </a> </svg> ？SVG ⾃ ． xlink:href 入目 •xlink:title 入 式 XHTML <head> <body> 入 •
41. ？ <rect> x, y = w, h = 高 ？ <circle> cx, cy = 心 r = 料 ？ <ellipse> cx, cy = 心 rx ry = x y 料 ？ <polygon> x,y ． 自 基 ？ 料 <path> 用工 生 svg⼿ 入 •
42. 小 頁