前半講媒體數位化的過程，為什麼出版早出發卻晚到？ 後半講Unicode、樣式設計和對電子書無障礙的編輯期許。

1. 董福興（Bobby Tung）
2021/12/01 WED 1400-1700
重新認識數位化流程，以及編輯須知的數位技術/技巧

2. • 汪達數位出版股份有限公司創辦⼈
數位出版顧問服務（台灣漫讀BookWalker）
EPUB 3電⼦書製作（⼤塊⽂化等出版社）
• W3C邀請專家
國際化⼩組〈中⽂排版需求〉
• 國內推動標準化
• 數位出版聯盟〈台灣EPUB 3製作指引〉
• 中⽂數位化技術推廣基⾦會〈注⾳符號排版〉
董福興（Bobby Tung）
⾃⼰介紹

3. • 重新認識數位化流程，談數位媒體的轉型
• 回顧媒體數位化歷史，探討如何做得更好。
• 數位出版⼩學堂：Unicode與字型
• 標點符號、缺字等編輯須知。
• 數位出版⼩學堂：樣式與無障礙需求
• 出版社需要注意的事項，以及對未來的期許。
分為三段，每段50分鐘，休息10分鐘
課程簡介

4. 重新認識數位化流程
談數位媒體的轉型

5. • ⼆⽉：公視影集「天橋上的魔術師」（同名⼩說改編）
• 八⽉：公視影集「斯卡羅」（《傀儡花》改編）
• ⼗⼀⽉：公視影集「茶⾦」（劇本改編為同名⼩說）
• ⽂策院，創意內容⼤會
• Disney+開站
出版因三級警戒⽽蕭條，串流視訊蓬勃發展
2021，影視產業⼤事紀
為什麼影視產業能順暢地數位化轉型︖

6. 媒體形式與數位化
⽂字
影像
聲⾳
影片
報紙 雜誌
書籍
繪畫 攝影 廣告
⾳樂 廣播
電影 電視
新聞網站
類比時代
電⼦書
Instagram
串流服務
Podcast
有聲書
數位時代
YouTube
TikTok
直播

7. 媒體數位化影響的層⾯
數位格式變⾰
專業業界採⽤
業餘玩家使⽤
產製流程變⾰
遞送管道改變
YouTube
等素⼈媒體
Net
fl
ix
等串流服務
平⾯媒體
轉型

8. • 1988年，MPEG格式誕⽣：數位格式的誕⽣
• 1995年，DV產品⼤量上市：業餘玩家採⽤
• 1999年，星戰⾸部曲以數位拍攝：專業業界採⽤
• 2000年，DVD開始普及：數位格式與載體的演進
• 2012年，Net
fl
ix開始提供串流服務：改變傳遞管道
• 2013年，華爾街之狼為無膠卷上映的電影：產製流程改變
• 2013年，Net
fl
ix開始提供原創影集：改變商業模式
以電影為例
媒體數位化的進程

9. 出版為什麼最早出發，卻最晚到達？

10. 幾乎與個⼈電腦同時的出版應⽤
MacWrite與Aldus PageMaker
Word Processor軟體代表：MacWrite
最早的DTP組合：Aldus Page Maker與
Apple LaserWrite

11. 出版數位⼯具的進展
寫作與排版軟體
Apple Works /
Pages Microsoft Word LibreO
ffi
ce Writer
被Adobe併購的PageMaker 風光⼀時的QuarkXpress 當今主流的InDesign

12. 出版明明就很「數位」！

13. 現在出版的流程到底哪兒有問題？

14. 打個比⽅：SPARS Code

15. SPARS Code
三個A/D代表的意義
Ａ
Ａ Ｄ
錄⾳ 混⾳ ⺟帶
A＝Analog＝類比
D＝Digital＝數位
唱⽚業很快就全數位
現在連CD都要淘汰了

16. • 第⼀個Ａ/Ｄ是寫作：
類比寫作就是⽤筆寫在稿紙上，數位類比轉換就是打字或OCR
數位寫作就是以各種程式輸入⽂字，提供數位原稿檔案
• 第⼆個Ａ/Ｄ是排版：
類比排版包括活字排印、照相排版
數位排版就是改⽤InDesign等排版軟體或Word等⽂字處理軟體
• 第三個Ａ/Ｄ是──只要最終成果是為了印刷書，就永遠為Ａ
前⾯所有的Ｄ都是輔助Ａ的⼯具
最終產品不是數位格式，數位流程就是浪費
三個Ａ/Ｄ代表的改變
出版的數位與類比

