幾個中文排版訣竅，有效改善閱讀體驗

2016MOPCON@高雄
中文排版從桌上排版到網頁，受到西方文字以及日文排版的影響相當深。W3C 之前發布中文排版需求，試著從傳統排版時代找出中文的排版規則，並且試著在技術上完善中文排版，但要大幅改變，還是需要所有內容相關的開發者、設計師一起努力。這場演講希望分享幾個小訣竅，從文字到排版，從規則到技術，希望能夠讓更多人投入改善中文排版的表現，以一些小小的改變，大大地提升使用者體驗。

Transcript

1. 幾個中文排版訣竅 有效改善閱讀體驗 WANDERER 董福興
2. 為什麼要在乎排版？
3. 我們每天多數的時間 都在螢幕上閱讀文字
6. 已經十年了！
7. 做好排版： 小小改變， 大大加分！
8. 受到西方與東方影響 的中文排版
10. ! " 桌上出版
11. # Web ! " 桌上出版
13. 來自"的影響 • 避頭點規則：，。」』）等不得出現在行首； 「『（等不得出現在行末。 • 標點擠壓：遇到。」等狀況時，可以切割合併佔 一個全形位置。 • 標點懸吊（少見）：，。等為避頭點可以懸掛到 版心之外，突出一字。
14. 來自#!的影響 • 超小字體：一堆模板內文字預設為8pt，甚至小到 7pt，難以閱讀。 • 段落間距：幾乎所有的瀏覽器都預設p的前後 margin為1em。 • 段首不縮：因為上面影響，所以在Web上幾乎很 少見到段首縮排二字（或一字）。
15. 中文排版需求 是什麼？
16. 制定規格 國際化工作小組 Internationalization WG = i18n WG 無障礙工作小組 Accessibility WG = a10y WG 規格檢查
17. 日文排版需求 Requirements for Japanese Text Layout 2008/4/11公佈 迄今持續修訂中
18. 中文排版需求 Requirements for Chinese Text Layout 2015/7/23公佈 銳意編輯中
19. ＢＵＴ！
20. 文長，慎入 ＴＬ；ＤＲ
21. 講個訣竅！
22. 字 字 ໌楷 ⿊黑仿 強調 我是標題
23. 字級大小 字 字 • 問題：字體到底要多大才「易讀」？
24. 字級大小 字 字 Old Good Days 72pt = 1英吋 Classic Mac = 72dpi
25. 從鉛字的號數尋找線索……
26. 字級大小 字 字 字號 ⽤用途 點數 實際尺⼨寸 換算px
 （MBP） 五號字 內⽂文 （⼤大字） 10.5pt 0.369cm 16.5px 新五號 ⼀一般內⽂文 9pt 0.316cm 14px 六號字 註解圖說 8pt 0.281cm 12.5px
27. 字 字 ໌楷 ⿊黑仿 強調 我是標題
28. 字體配置 ໌楷 ⿊黑仿 • 桌上系統： • Windows：新細明體、微軟正黑體、標楷體。 • macOS：蘋方繁、宋體繁、楷體繁⋯⋯ • 行動裝置：
 蘋方繁、思源黑體（Not for all Android）
