中文版式的細(xì)節(jié)規(guī)范,請(qǐng)注意！

轉(zhuǎn)載贊8 收藏8 評(píng)論

舉報(bào) 2014-11-20

掃描,分享朋友圈

本文最初以英文發(fā)表于Medium，主要是希望給外文圈的朋友在進(jìn)行Web與App等內(nèi)容服務(wù)中文地區(qū)化時(shí)，能夠提供較好的文字排版呈現(xiàn)。在吳逸文、許翰文等設(shè)計(jì)圈的朋友催促下，以中文重新書寫，刪除部分「對(duì)外」的用語，并且加上一些額外的信息，希望對(duì)中文圈也能有所助益。

東亞對(duì)于全球化的網(wǎng)絡(luò)服務(wù)來說，進(jìn)入時(shí)會(huì)遇到幾道墻壁隔離，第一道就是語言的障蔽（然后你會(huì)遇到中國(guó)偉大的防火墻）。中文、日文、韓文有著不同的排版規(guī)則，目前在W3C的參考資料中，日文排版需求是最為完整的文件，但是大概長(zhǎng)到很難讀完；韓國(guó)的諺文文字排版需求則是份量剛剛好。至于中文，我目前還在撰寫草稿。

在我寫完前，先整理出十項(xiàng)簡(jiǎn)單的原則，作為做好中文排版的參考。

一、注意標(biāo)點(diǎn)的不同

無論你有沒有安裝額外的字型，各作業(yè)系統(tǒng)中有漢字的字體數(shù)量不在少數(shù)，有些是簡(jiǎn)體、有些是繁體、有些是日文。感謝Unicode早期的中日韓越統(tǒng)一表意文字規(guī)劃，這些字體大致上有著相當(dāng)?shù)墓餐ㄐ浴?

但問題在于，日文、繁體中文與簡(jiǎn)體中文的字形（Glyph）不同，加上每種字型只會(huì)造出針對(duì)該種語言常用的漢字，常會(huì)發(fā)生缺字而后退（Fallback）到其他字型的狀況，會(huì)使得文內(nèi)的字型不一致而打亂閱讀。所以，從一開始就選對(duì)字型相當(dāng)重要。

那么，要如何判斷簡(jiǎn)體與繁體的字型呢？

很簡(jiǎn)單，輸入一個(gè)全形的逗號(hào)與句號(hào)，套用你所要的字型，若這兩個(gè)符號(hào)位于正中央，就是繁體中文；若日文一樣落到左下角，就是簡(jiǎn)體中文。若要進(jìn)一步區(qū)分簡(jiǎn)體中文與日文字型，可以輸入日文沒有的漢字，例如「啟（U+555F）」，若無法正常顯示，就是日文字型。

最后，如果沒有特別的原因，中文原則上都使用全形標(biāo)點(diǎn)。

繁體與簡(jiǎn)體標(biāo)點(diǎn)的位置不同

補(bǔ)充說明：有朋友來信詢問這一段的敘述。標(biāo)點(diǎn)符號(hào)位置只是用來判斷簡(jiǎn)體字型與繁體字型的簡(jiǎn)單依據(jù)。并非繁體字一定要使用置中標(biāo)點(diǎn)才是對(duì)的。

二、使用正確的系統(tǒng)字型

更進(jìn)一步，你可以在App的地區(qū)化或者CSS中指定對(duì)的系統(tǒng)字型。我?？吹皆S多產(chǎn)品只做好日文的地區(qū)化，例如說僅使用OS X與iOS中的Hiragino Mincho來做內(nèi)文字，這會(huì)產(chǎn)生許多問題：

標(biāo)點(diǎn)不符合繁體中文規(guī)則。
前面所提缺字會(huì)讓內(nèi)文遇到一些字時(shí)顯得坑坑疤疤，就像剪貼的黑函一樣。
臺(tái)灣、日本、香港、中國(guó)使用的字形不同，而最好都能用該區(qū)域的標(biāo)準(zhǔn)字。