17. • 第⼀個Ｄ：
作者使⽤任何⽂字處理軟體，在數位裝置上寫作，處理好標題等結
構後提供原稿。
• 第⼆個Ｄ：
編輯整理原稿，指定、套⽤出版印刷樣式，輸出具結構與樣式的電
⼦書，同時導入InDesign等排版軟體排出印刷⽤原稿。
• 第三個Ｄ＋Ａ：
電⼦書直接出版、印刷書送印。
從Ｄ到Ｄ到Ｄ＋Ａ
理想的數位化出版流程

18. • 第⼀個Ｄ：
作者使⽤Word等軟體寫作，結構不清楚
• 第⼆個Ｄ：
編輯整理原稿，設定印刷樣式。
美編輸出成TXT，照著Word檔案重新建構⼀次結構。
編輯再校對。
• 第三個Ａ→Ｄ：
印刷書送印。
排版檔輸出HTML或TXT，再整理成電⼦書。
有沒有結構？Who Cares？
從Ｄ到Ｄ到Ａ→Ｄ
實際上的⼯作流程

19. • 數位：結構清楚，可多⽤途再利⽤。
• 類比：呈現為主，⼀次性使⽤。
• 不好的EPUB：可以閱讀，但內部結構混亂，難以調整。
• Word docx檔：先天不良，儲存⼤量看不⾒的資訊，樣式結構容易
犯⼈為錯誤。
• Indesign IDML檔：某些版本也會儲存修改字的資訊，造成輸出時
亂碼。
以及那些跨界的混淆
數位與類比各⾃要什麼？

20. 有沒有辦法做到更有效率
更精確的數位化流程？

21. 出版的數位媒體格式是什麼？

22. • 書籍：EPUB3
2000年訂立的OEBPS並未廣泛使⽤
2007年的Kindle是急就章，2014-15年才真正穩定
• 報紙、雜誌：網⾴
2010年iPad上市時，還有⼀次多媒體App的風潮
2011年紐約時報建立訂閱制付費牆（Paywall）底定
• HTML作為結構化內容
CSS作為呈現樣式設計
對⽂字為主的出版⽽⾔，應該是確立的數位格式
書籍、報紙、雜誌
晚近才底定的出版數位格式

23. 1. 使⽤可輸出HTML結構的寫作⼯具：
例如Markdown，或者有樣式⼯具的WYSIWYG⼯具。
2. 結構與樣式分離：
以視覺設計，以描述的⽅式紀錄設計，紙電兩⽅共⽤。
3. ⼀致的寫作指南：
使⽤相同碼點的標點，縮排與間隔處理等都有規則可循。
打造精實的數位化流程
結論

24. 從「印出來就好」
到「照規則進⾏」

25. 數位出版⼩學堂

26. • Unicode與字型
• 寫作樣式
• 中英⽂間隔處理
• 強調樣式
• 無障礙輔助
• 表格與替代⽂字

27. 數位出版⼩學堂：
Unicode與字型

28. • ⼜稱為「萬國碼」。
• 包含全球各語種⽂字的編碼系統。
• 應⽤在⽬前各電腦系統中。
• 是國際標準ISO/IEC 10646-2020。
• 由美國Unicode Consortium負責維護改版。
Unicode是什麼？
Unicode與字型

29. • 1984年，資策會公佈Big-5碼，收錄13053個漢字與441個符號
• 1986年，國家標準CNS11643完成，收錄13051個漢字
• 1991年，Unicode 1.0版公布
• 1992年，CNS11643「中⽂標準交換碼」，收錄48027個漢字
• 1993年，Unicode 1.1版公布，收錄整合漢字20902字
• 2001年，Mac OS X與Window XP（Windows NT）⽀援
從Big-5到Unicode
電腦編碼歷史

30. • Windows雖然⽀援Unicode，但是使⽤UTF-16編碼
• 網⾴與macOS、Linux使⽤的是UTF-8編碼
• Windows 10 2019年前，記事本裡頭編碼還是ANSI：
⽇⽂則為Shift-JIS
中⽂則為Big-5
• 更改設定後才能預設存為UTF-8
以Windows為例
現在還會遇到的編碼問題

31. • U+XXXX
X為0-F的16進位
稱為碼點（codepoint）
代表⼀個字或符號
• U+0024 $ DOLLAR SIGN
• U+66F8 書
CJK UNIFIED IDEOGRAPH-66F8
• 65536字構成⼀個字表平⾯
Unicode⽂字編碼
https://en.wikipedia.org/wiki/Plane_(Unicode)

