Upgrade to Pro — share decks privately, control downloads, hide ads and more …

EPUB導覽文件完全攻略

Bobby Tung
February 21, 2024

 EPUB導覽文件完全攻略

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

Bobby Tung

February 21, 2024
Tweet

More Decks by Bobby Tung

Other Decks in Technology

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. ? 尺 文 ? 一 次 目 ? 部 ?

    次 ?頂 用 ? .取 宇 頁 page-list ? 片目 EPUB 文 navigation document 章 告
  5. ?EPUB 3.0傳 用 目 table of content ? 部 路吳

    大一 ⽅ 而人 ? 一 XHTML⼿ 文 ? ⾃ 部 👉 ? 足 擔籤👉 次 ? 用 ⼿ 頁 人 籤👉 常 ? <manifest> .較<item>路⾃properties="nav" 文 尺 EPUB 3 文 …
  6. ?EPUB 2 ?NCX 自 Daisy ?Navigation Control file for XML

    ? ? • ?EPUB 3 而 支 ? 用 和另 目 星 問… 次 麻
  7. ? ⼿ 文 一 ? 一 HTML <ol> ? 擔籤

    目 用 ? 人 籤 目 ? 部 ? 用 CSS XHTML⼿ 文 EPUB 3 文
  8. ? ? 一 ? ? 大 的 一 用 ?

    一 的 一 擔籤• 一 人 籤 目 ⾃尺 … 一 一
  9. ? 文 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> 立目 文
  10. <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> 見 目
  11. ? <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>
  12. 目 ⼿ 【推薦序】這本書好 【推薦序】這本書讚 【推薦序】這本書最棒 ⼿ 目 ɾ 推 薦

    序 這 本 書 好 / 楊 醫 師 這 本 書 讚 / 許 律 師 這 本 書 最 棒 / 胡 網 紅
  13. 目 改 籤 改 第 一 章.xhtml ⼿ 目 ɾ

    第 章     第 節 第 節 ɾ 第 章     第 節 第 節 ɾ 名 詞 說 明     第 章 的 專 有 名 詞 第 章 的 專 有 名 詞 第 二 章.xhtml 第 一 章第 一 節.xhtml 第 一 章第 二 節.xhtml 第 一 章的專有名詞.xhtml 第 二 章第 一 節.xhtml 第 二 章第 二 節.xhtml 第 二 章的專有名詞.xhtml
  14. ?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 目 改 籤 改
  15. ? 一 訊EPUB 目 自 基 生 ?章 • 小

    • 小小 目 ? 章 小 證 而言 ⾃ 用 ?👉 • 示 ? 小 <ol> hidden="hidden" ? ⼿ 文目 符 ? 籤 示 自行 罕 界 用 hidden="hidden" 示 小
  16. ⭕ 籤 人 籤 ❌ 人 籤 籤 示目 ⼿

    比 目 . ⽅傳 . 小 . 風 「 這 一 段引 言 無法 對閱讀程式隱藏 為了不讓引 言 出現在這裡, 只能分開以兩 份檔案提供。
  17. 目 行 <nav> • 入 HTML⼿ 放. . 次 「

    ?<nav> •</nav> ⼿ .明 文 跨 示目
  18. 目 用 片 示用 . 擔 符 ? 目 用

    片 的 1. ⼿⾃ 用 . 問 片 2. 片 示 目 3. 符 用 片 ?⼿ 文目 示 . 用 CSS ? 籤 目 大 符 . 「
  19. 目 界 用 CSS ? 目 ? <ol> <li> 用

    margin易padding ? 目 文 ? <a> <span> • 寸 ? ⾃ . 用 display: inline-block .前 馬 : . 去 「
  20. 目 界 用 CSS ? 目 小 ?⾃ 小 ⼿

    文 ? display: inline / inline-block ? ::before / ::after content: "" 入 山 . . 「
  21. ?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
  22. ? 籤 用 ? 人比 用 ? 一 訊 用

    hidden="hidden" ?Amazon Kindle 用 傳 . bodymatter 序傳 landmark frontmatter(正 文 前) 序、獻詞、推薦 文 等 cover(封 面 ) toc( 目 次) bodymatter(正 文 起) 內 文 backmatter(正 文 後) 謝詞、後記、索引等
  23. ? 籤 用 ? 人 用 ? 支 ? 支

    示 頁頁 示 page-list 頁 面
  24. ? 籤 用 ? 人 用 ? 手工 ? 一

    訊 文 用 lot / lot 一 / 片 一 黃 . 人 文 金 . 文 「
  25. 1. ⼿ 文 XHTML 入 ⽅ 頁 page break markup

    2. 文 入 page-list <nav> 3. OPF 入 宇 ISBN 章 章 制 EPUB 入 宇 頁
  26. 次 頁 <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 入 ⽅ 頁
  27. 頁 <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 入 ⽅ 頁
  28. <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>
  29. ?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 手 基 入 ⽅ 頁 . 用 和另 工
  30. ? HTML 入 片 . 造⽇ 頁 ? 片 用

    <svg> 入 面 頁面 ? 片 一 頁 大小 ? 用 日 EPUB 3 ? EPUB 3 用 頁 片 用 SVG Wrapping 第 EPUB 3
  31. ?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星
  32. ?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星
  33. ?<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> 入 •
  34. ? <rect> x, y = w, h = 高 ?

    <circle> cx, cy = 心 r = 料 ? <ellipse> cx, cy = 心 rx ry = x y 料 ? <polygon> x,y . 自 基 ? 料 <path> 用工 生 svg⼿ 入 •