以Markdown製作EPUB 3文字書

2023年，台灣數位出版聯盟電子書課程：EPUB 3製作課程（一）

Transcript

1. 汪達數位出版　董福興 2022/9/29 EPUB 3製作課程 （ 一 ）以Markdown製作EPUB 3 文 字書
2. 課程 目 的 • 了解EPUB格式的基礎 • 準備製作EPUB的 工 具 • 了解EPUB 3的製作 方 式 • 學習Markdown格式 • 以Markdown處理原稿 • 轉換成EPUB 3後續編輯
3. 延伸學習 • EPUB 3的結構 • XML規則 • HTML 5標籤 • CSS 3設計 • Unicode與字型 （不包含在本次課程中）
4. EPUB格式的發展歷史 1999-2002 OEBPS 1.0 2007 EPUB 2.0 2012 EPUB 3.0 2016 台灣導入EPUB 3 2022 EPUB 3.3 微軟為推動平板電腦 主動領導制定規格 Amazon Kindle使 用 mobipocket私有規格 「以外」的電 子 書商就重新拾起標準規格 標準制訂完成，同年樂天Kobo 在 日 本提供服務。隨後Amazon與 Apple也跟上。 由台灣漫讀BookWalker為 首 ， 樂天Kobo、博客來等平台共同 採 用 EPUB 3格式，重新出發 W3C推動新版，進 行 測試 推動標準 支 援。
5. • 語 言文 字特性 • 中 文 直排與漢字 • 當地編輯習慣 • 台灣的完稿檔案多半在InDesign上 • 市場平台 支 援 • 台灣平台對於固定版 面 的 支 援不 一 • 對表格與 文 繞圖語法的 支 援有限 國際標準共通，在地需求需解決 電 子 書製作的在地問題
6. • 文 字編碼：Unicode （UTF-8） • 基本上可以涵蓋各種語 言文 字 • 內容結構：HTML 5 • 長期穩定相容，不會隨改版 而 有變化 • 呈現設計：CSS 3 • 不停演進，新功能不能使 用 ，也不會影響內容 • 格式架構：XML • 稍嫌老舊（相對於json），但易於 手 動修改 主要以Ｗeb網 頁 技術為主 EPUB 3使 用 的技術
7. 印刷書不重視的 電 子 書都要在意 數位編輯的 技術難點 有哪些？
8. • 標點符號：
 製作印刷書時，只要印出來對就好。但是電 子 書從原稿到成品都得 用 「正確的」碼點， 配合字型才能顯 示 。 • 不 用 直立符號﹁﹂︵︶， 自行 會 自行 轉正。 • 刪節號、間隔號、省略號怎麼輸入？ • 「・」U+30FB　KATAKANA MIDDLE DOT • 「──」U+2500　BOX DRAWINGS LIGHT HORIZONTAL • 「……」U+2026 HORIZONTAL ELLIPSIS • 「⋯⋯」U+22EF MIDLINE HORIZONTAL ELLIPSIS • 查詢編碼：「字嗨」https://zi-hi.com，mac「字元檢視器」 Unicode：需要了解 文 字編碼與字型 電 子 書編輯的技術難點
9. • 缺字 • 中 文 已經編碼超過 十 萬字，原則上以Extension-B作為切分 • 字碼超過U+2xxxx者，建議做成圖片 • 如何尋找碼點： • 全字庫部件查詢：https://www.cns11643.gov.tw/search.jsp? ID=13&SN=&lang=tw • 中研院缺字系統：https://char.iis.sinica.edu.tw/Search/index.aspx • 國學 大 師：http://www.guoxuedashi.net/zidian/bujian/ • 完整漢字字體「花園明朝」http://fonts.jp/hanazono/ Unicode：需要了解 文 字編碼與字型 電 子 書編輯的技術難點
10. • 外 文 • 在電 子 書裡外 文 也是以 文 字的 方 式呈現 • 許多外 文 排版（如連字）需要使 用 正確的字體呈現 • 例如藏 文 、阿拉伯 文 、希伯來 文 、泰 文 等 • 可使 用 Google Noto字體嵌入：
 https://fonts.google.com/noto • 嵌入 方 式可參考數位出版聯盟範本：
 https://github.com/dpublishing/epub3guide/tree/master/ practices/03_Embed_Fonts_And_Ruby Unicode：需要了解 文 字編碼與字型 電 子 書編輯的技術難點