「角」字簡(jiǎn)繁之間有字形差

下面是OS X / iOS / Windows與Android中的中文系統(tǒng)字型，讓你能夠確實(shí)選對(duì)。有一些只預(yù)裝在新版系統(tǒng)上，而在iOS App上，可能要做些額外的工夫才能從Apple下載這些字型使用。

各作業(yè)系統(tǒng)中文系統(tǒng)字型列表

對(duì)于Android來說，Droid Sans Fallback這套系統(tǒng)字無論對(duì)中日韓文來說都不大及格，如果希望達(dá)到較好的排版效果，建議使用開源的「思源黑體」但下載任何有漢字的字形都要花上不少時(shí)間，除非預(yù)先Subset來輕減。你也可以使用一些動(dòng)態(tài)Subset的Webfont服務(wù)，或者干脆忘了Android系統(tǒng)（哎?。?

補(bǔ)充說明：在HTML 5中可以lang設(shè)定網(wǎng)頁(yè)語言，中文的代碼是zh，過去常用的是zh-hant與zh-hans來區(qū)分簡(jiǎn)繁體。但我更建議使用zh-TW、zh-CN、zh-HK來加上地區(qū)。雖然現(xiàn)在沒有顯著的差異，但香港的粵語造字未來可能從繁體中文中分離，加上地區(qū)描述未來可能會(huì)用得上，且向下兼容。

三、適當(dāng)?shù)男芯?/span>

不只是行距，字級(jí)也是個(gè)問題。但我沒辦法告訴你字級(jí)要多大才正確，畢竟現(xiàn)在熒幕尺寸與DPI差距頗大，但絕對(duì)不能以排英文的方式來排中文?；畎鏁r(shí)代，內(nèi)文常用的字級(jí)有兩種，一種是五號(hào)字，就是10.5pt（3.7mm），另一種是新五號(hào)，就是9pt（3.18mm）。內(nèi)文字盡量不要小于9pt。這里請(qǐng)以適當(dāng)?shù)拇笮∽孕杏?jì)算，畢竟熒幕與書籍是不同的。

但是行距有著正確的數(shù)字，一般而言中文行距介于1.5到2em之間，通常只要指定：p {line-height: 1.7em;}就能得到適當(dāng)?shù)男芯唷?/span>

四、對(duì)齊是萬靈丹

傳統(tǒng)中文活版

這張圖片是古老的中文活字印刷版，從這里可以顯現(xiàn)出重要的中文排版原則：所有的元素都是正方體。

但是從二十世紀(jì)開始使用標(biāo)點(diǎn)后，到了現(xiàn)代桌上出版時(shí)代，許多排版工具軟件都直接套用來自日本的「禁則處理」—即避頭尾點(diǎn)；加上與西方文字混排的狀況越來越多，以至于無法做到縱橫對(duì)齊的基礎(chǔ)。但是至少段落的頭尾還是需要對(duì)齊。這就是為什么對(duì)齊對(duì)電子書與長(zhǎng)文章來說十分重要的原因。

你可以使用以下CSS：p { text-align: justify; text-justify: ideographic;}，這能讓中文排版瞬間變得美觀許多。

五、沒有斜體

中文的書寫、印刷歷史中，「斜體」從來都不存在。拉丁文字中所稱的「italic」主要是指「手寫體」，但在中文傳統(tǒng)中，手寫體就是書法字，更貼近「Cursive」的定義，無論楷書、行書、草書都該屬于這類別。

于右任草書

但到了數(shù)位時(shí)代，硬套用拉丁文字的italic到中文上才開始出現(xiàn)了斜體字，這斜體字稱為oblique，也就是強(qiáng)制轉(zhuǎn)斜。這并不是個(gè)好作法。但在HTML中，有許多標(biāo)簽預(yù)設(shè)就會(huì)強(qiáng)制把字轉(zhuǎn)斜，若發(fā)生這種狀況，就會(huì)需要利用CSS來更正：em { font-style: normal; }。若你要使用<em>強(qiáng)調(diào)單字時(shí)，可以加粗、改成黑體、加底線或強(qiáng)調(diào)點(diǎn)，但就是不應(yīng)該用斜體。