29. 字體配置 ໌楷 ⿊黑仿 字體 ⽤用途 優點 缺點 ⿊黑體 ＵＩ、標題、 強調、圖說。 視認性⾼高 字重多變 變化較少 明（宋）體 標題、內⽂。 較具「⽂氣」 字重差異不⼤ 楷體 標題、內⽂*、 摘⾔、注釋。 較為正式 視認性差 仿宋 內文**、摘言。 較為雋秀 視認性更差 * ：台灣政府公文內文規定要使用楷體 **：中國黨政文書內文規定使用仿宋
30. 字體配置 ໌楷 ⿊黑仿 字體 ⽤用途 優點 缺點 ⿊黑體 ＵＩ、標題、 強調、圖說。 視認性⾼高 字重多變 變化較少 明（宋）體 標題、內⽂。 較具「⽂氣」 字重差異不⼤ 楷體 標題、內⽂*、 摘⾔、注釋。 較為正式 視認性差 仿宋 內文**、摘言。 較為雋秀 視認性更差 * ：台灣政府公文內文規定要使用楷體 **：中國黨政文書內文規定使用仿宋
31. 字體配置 ໌楷 ⿊黑仿 字體 ⽤用途 優點 缺點 ⿊黑體 ＵＩ、標題、 強調、圖說。 視認性⾼高 字重多變 變化較少 明（宋）體 標題、內⽂。 較具「⽂氣」 字重差異不⼤ 楷體 標題、內⽂*、 摘⾔、注釋。 較為正式 視認性差 仿宋 內文**、摘言。 較為雋秀 視認性更差 * ：台灣政府公文內文規定要使用楷體 **：中國黨政文書內文規定使用仿宋 Try Web font
32. 字體配置 ໌楷 ⿊黑仿 字體 ⽤用途 優點 缺點 ⿊黑體 ＵＩ、標題、 強調、圖說。 視認性⾼高 字重多變 變化較少 明（宋）體 標題、內⽂。 較具「⽂氣」 字重差異不⼤ 楷體 標題、內⽂*、 摘⾔、注釋。 較為正式 視認性差 仿宋 內文**、摘言。 較為雋秀 視認性更差 * ：台灣政府公文內文規定要使用楷體 **：中國黨政文書內文規定使用仿宋 Try Web font @media only screen and (min-device-pixel-ratio: 2){}
33. 字體配置 ໌楷 ⿊黑仿 矽୩ ⽜⾓ 日文字型 小塚明朝 簡中字型 宋體簡
34. 字體配置 ໌楷 ⿊黑仿 矽୩ ⽜⾓ 日文字型 小塚明朝 簡中字型 宋體簡
35. 字體配置 ໌楷 ⿊黑仿 矽୩ ⽜⾓ 日文字型 小塚明朝 簡中字型 宋體簡
36. 字 字 ໌楷 ⿊黑仿 強調 我是標題
37. 強調文字 強調 少用樣式強調 多用語意強調 <b> <i> <u> <em> <strong>
38. 強調文字 強調 少用樣式強調 多用語意強調 <b> <i> <u> <em> <strong>
39. 強調文字 強調 少用樣式強調 多用語意強調 <b> <i> <u> <em> <strong> &
40. 強調文字 強調 沒有斜體 不用徬點 明體加粗 不夠明顯 有個　　要說 有個重點要說 w w 有個重點要說
41. 強調文字 強調 沒有斜體 不用徬點 明體加粗 不夠明顯 有個　　要說 有個重點要說 w w 有個重點要說
42. 強調文字 強調 沒有斜體 不用徬點 明體加粗 不夠明顯 有個　　要說 有個重點要說 w w 有個重點要說
43. 強調文字 強調 沒有斜體 不用徬點 明體加粗 不夠明顯 有個　　要說 有個重點要說 w w 有個重點要說
44. 強調文字 強調 改變字型 黑體加粗 加上底線 有個重點要說 有個重點要說 有個重點要說
45. 字 字 ໌楷 ⿊黑仿 強調 我是標題
46. 段落對齊 上個⽉月我到德國 （Deutscheland），到了了機 場，發現德⽂文寫作flughafen， 然後搭⾞車車到了了法蘭蘭克福中央⾞車車 站Frankfurt Hauptbahnhop。 買票花了了不少時間。 上 個 ⽉月 我 到 德 國 （Deutscheland），到了了機 場，發現德⽂文寫作flughafen， 然後搭⾞車車到了了法蘭蘭克福中央⾞車車 站Frankfurt Hauptbahnhop。 買票花了了不少時間。 text-align: justify; 問題1：避頭點 問題2：中西混排
47. 段落對齊 避頭點 ' ，這樣下去不⾏啊。 " ɺͦ͏͸͍͔ͳ͍ɻ
    ( ，这样下去没法干。 繁體中文真的不一定需要強制避頭點……
 word-break: break-all;
48. 段落對齊 避頭點 ' ，這樣下去不⾏啊。 " ɺͦ͏͸͍͔ͳ͍ɻ
    ( ，这样下去没法干。 繁體中文真的不一定需要強制避頭點……
 word-break: break-all;
49. 段落對齊 Hyphenation 上個⽉月我到德國（<span lang="de">Deutscheland</span>）， 到了了機場發現德⽂文寫作<span lang="de">flughafen</span>，然 後搭⾞車車到了了法蘭蘭克福中央⾞車車站<span lang="de">Frankfurt Hauptbahnhop</span>。買票花了了不少時間。 1，HTML開頭已經宣告語言zh-TW 2，內文字應該給予lang標籤宣告 3，-webkit-hyphens: auto;
50. 段落對齊 Before After
51. 段落對齊 Before After
52. 字 字 ໌楷 ⿊黑仿 強調 我是標題
53. 段落間隔 傳統活版段落間不空行
54. 段落間隔 但是幾乎所有的瀏覽器 都會加上段落間距 ⋯⋯然後大家都不reset一下的⋯⋯
55. 段落間隔 書籍排版加間距的狀況 • 序、跋、語錄：每一句話都有停頓，所以不完全 是前後連貫的敘述。 • 區分小節：章、節之外，敘述與語氣停頓處，加 一整行來做出區別。
56. 段落間隔 網頁可以怎麼做？ • 電腦、平板：每一段之間還是加上間距，但間距 不要大於「字級＋行距」（例如line-height: 1.8， margin就不要大於1.8em）。 • 手機：不妨不加間距，改用段首縮排來處理（例 如text-indent: 1em/2em;）。
57. 段落間隔 看到東西被⽕吞噬，焦⿊然後變形，有⼀種特別的快感。他⼿握銅製噴 嘴，⼿中這條巨蟒把毒液般的煤油噴向世間，⾎液衝上他的頭部，他的 雙⼿就好似某位令⼈讚歎的指揮家般，演奏著熾熱燃燒的交響樂，把⼀ 切燒成歷史的殘渣與焦炭。他那⼀臉淡定的頭上頂著編號四五⼀的招牌 頭盔，眼裡全是在想著接下來要燒些什麼的橘⾊⽕焰，然後把點⽕器撥 開，整棟房⼦霎時被⼀道狼吞虎嚥的⽕焰吞噬，把傍晚的天空照得⾚⿈ 帶⿊。他邁步⾛向⼀團⽕星，很想要像⽼笑話說的那樣，拿⽕鏟去撥棉 花糖，⽽那些振翅欲⾶的書本就這麼死在房⼦的⾨廊跟草坪上。旋迴的 ⽕光隨風吹拂，書⾴在燃燒中變得焦⿊。 蒙塔格露出了所有被⽕焰熾灼逼退的男⼈，必會擁有的勇猛獰笑。他知 道他回到消防隊後，會對鏡中那個貌似⽤燒焦軟⽊塞扮⿊臉，滑稽演員 般的⾃⼰眨眨眼。之後睡覺時，他覺得那抹灼熱的笑容，在⿊暗中依舊 掛在臉部肌⾁上。他的記憶中，那抹笑容從來不曾消退，⼀次也沒有過。 他把他那頂烏⿊的甲蟲⾊頭盔掛起來擦到發亮，把防⽕夾克掛得整整齊 齊的，舒舒服服地沖個澡，然後⼿插⼜袋吹著⼜哨穿過消防局的⼆樓， 直接從升降孔往下掉。直到似⼤禍臨頭的最後⼀刻，他才把⼿從⼜袋裡 抽出來，抓住⾦⾊升降桿，停⽌下落。他吱吱作響地慢慢滑停，腳後跟 離樓下的⽔泥地僅差⼀吋。 他⾛出消防局，沿著午夜的街道向地下鐵⾛去。安靜的氣動列⾞無聲地 順著地表下的管道滑⾏。他下⾞時呼出⼀⼤⼜暖空氣，凝在升往郊區貼 著乳⽩⾊瓷磚的電扶梯上。他吹著⼜哨，讓電扶梯載著他進入凝結的夜 靄中。他往轉角⾛去，腦中沒想些什麼特別的事。但⾛到轉角前，他的 腳步卻慢了下來，就好像無端吹來⼀陣風，又好像有⼈叫著他的名字似 的。 前後頁是兩段還是一段？ 電子書排版照書排
58. 段落間隔 電子書排版照書排 看到東西被⽕吞噬，焦⿊然後變形，有⼀種特別的快感。他⼿握銅 製噴嘴，⼿中這條巨蟒把毒液般的煤油噴向世間，⾎液衝上他的頭部，他 的雙⼿就好似某位令⼈讚歎的指揮家般，演奏著熾熱燃燒的交響樂，把⼀ 切燒成歷史的殘渣與焦炭。他那⼀臉淡定的頭上頂著編號四五⼀的招牌頭 盔，眼裡全是在想著接下來要燒些什麼的橘⾊⽕焰，然後把點⽕器撥開， 整棟房⼦霎時被⼀道狼吞虎嚥的⽕焰吞噬，把傍晚的天空照得⾚⿈帶⿊。 他邁步⾛向⼀團⽕星，很想要像⽼笑話說的那樣，拿⽕鏟去撥棉花糖，⽽ 那些振翅欲⾶的書本就這麼死在房⼦的⾨廊跟草坪上。旋迴的⽕光隨風吹 拂，書⾴在燃燒中變得焦⿊。 蒙塔格露出了所有被⽕焰熾灼逼退的男⼈，必會擁有的勇猛獰笑。 他知道他回到消防隊後，會對鏡中那個貌似⽤燒焦軟⽊塞扮⿊臉，滑稽演 員般的⾃⼰眨眨眼。之後睡覺時，他覺得那抹灼熱的笑容，在⿊暗中依舊 掛在臉部肌⾁上。他的記憶中，那抹笑容從來不曾消退，⼀次也沒有過。 他把他那頂烏⿊的甲蟲⾊頭盔掛起來擦到發亮，把防⽕夾克掛得 整整齊齊的，舒舒服服地沖個澡，然後⼿插⼜袋吹著⼜哨穿過消防局的 ⼆樓，直接從升降孔往下掉。直到似⼤禍臨頭的最後⼀刻，他才把⼿從 ⼜袋裡抽出來，抓住⾦⾊升降桿，停⽌下落。他吱吱作響地慢慢滑停， 腳後跟離樓下的⽔泥地僅差⼀吋。 他⾛出消防局，沿著午夜的街道向地下鐵⾛去。安靜的氣動列⾞ 無聲地順著地表下的管道滑⾏。他下⾞時呼出⼀⼤⼜暖空氣，凝在升往 郊區貼著乳⽩⾊瓷磚的電扶梯上。他吹著⼜哨，讓電扶梯載著他進入凝 結的夜靄中。他往轉角⾛去，腦中沒想些什麼特別的事。但⾛到轉角前， 他的腳步卻慢了下來，就好像無端吹來⼀陣風，又好像有⼈叫著他的名 字似的。 這樣清楚多了
59. 字 字 ໌楷 ⿊黑仿 強調 我是標題
60. 標題設計 我是標題 • 問題：標題到底要佔多少空間？
61. 標題設計 我是標題 這裡是個中標 4.4em 1.2em 1.6em 1.6em
62. 標題設計 我是標題 這裡是個中標
63. 看到東西被⽕吞噬，焦⿊然後變形，有 ⼀種特別的快感。他⼿握銅製噴嘴，⼿中這 條巨蟒把毒液般的煤油噴向世間。 ⾎液衝上他的頭部，他的雙⼿就好似某 位令⼈讚歎的指揮家般，演奏著熾熱燃燒的 ⽉ 標題設計 我是標題 焚書作為志業
64. 看到東西被⽕吞噬，焦⿊然後變形，有 ⼀種特別的快感。他⼿握銅製噴嘴，⼿中這 條巨蟒把毒液般的煤油噴向世間。 焚書作為一種志業 ⾎液衝上他的頭部，他的雙⼿就好似某 位令⼈讚歎的指揮家般，演奏著熾熱燃燒的 ⽉ 標題設計 我是標題 ←這樣的小標也不賴！
65. 標題設計 我是標題 • 目的：標題的目的在於讓讀者建構心 理定錨，知道閱讀進度與結構。一切 以易於理解為主，設計師切記！
66. 字 字 ໌楷 ⿊黑仿 強調 我是標題
67. 訣竅說完了！
68. 關於設計： 始於規則， 終於創意。