11. • 印刷書印出來標題像是標題就好，
 電 子 書標題需要以標題標籤（如<h1>）標註。 • 印刷書流程中保留結構的 方 法： • Word中全部使 用 「樣式」 • InDesign中使 用 段落樣式，並且每個物件都設錨點 • 使 用 Markdown等語法來轉換 • WYSIWYG v.s. WYSIWYM HTML：內容必須建立完整結構 電 子 書編輯的技術難點
12. • CSS可以 一 次設定、多次利 用 。 • CSS 自 身 使 用 描述性的語法來進 行 設計，在排版軟體中都有，只是 思維 方 式反過來 而 已。 • CSS案例：
 h2 {font-family: san-serif; ( 黑 體)
 font-weight: bold; (粗體)
 font-size: 1.6em; (內 文 字的1.6倍)
 margin: 0 1rem; （上下無邊界，左右1內 文 字寬)} CSS：指定內 頁 排版如何呈現 電 子 書編輯的技術難點
13. • EPUB技術並不困難，但有其規則 • 可以透過各種轉換軟體來處理 • 檢查器可以抓出錯誤，並且告知錯誤位置
 （絕 大 多數的問題出 自 XHTML的結構） • 可參考範本進 行 修正 EPUB內的OPF與 目 錄結構 電 子 書編輯的技術難點
14. 目 前EPUB 3的製作流程 在印刷書流程之後 校對： 發 生 在InDesign檔案上， 而 不會回到原稿上頭。 文 編 美編 印刷 輸出純 文 字 製作電 子 書
15. 理想的EPUB 3製作流程 與印刷書同時 校對： 進稿前就完成 文 編 美編 印刷 製作電 子 書
16. 1. 由InDesign轉出 • 需要建立錨點確定絕對位置 • HTML與CSS結構複雜，不易修改 2. 使 用 Sigil製作 • 無法預覽直排書，操作花時間效率不好 3. 以Markdown建立結構轉換 • 可通 用 於純電 子 書製作 • 不容易處理複雜的元素，如表格 從InDesign輸出的TXT / HTML開始 EPUB 3常 見 的製作 方 式
17. 實際操作流程 從InDesign中輸出 HTML或TXT 可編輯HTML標註
 粗體與各種樣式 以瀏覽器開啟 HTML複製 文 字 貼進Markdown 編輯器處理結構 處理轉換前 Metadata 轉換成EPUB進 行 修改與設計 Sideload檢查 遞交上架
18. • Pagina EPUB Checker：
 https://www.pagina.gmbh/produkte/epub-checker/ • 官 方 檢查 工 具GUI版 • 檢查無誤可 自 動打包
 →解決EPUB不能直接
 壓成ZIP的問題 EPUB檢查封裝 工 具 EPUB製作所需的 工 具
19. • Sublime Text: 
 https://www.sublimetext.com • Visual Studio Code:
 https://code.visualstudio.com • 用 於編輯Metadata、
 製作好的EPUB 純 文 字（HTML, CSS, XML）編輯 工 具 EPUB製作所需的 工 具
20. • Texts:
 http://www.texts.io • Typora:
 https://typora.io • 即時將語法轉換成樣式
 提供額外的圖形編輯，
 如：表格 Markdown編輯 工 具：即時轉換型 EPUB製作所需的 工 具
21. • iA Writer: 
 https://ia.net/writer/zh-hant • 保留Markdown原始語法
 提供最 小 限度的指引協助
 辨識語法是否 生 效 Markdown編輯 工 具：原始 文 字型 EPUB製作所需的 工 具
22. • HackMD:
 https://hackmd.io • 對照原始碼與轉換後
 套 用 樣式 文 字 • 本款為網 頁 App，
 可多 人 即時編輯，
 顯 示 變更紀錄 Markdown編輯 工 具：對照型 EPUB製作所需的 工 具