32. • 第0⾯：基本多語種平⾯（Basic Multilingual Plane, BMP）
U+0000~U+FFFF
世界常⾒語⾔的⽂字編碼，以及中⽇韓統⼀表意⽂字
• 第1⾯：多⽂種補充平⾯(Supplementary Multilingual Plane, SMP)
U+10000~U+1FFFF
歷史⽂字，以及新加入的EMOJI😎👻🤷
• 第2⾯：表意⽂字補充平⾯(Supplementary Ideographic Plane,SIP)
U+20000~U+2FFFF
• 第3⾯：表意⽂字第三平⾯(Tertiary Ideographic Plane,TIP)
U+30000~U+3FFFF
Unicode字⾯

33. • Unicode前，各國都有⾃⼰的編碼表與標準字型
台灣BIG-5 / CNS11643教育部標準字表
⽇本JIS X 0208
中國GB2312
• 這些編碼表內的漢字有些相同、有些不同，有些同⼀字但寫法不同。所以
進⾏整合。
• 1993年提出20902字，位於BMP
1999年提出6582字，為擴充區A，位於BMP
2001年提出42711字，為擴充區B，BMP不夠放，放到SIP
2020年提出4939字，為擴充區G，SIP不夠放，放到TIP
• ⽬前漢字有92866字。
CJK Uni
fi
ed Ideographs
中⽇韓統⼀表意⽂字

34. 這樣的整合也造成了⼀些
⿇煩……

35. 標點符號

37. • 全形標點符號也整合到同碼點
• 繁體的標點居中
• ⽇⽂與簡體位於側邊，冒號分號
各有差異
• 標點的顯⽰按照「字型」，⽽碼
點為共通
• 過去繁體字型不全時常⽤⽇⽂替
代，現在較沒有這問題
句號、頓號、逗號等，字形按語種不同變化
基本標點

38. • U+300C 「
LEFT CORNER BRACKET
U+FE41 ﹁
PRESENTATION FORM FOR VERTICAL LEFT CORNER BRACKET
U+300D 」
RIGHT CORNER BRACKET
U+FE42 ﹂
PRESENTATION FORM FOR VERTICAL RIGHT CORNER
BRACKET
• 另外還有兩個半形引號
• 字型技術在直排時會將U+300C轉換成U+FE41，所以不要⽤後者
字型技術可⾃⾏轉向，無需直接使⽤碼點
直橫引號

39. 直排時的符號轉向
Unicode® Technical Report #50 UNICODE VERTICAL TEXT LAYOUT

40. • 中⽂和⽇⽂對應的Unicode碼點不同：
中⽂：U+FF5E ～ FULLWIDTH TILDE
⽇⽂：U+301C 〜 WAVE DASH
• 橫排看起來⼀樣，直排就有問題。
• 新字型：換成「Ｓ」型字形
舊字型：連轉向都不轉
• ⽀援UTR-50的閱讀程式/瀏覽器：直接轉90度
不⽀援UTR-50的閱讀程式/瀏覽器：不動
中⽇不同，字型技術新舊也不同
連結號

41. • Unicode中有兩個全形的中央三點
U+2026 … HORIZONTAL ELLIPSIS
U+22EF ⋯ MIDLINE HORIZONTAL ELLIPSIS
• 前者橫排置底或置中，依字型設計，直排⼀率置中；
後者橫排直排都置中。
• 後者其實是個數學符號，⽽且早期Android缺字不會顯⽰。
由於⼀定居中，在Mac上是輸入法推薦的碼點。
中英共⽤符號 v.s. 數學符號
刪節號

42. 中英共⽤符號 v.s. 數學符號
刪節號

43. • 語意正確的碼點：
U+2014 — EM Dash
——（蘋⽅） ——（標楷體）
但沒有強制字型⼀定要連在⼀起
• 顯⽰上的折衷：
U+2500 ─ BOX DRAWINGS LIGHT HORIZONTAL
──（蘋⽅） ──（標楷體）
• 有編碼但沒有字型造這個字
U+2E3A ⸺ TWO-EM DASH
⸺（思源體）
語意對的顯⽰不對，顯⽰對的語意不對
破折號

44. • 以下都曾出現在網⾴上，被當作間隔號使⽤
U+00B7 · MIDDLE DOT
U+2022 • BULLET
U+2219 ∙ BULLET OPERATOR
U+25CF ● BLACK CIRCLE
U+30FB ・ KATAKANA MIDDLE DOT
U+FF0E ． FULLWIDTH FULL STOP
• 中⽂推薦使⽤的為U+00B7 · MIDDLE DOT
但這符號並非「全形」不強制佔⼀字寬
• 佔⼀字寬的U+30FB ・ KATAKANA MIDDLE DOT
來⾃⽇⽂，不是所有字型都有這個字
實⼼中點太陽系
間隔號

