Bobby Tung will give a presentation on rethinking the digitalization process and editing techniques for digital technology. The presentation will be divided into three 50-minute sections with 10 minutes of break in between. It will cover rediscovering the digitalization workflow, the history of media digitalization, and tips for Unicode, fonts, styles, accessibility and tables in digital publishing.

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. 感謝聆聽