2014-11-19 周周
@BobbyTung :本文最初以英文發(fā)表于Medium,主要是希望給外文圈的朋友在進(jìn)行Web與App等內(nèi)容服務(wù)中文地區(qū)化時(shí),能夠提供較好的文字排版呈現(xiàn)。在吳逸文、許翰文等設(shè)計(jì)圈的朋友催促下,以中文重新書(shū)寫(xiě),刪除部分「對(duì)外」的用語(yǔ),并且加上一些額外的信息,希望對(duì)中文圈也能有所幫助。
異軍崛起的一組特好用字體:《字體排行榜!2014年的35款字體素材打包下載》
東亞對(duì)于全球化的網(wǎng)絡(luò)服務(wù)來(lái)說(shuō),進(jìn)入時(shí)會(huì)遇到幾道墻壁隔離,第一道就是語(yǔ)言的障蔽(然后你會(huì)遇到中國(guó)偉大的防火墻)。中文、日文、韓文有著不同的排版規(guī)則,目前在W3C的參考資料中,日文排版需求是最為完整的文件,但是長(zhǎng)到大概很難讀完;韓國(guó)的諺文文字排版需求則是份量剛剛好。至于中文,我目前還在撰寫(xiě)草稿。
在我寫(xiě)完前,先整理出十項(xiàng)簡(jiǎn)單的原則,作為做好中文排版的參考。
編者注:序號(hào)文末有注釋。
無(wú)論你有沒(méi)有安裝額外的字型,各操作系統(tǒng)中有漢字的字體數(shù)量不在少數(shù),有些是簡(jiǎn)體、有些是繁體、有些是日文。感謝Unicode早期的中日韓越統(tǒng)一表意文字規(guī)劃1,這些字體大致上有著相當(dāng)?shù)墓餐ㄐ浴?/p>
但問(wèn)題在于,日文、繁體中文與簡(jiǎn)體中文的字形(Glyph)2不同,加上每種字型只會(huì)造出針對(duì)該種語(yǔ)言常用的漢字3,常會(huì)發(fā)生缺字而后退(Fallback)到其他字型的狀況,會(huì)使得文內(nèi)的字型不一致而打亂閱讀。所以,從一開(kāi)始就選對(duì)字型相當(dāng)重要。
那么,要如何判斷簡(jiǎn)體與繁體的字型呢?
很簡(jiǎn)單,輸入一個(gè)全角的逗號(hào)與句號(hào),套用你所要的字型,若這兩個(gè)符號(hào)位于正中央,就是繁體中文;若像日文一樣落到左下角,就是簡(jiǎn)體中文。若要進(jìn)一步區(qū)分簡(jiǎn)體中文與日文字型,可以輸入日文沒(méi)有的漢字,例如「啟(U+555F)」,若無(wú)法正常顯示,就是日文字型。
最后,如果沒(méi)有特別的原因4,中文原則上都使用全角標(biāo)點(diǎn)。
繁體與簡(jiǎn)體標(biāo)點(diǎn)的位置不同
補(bǔ)充說(shuō)明:有朋友來(lái)信詢(xún)問(wèn)這一段的敘述。標(biāo)點(diǎn)符號(hào)位置只是用來(lái)判斷簡(jiǎn)體字型與繁體字型的簡(jiǎn)單依據(jù)。并非繁體字一定要使用置中標(biāo)點(diǎn)才是對(duì)的。5
更進(jìn)一步,你可以在App的地區(qū)化或者CSS中指定對(duì)的系統(tǒng)字型。我??吹皆S多產(chǎn)品只做好日文的地區(qū)化,例如說(shuō)僅使用OS X與iOS中的Hiragino Mincho來(lái)做內(nèi)文字,這會(huì)產(chǎn)生許多問(wèn)題:
「角」字簡(jiǎn)繁之間有字形差
下面是OS X / iOS / Windows與Android中的中文系統(tǒng)字型,讓你能夠確實(shí)選對(duì)。有一些只預(yù)裝在新版系統(tǒng)6上,而在iOS App上,可能要做些額外的工夫才能從Apple下載這些字型使用。
各操作系統(tǒng)中文系統(tǒng)字型列表
對(duì)于Android來(lái)說(shuō),Droid Sans Fallback這套系統(tǒng)字無(wú)論對(duì)中日韓文來(lái)說(shuō)都不大及格,如果希望達(dá)到較好的排版效果,建議使用開(kāi)源的「思源黑體」但下載任何有漢字的字形都要花上不少時(shí)間,除非預(yù)先Subset來(lái)輕減。你也可以使用一些動(dòng)態(tài)Subset的Webfont服務(wù),或者干脆忘了Android系統(tǒng)(哎?。?/p>
補(bǔ)充說(shuō)明:在HTML 5中可以lang設(shè)定網(wǎng)頁(yè)語(yǔ)言,中文的代碼是zh,過(guò)去常用的是zh-hant與zh-hans來(lái)區(qū)分簡(jiǎn)繁體。但我更建議使用zh-TW、zh-CN、zh-HK來(lái)加上地區(qū)。雖然現(xiàn)在沒(méi)有顯著的差異,但香港的粵語(yǔ)造字未來(lái)可能從繁體中文中分離,加上地區(qū)描述未來(lái)可能會(huì)用得上,且向下兼容。
不只是行距,字級(jí)也是個(gè)問(wèn)題。但我沒(méi)辦法告訴你字級(jí)要多大才正確,畢竟現(xiàn)在屏幕尺寸與DPI差距頗大,但絕對(duì)不能以排英文的方式來(lái)排中文?;畎鏁r(shí)代,內(nèi)文常用的字級(jí)有兩種,一種是五號(hào)字,就是10.5pt(3.7mm),另一種是新五號(hào),就是9pt(3.18mm)。7內(nèi)文字盡量不要小于9pt。這里請(qǐng)以適當(dāng)?shù)拇笮∽孕杏?jì)算,畢竟屏幕與書(shū)籍是不同的。
但是行距有著正確的數(shù)字,一般而言中文行距介于1.5到2em之間,通常只要指定:
p {line-height: 1.7em;}
就能得到適當(dāng)?shù)男芯唷?/p>
傳統(tǒng)中文活版這張圖片是古老的中文活字印刷版,從這里可以顯現(xiàn)出重要的中文排版原則:所有的元素都是正方體。
但是從二十世紀(jì)開(kāi)始使用標(biāo)點(diǎn)后,到了現(xiàn)代桌面版時(shí)代,許多排版工具軟件都直接套用來(lái)自日本的「禁則處理」—即避頭尾點(diǎn);加上與西方文字混排的狀況越來(lái)越多,以至于無(wú)法做到縱橫對(duì)齊的基礎(chǔ)。但是至少段落的頭尾還是需要對(duì)齊。這就是為什么對(duì)齊對(duì)電子書(shū)與長(zhǎng)文章來(lái)說(shuō)十分重要的原因。
你可以使用以下CSS:
p { text-align: justify; text-justify: ideographic;}
這能讓中文排版瞬間變得美觀許多。
中文的書(shū)寫(xiě)、印刷歷史中,「斜體」從來(lái)都不存在。拉丁文字中所稱(chēng)的「italic」主要是指「手寫(xiě)體」8,但在中文傳統(tǒng)中,手寫(xiě)體就是書(shū)法字,更貼近「Cursive」的定義,無(wú)論楷書(shū)、行書(shū)、草書(shū)都該屬于這類(lèi)別。
于右任草書(shū)但到了數(shù)字時(shí)代,硬套用拉丁文字的italic到中文上才開(kāi)始出現(xiàn)了斜體字,這斜體字稱(chēng)為oblique,也就是強(qiáng)制轉(zhuǎn)斜。這并不是個(gè)好作法。但在HTML中,有許多標(biāo)簽?zāi)J(rèn)就會(huì)強(qiáng)制把字轉(zhuǎn)斜,若發(fā)生這種狀況,就會(huì)需要利用CSS來(lái)更正:
em { font-style: normal; }
若你要使用<em>強(qiáng)調(diào)單字時(shí),可以加粗、改成黑體、加底線或強(qiáng)調(diào)點(diǎn),但就是不應(yīng)該用斜體。
段落區(qū)隔對(duì)于中文而言相當(dāng)重要,有著兩種方法:
1. 如書(shū)的呈現(xiàn)
中文的印刷書(shū)一般段落之間除非有其用意,不然不會(huì)加入空行或者間隔來(lái)區(qū)分段落,而是使用兩個(gè)全角空白(雜志等窄欄時(shí)使用一個(gè))來(lái)縮排做出段落區(qū)隔。在分頁(yè)的情形下,可以在換頁(yè)時(shí)也能輕易地看出段落區(qū)隔,CSS的寫(xiě)法是:
p { margin: 0; text-indent: 2em;}
日本電子書(shū)業(yè)界則是常用全角空白(U+3000, ideographic space)來(lái)取代text-indent。這可以避免在不同環(huán)境下都能有相同的表現(xiàn),并且對(duì)齊得更適當(dāng)。遇到一些閱讀工具,像是Safari瀏覽器的閱讀器時(shí),也不會(huì)因?yàn)镃SS被取代而讓縮排消失,這種方法可以保持。9
2. 如網(wǎng)頁(yè)的呈現(xiàn)
但人們?cè)诰W(wǎng)頁(yè)上閱讀速度較快,如書(shū)般的版面會(huì)讓字排得過(guò)于密集產(chǎn)生壓力,通常使用margin-after(或margin-bottom)來(lái)區(qū)分:
p { margin-after: 0.5em;}
雖然段落間要以多少空白區(qū)分沒(méi)有定論,但建議介于0.5到1em間,不要加入太多空白為佳。10
一般中文內(nèi)文常用serif字體,像是明/宋體。雖然sans-serif字體更現(xiàn)代,但在印刷書(shū)的世界里,卻鮮少看到。11
傳統(tǒng)印刷書(shū)使用楷體的狀況
出處:大塊文化《葉嘉瑩作品集》而一般中文印刷書(shū)中的:摘要、摘句、引言、對(duì)話、獨(dú)白、詩(shī)詞等,都會(huì)使用楷體來(lái)表示。所以若要讓文章讀起來(lái)更像印刷書(shū),使用楷體會(huì)是不錯(cuò)的辦法。
當(dāng)然啦,使用黑體也是能令人接受的。
對(duì)齊(Justification)是讓文章符合中文排版原則的數(shù)字解決之道,但這方法不是時(shí)時(shí)完美。有一個(gè)簡(jiǎn)單能夠重現(xiàn)的問(wèn)題:
對(duì)齊拉寬字距Break-all強(qiáng)制對(duì)齊
1.在雜志排版的窄欄,或者手機(jī)屏幕上;
2.在中文字中有著一個(gè)或多個(gè)長(zhǎng)的拉丁字;
3.使用對(duì)齊。
就會(huì)看到如圖中的樣貌,字距被強(qiáng)制擴(kuò)展,甚至超過(guò)一個(gè)字。這不僅出現(xiàn)在瀏覽器上,桌面排版工具亦然。
有個(gè)簡(jiǎn)單的處理方法,只要加上:
p { word-break: break-all; }
就能改善許多。但這種做法會(huì)讓西方文字被強(qiáng)制切斷,不甚完美。同時(shí)也會(huì)無(wú)視避頭點(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)卻還可以接受。
對(duì)于中文文章的內(nèi)文而言,你不需要調(diào)整字距。有些香港的網(wǎng)站會(huì)為文章加上字距,但絕對(duì)不是好的做法。
增加字距會(huì)讓讀者無(wú)法確認(rèn)行文方向?yàn)槭裁??別忘了中文是雙向文字,你可以由上往下讀,也可以由左向右讀。行距是提供讀者行文方向的重要依據(jù),若你加上字距,就得加大行距,最后讓文章變得不能閱讀。當(dāng)然不會(huì)加字距加得那么夸張,但為了提供易讀性,請(qǐng)讓字距保持為0。請(qǐng)記得:
不要調(diào)整內(nèi)文的字距,但標(biāo)題可以變動(dòng)。12
簡(jiǎn)繁常用字的對(duì)應(yīng)表這是簡(jiǎn)體與繁體中文常用字的對(duì)應(yīng)表。雖然簡(jiǎn)體與繁體許多字并不使用相同的碼位,但大多數(shù)的轉(zhuǎn)換工具都能透過(guò)對(duì)應(yīng)表來(lái)簡(jiǎn)單匹配。
不過(guò)問(wèn)題來(lái)了,這表格中最大的問(wèn)題就是那267個(gè)一簡(jiǎn)多繁的字。在轉(zhuǎn)換時(shí)若不使用字典作為輔助工具,就會(huì)出現(xiàn)很大的問(wèn)題,像是:
所以,簡(jiǎn)轉(zhuǎn)繁,不校不行。13
以上就是簡(jiǎn)單的排版作法,花不上太多時(shí)間就能讓文章排得易于閱讀,不妨一試。
補(bǔ)充說(shuō)明:本文中未提及中文與拉丁文字混排時(shí)的間距問(wèn)題。目前技術(shù)上還未能有最佳處理方法,待日后再提及。14
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.jghy.net