45. • ⽩圈數字 0-50（20以後看字型⽀援，⼤致上只有系統字型⽀援）
U+2460 ① CIRCLED DIGIT ONE
• ⿊體版本 0-10
U+2780 ➀ DINGBAT CIRCLED SANS-SERIF DIGIT ONE
• ⿊圈數字 0-20
U+2776 ❶ DINGBAT NEGATIVE CIRCLED DIGIT ONE
• ⿊體版本 0-10
U+278A ➊ DINGBAT NEGATIVE CIRCLED SANS-SERIF DIGIT ONE
• 雙環版本 0-10
U+24F5 ⓵ DOUBLE CIRCLED DIGIT ONE
• 點號版本 0-20
U+1F100
🄀
DIGIT ZERO FULL STOP
• 括號版本 1-20
U+2474 ⑴ PARENTHESIZED DIGIT ONE
好看，但數量各有限制，超過建議直接使⽤數字
數字符號

46. 字型

47. • 底限：Big-5
回到當初編碼規則，但會少許多常⽤字
⼈名「煊」、「堃」
⽇⽂「雫」、「辻」
• 基本：Unicode 3.0
即Union 20902字加上Ext-A 6582字＝BMP內的漢字
⽤於排書籍內⽂⼤致上沒有問題
有字碼但字型不⼀定都有造字
為什麼還缺字？

48. • 完整：全漢字
• 花園明朝：使⽤組字引擎的全漢字字型
優點：Unicode漢字造好造滿
缺點：部⾸、標點以⽇⽂寫法為主，不好看
• 新細明體：T-source漢字不缺字
優點：在Windows環境下⽣罕⽤字不缺字
缺點：顯⽰上並非完善，不好看
• 全字庫：多字體的全T-source字型
優點：OpenData⾃由使⽤
缺點：只能⽤來顯⽰缺字
有字碼但字型不⼀定都有造字
為什麼還缺字？

49. • 折衷：Big-5+
在Big-5之上外加各種常⽤字
• HKCSC：香港增補字符集，5033字的粵語字
• ⼈名與常⽤字：前述的⼈名與⼤五外的常⽤字
• 台客語字：如「
𨑨
迌」等位於Ext-B但常⽤的字
• 思源體號稱不缺字，但⼤致上還是在這範圍內
有字碼但字型不⼀定都有造字
為什麼還缺字？

50. • Mac請愛⽤字元檢視器，Windows alt + 字碼 輸入Unicode碼點
• 輸入法可以設定的話，就指定對的碼點
• 原稿處理時可以使⽤搜尋取代或者Script、巨集來統⼀
• 預先判斷缺字來造成圖片
• 顯⽰有問題時，請要求平台調整，不是每次都是內容的錯
標點符號按照作業系統與習慣就會有多種差異
⼩結

51. 數位出版⼩學堂：
樣式與無障礙需求

52. 中英⽂間隔

53. 中英⽂間隔
漢字與英⽂、數字間的空⽩怎麼加
這個 source 有 19,034 筆資料。

54. • 顯⽰上希望字不會擠在⼀起，但是要怎麼處理？
• 先回答三個問題：
• 空⽩量應該是多少？
• 加入空⽩的規則為何？
• 該使⽤何種⼿段？
漢字與英⽂、數字間的空⽩怎麼加
中英⽂間隔

56. • 空⽩量應該是多少？
⽇⽂是1/4em，但實際上太多了。
• 加入空⽩的規則為何？
⽇⽂排版需求寫得很清楚，中⽂比照嗎？
• 該使⽤何種⼿段？
Word與InDesign等排版軟體⽀援，
但網⾴與原稿應該⼿動加入嗎？
→⼿動加入就會有錯誤，所以不要⾃⼰key空⽩
→Apple在作業系統中已經⽀援，未來會以CSS text-spacing:auto
⽀援網⾴內容
漢字與英⽂、數字間的空⽩怎麼加
中英⽂間隔

57. 強調樣式

58. • 英⽂的強調⽅式：
斜體（italic）、
粗體（bold）、
底線（underline）、
⼩型⼤寫SMALL CAPITALS
• 中⽂沒有斜體，明體的italic（書寫體）應該是楷體
底線為標點符號私名號
→剩下粗體可⽤，但中⽂字⼤多只有⼀字重
→還有更換字體，但得看授權字狀況
印刷可⽤的強調⽅式，電⼦書不⼀定可⾏
強調樣式

