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
42
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
140
HTML與CSS入門
bobbytung
0
45
電子書無障礙發展史與規範實踐
bobbytung
0
40
都 2017 了注音還沒搞定嗎?
bobbytung
5
400
幾個中文排版訣竅,有效改善閱讀體驗
bobbytung
1
780
Other Decks in Technology
See All in Technology
WINTICKETアプリで実現した高可用性と高速リリースを支えるエコシステム / winticket-eco-system
cyberagentdevelopers
PRO
1
190
IaC運用を楽にするためにCDK Pipelinesを導入したけど、思い通りにいかなかった話
smt7174
1
110
신뢰할 수 있는 AI 검색 엔진을 만들기 위한 Liner의 여정
huffon
0
370
話題のGraphRAG、その可能性と課題を理解する
hide212131
4
1.5k
APIテスト自動化の勘所
yokawasa
7
4.2k
ユーザーの購買行動モデリングとその分析 / dsc-purchase-analysis
cyberagentdevelopers
PRO
2
100
[AWS JAPAN 生成AIハッカソン] Dialog の紹介
yoshimi0227
0
150
Figma Dev Modeで進化するデザインとエンジニアリングの協働 / figma-with-engineering
cyberagentdevelopers
PRO
1
430
新R25、乃木坂46 Mobileなどのファンビジネスを支えるマルチテナンシーなプラットフォームの全体像 / cam-multi-cloud
cyberagentdevelopers
PRO
1
130
VPC間の接続方法を整理してみた #自治体クラウド勉強会
non97
1
870
新卒1年目が向き合う生成AI事業の開発を加速させる技術選定 / ai-web-launcher
cyberagentdevelopers
PRO
7
1.5k
マネジメント視点でのre:Invent参加 ~もしCEOがre:Inventに行ったら~
kojiasai
0
470
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
BBQ
matthewcrist
85
9.3k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
Git: the NoSQL Database
bkeepers
PRO
425
64k
Done Done
chrislema
181
16k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
4 Signs Your Business is Dying
shpigford
180
21k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
32
1.8k
GraphQLとの向き合い方2022年版
quramy
43
13k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
328
21k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Mobile First: as difficult as doing things right
swwweet
222
8.9k
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