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
11
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
60
HTML與CSS入門
bobbytung
0
19
電子書無障礙發展史與規範實踐
bobbytung
0
31
都 2017 了注音還沒搞定嗎?
bobbytung
5
350
幾個中文排版訣竅,有效改善閱讀體驗
bobbytung
1
730
Other Decks in Technology
See All in Technology
Babylon.js JAPAN活動紹介 (2024/4)
limes2018
1
120
MixIT 2024 - Pulumi : Gérer son infra avec son langage de programmation préféré
ju_hnny5
1
120
家族アルバム みてねにおけるGrafana活用術 / Grafana Meetup Japan Vol.1 LT
isaoshimizu
1
1.1k
JAWS-UG Bedrock Claude Night
yamahiro
3
750
プロンプトエンジニアリングでがんばらない-Agentic Workflow へ-近藤憲児
kenjikondobai
6
1.2k
止まらないLinuxシステムを構築する_高信頼性クラスタ入門
koedoyoshida
3
2k
Cypress or Playwright?
rainerhahnekamp
0
180
MLOpsの「壁」を乗り越える、LINEヤフーの Data Quality as Code
lycorptech_jp
PRO
8
650
.NET Profiler in 2024.
kkamegawa
2
2k
2024春 注目のWeb系 OSS & SaaS 3選
makies
0
190
Cloud Service Mesh に触れ合う
phaya72
1
260
Grafana x PagerDuty Better Together
jacopen
1
300
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
17
2.7k
Happy Clients
brianwarren
92
6.4k
Practical Orchestrator
shlominoach
183
9.7k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
15
1.6k
What's in a price? How to price your products and services
michaelherold
238
11k
Rails Girls Zürich Keynote
gr2m
91
13k
Writing Fast Ruby
sferik
622
60k
GitHub's CSS Performance
jonrohan
1025
450k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
242
1.2M
Designing the Hi-DPI Web
ddemaree
276
33k
Art, The Web, and Tiny UX
lynnandtonic
290
19k
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