59. • 100%「⿊體粗體」
「明體中⿊體很清楚」、「⿊體加粗也很清楚」。
• 100%「底線」
除了會被誤認為連結或私名號外，強調很明確。
• 80%「灰階」
在電⼦紙閱讀器上，彩⾊也會回到16階灰階，⼩⼼過淡難辨識。
•
哪⼀種表現較佳
強調樣式

60. • 100%（60%）「旁點」
⼤陸的著重號，⽇⽂的旁點，但注意字體⽀援不佳顯⽰差。
• 40%「粗體」
明體的粗體不⼀定清楚，楷體大概沒有粗體字重。
• 40% or 0 「換字體」
內⽂指定明體，強調⿊體。（使⽤者換成⿊體怎麼辦？
內⽂指定明體，強調楷體。（各平台楷體如何選擇？
→注意不要⽤InDesign輸出印刷⽤的楷體字，需要額外授權！
• • • • • • • • • • •
哪⼀種表現較佳
強調樣式

61. • 最常出現：⿊體粗體（⼀定可⾒的強調）。
• 次常出現：灰階＋換字型（無字型可選也會灰階）。
• ⽇⽂書：可⽤旁點。
• 較少出現：使⽤底線 或 ⾊彩反轉（如⿊底⽩字、灰底⿊字）。
• 盡量使⽤<strong>、<em>等HTML語意標籤。
• 不建議<b>、<u>等標籤，英⽂書名體例固定斜體可⽤<i>。
推薦設計樣式
強調樣式

62. 期待的無障礙⽀援

63. • 電⼦書、網⾴是數位⽂字。
• 可透過輔助科技讓更多⼈讀到。
• Text-to-speech，朗讀技術不是「有聲書」，是無障礙功能。
• Braille，iOS 13起已經⽀援台灣注⾳點字輸出。
• 輔助科技要完善運作，需要：
• 完整的內容結構與語意資料
• 額外的替代內容
數位⽂字可供更多⼈閱讀
電⼦書的無障礙功能

64. 替代⽂字

65. • HTML裡頭加入圖片的語法：
<img src="圖片檔名" alt="" />
• alt是alternative text，替代⽂字
• 圖片無法顯⽰時，會顯⽰⽂字
• 無障礙功能也會朗讀、顯⽰替代⽂字
• 可以讓視障者等「理解」圖片表達的
資訊
• 不是所有圖片都需要替代⽂字→
<img>中的alt=""屬性
圖片的替代⽂字
https://www.w3.org/WAI/tutorials/images/decision-tree/

66. 表格顯⽰

67. • ⽬前電⼦書分⾴狀況下，表格顯⽰不算完整。
• 中⽂直排更是問題不少。
• 聯盟指引建議把表格做成圖片，請將表格⽂字或重點敘述貼到
alt=""裡頭。
• 未來希望閱讀程式能夠完善對表格的⽀援。
盡量能⽤真正的<table>
表格顯⽰

68. 注⾳符號

69. https://cmex-30.github.io/Bopomofo_on_Web/testpage/index.html

70. http://www.cmex.org.tw/phon/

71. • <ruby>可以讓被標注讀⾳的漢字，和<rt>內的注⾳關聯。
• 無障礙輔助技術可以利⽤注⾳來修正漢字發⾳。
• 結構化資料可以供AI等進⾏學習。
• 使⽤字型技術修正顯⽰，不會影響到資料結構。
• But……
使⽤html的<ruby>並靠字型技術修正顯⽰
電⼦書與網⾴的注⾳符號

73. • IVS是Unicode的異體字選擇機制。
• 需要配合IVD登錄來使⽤。
• IVS無法取得讀⾳資料，除非另外提供對應表。
• IVS注⾳字體僅能⽤來「切換不同字體」，但不適合廣泛應⽤。
• 把漢字與注⾳做在⼀起的注⾳字型本⾝就是類比⽅法。
• ⼩⼼使⽤。
⽅便，但是不永續
⼩⼼使⽤IVS注⾳字型

74. • 重新思考：為什麼上了很多課，但實際狀況沒有改變？
• 在COVID-19居家上班，減少⾒⾯的狀況下，可不可以：
• 學習⼀項新技能
• 提⾼共同⼯作的效率
• 只要開始做，就會發現有很多知識都要逐⼀處理，很多細節要⼀⼀
決定。希望這些「⼩」知識有⽤。
• 未來可以針對各主題另外開課，請和聯盟反應。
改變的動⼒，從⼩處著⼿
結論

75. 感謝聆聽