23. • Pandoc是 一 款萬能的開放原始碼 文 件轉換 工 具 • 安裝Texts時 一 併安裝，可使 用 指令來轉換 文 件 • 功能較陽春 轉換 工 具：Pandoc EPUB製作所需的 工 具
24. • 支 援直排書的特化型Markdown轉EPUB 3線上 工 具 • 個 人 出版免費，商業出版以 月 費計價（不限冊數） 轉換 工 具：電電轉換器 EPUB製作所需的 工 具
25. Markdown語法
26. • 段落前後空 一行 ，空 行 不能插入空 白 。 • 視覺上需要縮排，可於段落 行 前加入全形空 白 。 • 整理稿件時，可以選取「換 行 符號（Mac）」或輸入「/n （Windows）」來 一 次置換。 • 原稿如果使 用 多餘的空 白 或斷 行 ，就得 手 動接回。 段落 Markdown語法 ¶ 　　我在年青時候也曾經做過許多夢 ¶ <p>　　我在年青時候也曾經做過許多夢</p> Markdown XHTML
27. • 開頭使 用 半形 # 標註，後空 一 半形空 白 。 • 標題層級依照 # 號的數量增加，如 # 為<h1>、##為<h2>，最多 至 六層。 • 內 文 的 大 中 小 標為第幾級需要 自行 記憶。 • 不夠 用 時可以後來使 用 CSS來設計不同樣式。 標題 Markdown語法 # 一 件 小 事 <h1> 一 件 小 事</h1> Markdown XHTML
28. • 開頭使 用 半形 > 標註，後空 一 半形空 白 。 • 若引 用 多個段落，請每 一 段落前都加上 >。段落間的空 行 也需要> 與空 白 。 • 如果書中有多種引 言 樣式，之後再使 用 Class與CSS做出區隔。 引 用 Markdown語法 Markdown XHTML > 出 自 新青年 <blockquote> <p>出 自 新青年</p> </blockquote>
29. • 開頭使 用 數字123與半形. 標註，後空 一 半形空 白 。 • 若列表空 一行 區分，轉換時會加入段落<p>。 • 列表之間有其他元素時，編號有些轉換 工 具會繼續編號。 有編號列表 Markdown語法 Markdown XHTML 1. 魯迅 自 序
 2. 一 件 小 事 3. 狂 人日 記 <ol> <li>魯迅 自 序</li> <li> 一 件 小 事</li> <li>狂 人日 記</li> </ol>
30. • 開頭使 用 半形 * 或 - 標註，後空 一 半形空 白 。 • 若列表空 一行 區分，轉換時會加入段落<p>。 • 如果需要作多層次列表，可使 用 tab來進 行 縮排。 無編號列表 Markdown語法 Markdown XHTML - 魯迅 自 序
 - 一 件 小 事 - 狂 人 日 記 <ul> <li>魯迅 自 序</li> <li> 一 件 小 事</li> <li>狂 人日 記</li> </ul>
