Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
EPUB導覽文件完全攻略
Search
Bobby Tung
February 21, 2024
Technology
0
99
EPUB導覽文件完全攻略
從目次設計到印刷書頁碼對應一次搞定
民國113年1月24日 13:30-17:30 城邦書房
台灣數位出版聯盟
汪達數位出版/W3C邀請專家 董福興
Bobby Tung
February 21, 2024
Tweet
Share
More Decks by Bobby Tung
See All by Bobby Tung
以Markdown製作EPUB 3文字書
bobbytung
0
260
HTML與CSS入門
bobbytung
0
88
電子書無障礙發展史與規範實踐
bobbytung
0
84
都 2017 了注音還沒搞定嗎?
bobbytung
5
550
幾個中文排版訣竅,有效改善閱讀體驗
bobbytung
1
860
Other Decks in Technology
See All in Technology
Access-what? why and how, A11Y for All - Nordic.js 2025
gdomiciano
1
110
業務自動化プラットフォーム Google Agentspace に入門してみる #devio2025
maroon1st
0
190
BtoBプロダクト開発の深層
16bitidol
0
310
生成AIを活用したZennの取り組み事例
ryosukeigarashi
0
200
コンテキストエンジニアリングとは? 考え方と応用方法
findy_eventslides
4
900
Optuna DashboardにおけるPLaMo2連携機能の紹介 / PFN LLM セミナー
pfn
PRO
1
880
データエンジニアがこの先生きのこるには...?
10xinc
0
440
AI ReadyなData PlatformとしてのAutonomous Databaseアップデート
oracle4engineer
PRO
0
180
非エンジニアのあなたもできる&もうやってる!コンテキストエンジニアリング
findy_eventslides
3
910
空間を設計する力を考える / 20251004 Naoki Takahashi
shift_evolve
PRO
3
330
Oracle Cloud Infrastructure:2025年9月度サービス・アップデート
oracle4engineer
PRO
0
410
生成AI_その前_に_マルチクラウド時代の信頼できるデータを支えるSnowflakeメタデータ活用術.pdf
cm_mikami
0
120
Featured
See All Featured
Statistics for Hackers
jakevdp
799
220k
Documentation Writing (for coders)
carmenintech
75
5k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
4 Signs Your Business is Dying
shpigford
185
22k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Build your cross-platform service in a week with App Engine
jlugia
232
18k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Visualization
eitanlees
148
16k
Transcript
113 1 月 24 日 13:30-17:30 建 系 / W3C
。 EPUB 文 目 宇 頁 一
? 基 子 ?W3C i18 WG 文 ? 音 ?EPUB
3.1~3.3 證部 ? ? EPUB ? 基 證• 傳 子 TTS ; 系 報 人 •W3C 自 己 引
Creative Commons BY-SA 4.0 https://creativecommons.org/licenses/by-sa/4.0/ ⼿ . 決 必 🙏
片文 用文鼎 Universal Design 黑 B5Pro Adobe Creative Cloud 用
. HTML; HTML is not a programming language.
? 尺 文 ? 一 次 目 ? 部 ?
次 ?頂 用 ? .取 宇 頁 page-list ? 片目 EPUB 文 navigation document 章 告
?EPUB 3.0傳 用 目 table of content ? 部 路吳
大一 ⽅ 而人 ? 一 XHTML⼿ 文 ? ⾃ 部 👉 ? 足 擔籤👉 次 ? 用 ⼿ 頁 人 籤👉 常 ? <manifest> .較<item>路⾃properties="nav" 文 尺 EPUB 3 文 …
?PDF ? ⾃ 目 ?正⾃ 和另 目 星 問… 次
麻
?EPUB 2 ?NCX 自 Daisy ?Navigation Control file for XML
? ? • ?EPUB 3 而 支 ? 用 和另 目 星 問… 次 麻
? ⼿ 文 一 ? 一 HTML <ol> ? 擔籤
目 用 ? 人 籤 目 ? 部 ? 用 CSS XHTML⼿ 文 EPUB 3 文
? ? 一 ? ? 大 的 一 用 ?
一 的 一 擔籤• 一 人 籤 目 ⾃尺 … 一 一
? 文 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> 立目 文
<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> 見 目
? <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>
目 ⼿ 【推薦序】這本書好 【推薦序】這本書讚 【推薦序】這本書最棒 ⼿ 目 ɾ 推 薦
序 這 本 書 好 / 楊 醫 師 這 本 書 讚 / 許 律 師 這 本 書 最 棒 / 胡 網 紅
目 改 籤 改 第 一 章.xhtml ⼿ 目 ɾ
第 章 第 節 第 節 ɾ 第 章 第 節 第 節 ɾ 名 詞 說 明 第 章 的 專 有 名 詞 第 章 的 專 有 名 詞 第 二 章.xhtml 第 一 章第 一 節.xhtml 第 一 章第 二 節.xhtml 第 一 章的專有名詞.xhtml 第 二 章第 一 節.xhtml 第 二 章第 二 節.xhtml 第 二 章的專有名詞.xhtml
?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 目 改 籤 改
? 一 訊EPUB 目 自 基 生 ?章 • 小
• 小小 目 ? 章 小 證 而言 ⾃ 用 ?👉 • 示 ? 小 <ol> hidden="hidden" ? ⼿ 文目 符 ? 籤 示 自行 罕 界 用 hidden="hidden" 示 小
⭕ 籤 人 籤 ❌ 人 籤 籤 示目 ⼿
比 目 . ⽅傳 . 小 . 風 「 這 一 段引 言 無法 對閱讀程式隱藏 為了不讓引 言 出現在這裡, 只能分開以兩 份檔案提供。
目 行 <nav> • 入 HTML⼿ 放. . 次 「
?<nav> •</nav> ⼿ .明 文 跨 示目
目 用 片 示用 . 擔 符 ? 目 用
片 的 1. ⼿⾃ 用 . 問 片 2. 片 示 目 3. 符 用 片 ?⼿ 文目 示 . 用 CSS ? 籤 目 大 符 . 「
目 界 用 CSS ? 目 ? <ol> <li> 用
margin易padding ? 目 文 ? <a> <span> • 寸 ? ⾃ . 用 display: inline-block .前 馬 : . 去 「
目 界 用 CSS ? 目 小 ?⾃ 小 ⼿
文 ? display: inline / inline-block ? ::before / ::after content: "" 入 山 . . 「
?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
? 籤 用 ? 人比 用 ? 一 訊 用
hidden="hidden" ?Amazon Kindle 用 傳 . bodymatter 序傳 landmark frontmatter(正 文 前) 序、獻詞、推薦 文 等 cover(封 面 ) toc( 目 次) bodymatter(正 文 起) 內 文 backmatter(正 文 後) 謝詞、後記、索引等
? 籤 用 ? 人 用 ? 支 ? 支
示 頁頁 示 page-list 頁 面
? 籤 用 ? 人 用 ? 手工 ? 一
訊 文 用 lot / lot 一 / 片 一 黃 . 人 文 金 . 文 「
1. ⼿ 文 XHTML 入 ⽅ 頁 page break markup
2. 文 入 page-list <nav> 3. OPF 入 宇 ISBN 章 章 制 EPUB 入 宇 頁
次 頁 <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 入 ⽅ 頁
頁 <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 入 ⽅ 頁
None
<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>
<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
工 …
?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 手 基 入 ⽅ 頁 . 用 和另 工
面頁面 SVG shape Xlink 非 用 片 問 目 星
…
問 HTML imagemap
? HTML 入 片 . 造⽇ 頁 ? 片 用
<svg> 入 面 頁面 ? 片 一 頁 大小 ? 用 日 EPUB 3 ? EPUB 3 用 頁 片 用 SVG Wrapping 第 EPUB 3
?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星
?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星
?<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> 入 •
? <rect> x, y = w, h = 高 ?
<circle> cx, cy = 心 r = 料 ? <ellipse> cx, cy = 心 rx ry = x y 料 ? <polygon> x,y . 自 基 ? 料 <path> 用工 生 svg⼿ 入 •
小 頁
None