六、段落區(qū)隔

段落區(qū)隔對(duì)于中文而言相當(dāng)重要，有著兩種方法：

1. 如書的呈現(xiàn)

中文的印刷書一般段落之間除非有其用意，不然不會(huì)加入空行或者間隔來區(qū)分段落，而是使用兩個(gè)全形空白（雜志等窄欄時(shí)使用一個(gè)）來縮排做出段落區(qū)隔。在分頁(yè)的情形下，可以在換頁(yè)時(shí)也能輕易地看出段落區(qū)隔，CSS的寫法是p { margin: 0; text-indent: 2em;}

日本電子書業(yè)界則是常用全形空白（U+3000, ideographic space）來取代text-indent。這可以避免在不同環(huán)境下都能有相同的表現(xiàn)，并且對(duì)齊得更適當(dāng)。遇到一些閱讀工具，象是Safari瀏覽器的閱讀器時(shí)，也不會(huì)因?yàn)镃SS被取代而讓縮排消失，這種方法可以保持。

2. 如網(wǎng)頁(yè)的呈現(xiàn)
但人們?cè)诰W(wǎng)頁(yè)上閱讀速度較快，如書般的版面會(huì)讓字排得過于密集產(chǎn)生壓力，通常使用margin-after（或margin-bottom）來區(qū)分：p { margin-after: 0.5em;}

雖然段落間要以多少空白區(qū)分沒有定論，但建議介于0.5到1em間，不要加入太多空白為佳。

七、楷體更像書

一般中文內(nèi)文常用serif字體，象是明/宋體。雖然sans-serif字體更現(xiàn)代，但在印刷書的世界里，卻鮮少看到。

傳統(tǒng)印刷書使用楷體的狀況

出處：大塊文化《葉嘉瑩作品集》

而一般中文印刷書中的：摘要、摘句、引言、對(duì)話、獨(dú)白、詩(shī)詞等，都會(huì)使用楷體來表示。所以若要讓文章讀起來更像印刷書，使用楷體會(huì)是不錯(cuò)的辦法。

當(dāng)然啦，使用黑體也是能令人接受的。

八、避頭點(diǎn) v.s. Break-all

對(duì)齊（Justification）是讓文章符合中文排版原則的數(shù)位解決之道，但這方法不是時(shí)時(shí)完美。有一個(gè)簡(jiǎn)單能夠重現(xiàn)的問題：

對(duì)齊拉寬字距

Break-all強(qiáng)制對(duì)齊

1.在雜志排版的窄欄，或者手機(jī)熒幕上；

2.在中文字中有著一個(gè)或多個(gè)長(zhǎng)的拉丁字；
3.使用對(duì)齊。

就會(huì)看到如圖中的樣貌，字距被強(qiáng)制擴(kuò)展，甚至超過一個(gè)字。這不僅出現(xiàn)在瀏覽器上，桌面排版工具亦然。

有個(gè)簡(jiǎn)單的處理方法，只要加上：p { word-break: break-all; }就能改善許多。但這種做法會(huì)讓西方文字被強(qiáng)制切斷，不甚完美。同時(shí)也會(huì)無視避頭點(diǎn)規(guī)則，讓逗號(hào)、句號(hào)出現(xiàn)在行頭，繁體中文可以接受，但不能用于簡(jiǎn)體。

為什么？因?yàn)楹?jiǎn)體中文的標(biāo)點(diǎn)如日文一般位于左下角，當(dāng)他們出現(xiàn)于行頭時(shí)會(huì)顯得極為奇怪。但位于中央的繁體中文標(biāo)點(diǎn)卻還可以接受。