31. • 使 用 半形 * 夾註要標 示 的 文 字，不需加空 白 。 • 一 個*轉換成<em>，預設樣式為斜體。 • 兩個**轉換成<strong>，預設樣式為粗體。 • 若要底線，請 手 動輸入<u> </u> HTML標籤。 • <em>與<strong>都可以以CSS重新設計。 強調 Markdown語法 Markdown XHTML 為了讓Web的世界能夠*符合各地區*的語 言文 字需求。 為了讓Web的世界能夠<em>符合各地區 </em>的語 言 文 字需求。
32. • 註釋內 文 中的符號（註印）為[^1]。 • 註釋內容以另 一行 [^1]: 空 一 格後寫內容。 • 最好放在鄰接位置，避免切分XHTML。 • 編號不要重複。 註釋 Markdown語法 Markdown XHTML W3C裡頭的i18n[^1] 工 作 小 組 [^1]: 因internationalization從i到n間共18 字 母 ，故稱為i18n。 i18n<a href=“#a01” epub:type=“noteref”>1</a> 工 作 小 組 <aside id=“a01” epub:type=“footnote”> 因internationalization從i到n間共18字 母 ，故稱為i18n。</aside>
33. • 圖片的語法為 • 都 用 半形符號，檔名與 大小 寫需 一 致。 • 替代 文 字會寫入<img>的alt裏頭，可供無障礙使 用 ，如語 音 朗讀。 圖片 Markdown語法 Markdown XHTML  <img src=“001.png” alt=“替代 文 字”/>
34. • 超連結的語法為[被標註的 文 字](https://網址) • 和圖片只差 一 個半形!，請多加注意。 • 網址需要包含http://或者mailto: 完整網址。 超連結 Markdown語法 Markdown XHTML [網站](http://www.w3.org) <a href=“http://www.w3.org”>網站</a>
35. • 使 用 半形空 白 與半形 | 做為區隔線。 • 第 二行 以七個-做為區隔線，需要與標題量相同。 • 處理起來較複雜，可以使 用 Texts等處理。 • 目 前博客來等建議把表格做成圖片。 表格 Markdown語法 Markdown XHTML 標題i | 標題ii | ------- | -------- | 項 目 1 | 項 目 2 | <table> 　<th> 　　<td>標題i</td> 　　<td>標題ii</td> 　</th> 　<th> 　　<td>項 目 1</td> 　　<td>項 目 2</td> 　</th> </table>
36. • 章節或 一頁一 圖需要切割成獨立的XHTML檔案，電電轉換器提供 連續五個=可以切割檔案的功能。 • 在顯 示 上，就是強制換 頁 。 • Pandoc則是以 一 級標#做為分隔。 電電轉換器專有語法：分割檔案 Markdown語法 ¶ ===== ¶ Markdown
37. • 直排專有處理，ＷＴＯ、１、２等使 用 全型英 文 數字即可直立。 • 二 到四位數字，特殊 文 字，如A+，可使 用 CSS併進 一 個字內。 • 轉換上使 用 半形^標註 文 字，會 自 動轉換。 • Pandoc需要 手 動處理。 電電轉換器專有語法：縱中直排 Markdown語法 Markdown XHTML ^A+^ <span class="tcy">A+</span>
38. 準備Metadata
39. Metadata說明 Pandoc metadata --- title: - type: main text: 吶喊 creator: - role: author text: 魯迅 identi fi er: - scheme: ISBN-13 text: 986987654321 publisher: 新青年 language: zh-TW stylesheet: /Users/bobby/Desktop/samples/pandoc/style.css cover-image: /Users/bobby/Desktop/samples/pandoc/cover.jpg iBooks: - speci fi ed-fonts: true page-progression-direction: rtl pagetitle: 吶喊 --- • metadata供Pandoc轉換時填入 EPUB 3的OPF檔案中。 • 可透過Texts直接轉換。 • 樣式表與封 面 圖片可以 一 併加 入。 • page-progression-direction為 翻 頁方 向： • rtl由右向左，直排書 • ltr由左向右，橫排書
40. Metadata說明 電電轉換器 metadata # 出版品的識別碼 identi fi ers: - content: 986987654321 # 請指定具體的識別碼。 identi fi er-type: isbn # 請指定為「uuid」或者「isbn」。 # 書名 titles: - content: 吶喊 # 請指定書名。（必要） # 製作者 creators: # 作者1 -------- - content: 魯迅 # 請指定作者等的名字。 # 出版品所使 用 的語 言 （必要） language: zh-TW # 繁體中 文 ＝zh-TW 簡體中 文 ＝zh-CN 日文 =ja、英 文 =en 等 # 翻 頁方 向 pageDirection: rtl # 横排書=ltr、直排書=rtl
41. Metadata說明 電電轉換器 metadata # EPUB輸出選項 options: skipCover: true # 跳過封 面 圖片 頁 true|false titlepage: false # 自 動 生 成書名 頁 true|false tocInSpine: true # 自 動在spine中置入 目 錄 頁 true|false tocDisplayDepth: 2 # 目 錄 頁 的顯 示 層級 1-6 displayLandmarksNav: false # 於 目 錄 頁 中顯 示 Landmark true|false displayLoiNav: false # 於 目 錄 頁 中顯 示 圖片 一 覽 true|false displayLotNav: false # 於 目 錄 頁 中顯 示 表格 一 覽 true|false kepub: false # 使 用 kobo Touch的副檔名「.kepub.epub」 true|false autoTcy: false # 開啟 自 動縦中横排轉換 true|false tcyDigit: 3 #　 自 動縦中横排半形 文 字的位數 2-n
42. 後續動作
43. 轉換完成後的處理流程 EPUB完稿 • 以各種閱讀程式確認轉換結果。 • 將EPUB解開：
 Windows改副檔名為ZIP
 mac使 用 The Unarchiver • 使 用文 字編輯 工 具編輯HTML與CSS。 • 使 用 EPUB Checker檢查並且重新封裝。 • 提交上架。
44. 感謝聆聽