2019-12-10 資深UI設(shè)計(jì)者
給大家看兩張圖，這兩頁(yè)的文字內(nèi)容相同，你更想看哪本？
不出意外的話，大家應(yīng)該會(huì)選右手邊的吧（選左邊的請(qǐng)自覺去面壁）。（所拍書籍為《西文字體》，高岡昌生 ）
雖然大家不是專業(yè)做文字排印的，但對(duì)文字排版的感知力，其實(shí)是生而有之的。
中文也是如此，優(yōu)秀的出版社（譯林出版社、廣西師范大學(xué)出版社等），為了讓閱讀體驗(yàn)順暢、版面舒適，在文字排印上做了許多工序。
正是這些工序，提升了書籍正文的閱讀體驗(yàn)。想要在閱讀軟件上打造優(yōu)秀的閱讀頁(yè)，這些工序正是我們需要借鑒的。
通過設(shè)計(jì)師與開發(fā)的共同努力，我們最近完成了這一文字排版能力的建造，讓閱讀頁(yè)的效果能夠更上一層樓。
最終效果如下：
本文將從以下幾個(gè)部分說(shuō)明這些工序存在的理由、實(shí)現(xiàn)的邏輯等。
細(xì)致的來(lái)看，文章包括以下內(nèi)容：
通過前期的大量學(xué)習(xí)與調(diào)研（專家觀點(diǎn)：小林章先生、鳥海修先生、劉慶先生等人關(guān)于字體排印 or 字體設(shè)計(jì)的講座、W3C 中文排版需求（強(qiáng)烈建議大家看這個(gè)）、孔雀計(jì)劃的文章、字體排印的專著：《平面設(shè)計(jì)中的網(wǎng)格系統(tǒng)》、《字體排印》、《西文字體》等；本次改版幾乎所有的功能與邏輯都參照了以上專著與文章。）
我們把文字書排版時(shí)的工序，總結(jié)為「文字排印要遵循的三個(gè)原則」：
原則說(shuō)明
中文排版中，字與字之間的間距被稱為「字間距」。
文字間距會(huì)影響閱讀節(jié)奏。字間距大的文章，閱讀速度會(huì)變慢。因此，散文、詩(shī)歌在排版時(shí)，會(huì)刻意調(diào)大字間距。
下面的圖，僅憑自己感受，選一張更好的:
不出意外的話，應(yīng)該是覺得下圖更好看。
嘗試默讀一下，你會(huì)發(fā)現(xiàn)，上邊的圖片，最后兩行字間距被拉大，閱讀速度放慢；而這不是作者的本意，換言之，這會(huì)破壞閱讀節(jié)奏。
因此，我們把「保證字間距恒定」作為首要原則，來(lái)保障閱讀節(jié)奏感。
備注（建議第二次看文章的時(shí)候再讀）：需要說(shuō)明的是，部分字面較大的字體（方正博雅宋、蘭亭黑等）在書籍排版時(shí)為了契合書籍內(nèi)容的調(diào)性，有時(shí)會(huì)刻意設(shè)置字間距，這與「字間距保持恒定」的原則并不沖突。在電子閱讀軟件中，由于無(wú)法針對(duì)特定書籍進(jìn)行調(diào)整，因此本次設(shè)計(jì)實(shí)際上是保持「密排」(字與字之間沒有額外添加字間距，保留字體原始的間距)。
工序
行長(zhǎng)是字號(hào)的整數(shù)倍。相同字號(hào)下，漢字字寬固定（就是字號(hào)本身），漢字標(biāo)點(diǎn)的字寬同樣也是字號(hào)本身（除了個(gè)別標(biāo)點(diǎn)之外，例如破折號(hào)）
漢字排版時(shí)，沒有額外字間距的情況下，是上圖所示的字面框依次密排。
因?yàn)橹形臅恼呐虐娉Ｓ脙啥藢?duì)齊，如果行長(zhǎng)不是字號(hào)的整數(shù)倍，則漢字之間會(huì)有異常的行間距出現(xiàn)。
更嚴(yán)重的是：閱讀軟件字號(hào)可變的情況下，行長(zhǎng)不可能做到適應(yīng)所有字號(hào)且字間距不會(huì)被拉大。
行長(zhǎng)是字號(hào)的整數(shù)倍是中文字體排印中標(biāo)點(diǎn)擠壓等的前提。
——《孔雀計(jì)劃》，原文鏈接：https://thetype.com/2017/07/12513/
在閱讀軟件中，隨著字號(hào)調(diào)整，如果沿用「版心寬度固定」的思路，難免存在字間距被拉大的情況。
對(duì)此，我們調(diào)查了國(guó)內(nèi)外知名中文閱讀軟件，發(fā)現(xiàn)：KindleAPP 能隨著字號(hào)變化自由變動(dòng)，但這會(huì)導(dǎo)致：改變字號(hào)大小時(shí)，版心寬度略微變化。
有此顧慮，我們做了一個(gè)測(cè)試。結(jié)果證明，大家不會(huì)發(fā)現(xiàn)版心寬度有變化。這說(shuō)明用戶投入到閱讀當(dāng)中、調(diào)整字號(hào)時(shí)，并不會(huì)因?yàn)榘嫘膶挾茸兓胁贿m，甚至不會(huì)感知。通過測(cè)試，打消了我們的顧慮。
最終我們大膽采取了「版心寬度跟隨字號(hào)調(diào)整而變化」，來(lái)確?！感虚L(zhǎng)是字號(hào)的整數(shù)倍」。
雖然「版心寬度跟隨字號(hào)變化」并沒有不適，但我們需要保證在多種屏幕尺寸、字號(hào)下，版心占據(jù)屏幕的區(qū)域都舒適。
面對(duì)這個(gè)問題，我們制定了一個(gè)公式，可根據(jù)屏幕大小、字體大小等，自動(dòng)調(diào)整版心寬度。確?！感虚L(zhǎng)是字號(hào)的整數(shù)倍」的同時(shí)，保證頁(yè)面美觀。
標(biāo)點(diǎn)符號(hào)「優(yōu)先推入式避頭尾」。如圖所示，為宋抄本《孫子算經(jīng)》；在古代，書籍排版可以做到字間距恒定，原因是古代不存在「標(biāo)點(diǎn)」，也就沒有「標(biāo)點(diǎn)避頭尾」導(dǎo)致的種種問題。
而現(xiàn)代漢語(yǔ)存在標(biāo)點(diǎn)符號(hào)，有的標(biāo)點(diǎn)不能放在行首，有的不能放在行尾。
我們把不能放在行首的標(biāo)點(diǎn)叫做避頭標(biāo)點(diǎn)，如逗號(hào)、頓號(hào)、句號(hào)等；把不能放置在行尾的叫做避尾標(biāo)點(diǎn)，如前引號(hào)、前括號(hào)等。
「推出式」避頭尾是大部分閱讀軟件的做法：
以避頭標(biāo)點(diǎn)為例，若此標(biāo)點(diǎn)被排到了行首，「推出式」 的做法是從上一行拉一個(gè)字放在本行。如下圖所示：
然而這么做的話，上一行的字間距被拉大，打斷了閱讀節(jié)奏（閱讀節(jié)奏放慢）。
我們發(fā)現(xiàn)專業(yè)的排版軟件（Indesign）和出版社（廣西師范大學(xué)理想國(guó)系列、人民文學(xué)出版社、譯林出版社等知名出版社）的做法是「優(yōu)先推入式避頭尾」，這種方式可以很好地解決「僅推出式」造成的問題。如下圖所示：
△ 《少數(shù)派報(bào)告》譯林出版社
通過「優(yōu)先推入式避頭尾」，上圖中標(biāo)出的雙引號(hào)的寬度被擠壓了一半，如果它保留為「全寬」，就沒辦法排在這一行，這就是「優(yōu)先推入式避頭尾」的最終效果。
以避頭尾標(biāo)點(diǎn)為例，「優(yōu)先推入式」避頭尾在這種情況下會(huì)將本行內(nèi)標(biāo)點(diǎn)寬度擠壓，為避頭尾的標(biāo)點(diǎn)騰出空間，如下圖所示：
上面的圖可以看到：通過「優(yōu)先推入式標(biāo)點(diǎn)擠壓」，第一行的字間距沒有被拉大，保持了密排。
通過將本行內(nèi)的標(biāo)點(diǎn)寬度進(jìn)行擠壓后，騰出了空間給本來(lái)排不到的逗號(hào)，確保了字間距的恒定。然后只有在本行內(nèi)標(biāo)點(diǎn)無(wú)法壓縮出足夠空間時(shí)，才會(huì)選擇「推出式」的處理方式。
因此這種處理方式叫做「優(yōu)先推出式」標(biāo)點(diǎn)避頭尾。
行內(nèi)標(biāo)點(diǎn)擠壓。因?yàn)橄噜彉?biāo)點(diǎn)擠壓、行首段首擠壓，會(huì)出現(xiàn)部分標(biāo)點(diǎn)符號(hào)占據(jù)半寬的情況。這種時(shí)候，一行的末尾可能正好有漢字或標(biāo)點(diǎn)軋?jiān)诹诉吙蛏?，如下圖所示，為漢字軋?jiān)谶吙虻那闆r：
遇到這種情況，通過擠壓行內(nèi)標(biāo)點(diǎn)寬度，從而騰出空間給最后一個(gè)字。這種做法叫做「行內(nèi)標(biāo)點(diǎn)擠壓」
標(biāo)點(diǎn)懸掛的邏輯和配套內(nèi)容。存在另外一種處理方式來(lái)避頭，叫做「標(biāo)點(diǎn)懸掛」，即將標(biāo)點(diǎn)懸掛在文本框外。
然而這種采用「標(biāo)點(diǎn)懸掛」，需要配套做「行尾強(qiáng)制半寬」，如下圖所示：
然而行尾強(qiáng)制半寬帶來(lái)的問題是字間距被拉大，違反了原則一（盡量保證字間距恒定），對(duì)于寬度有限的手機(jī)屏幕，盡量不要改動(dòng)。因此最終我們沒有采用標(biāo)點(diǎn)懸掛的處理方式。
Type is Beautiful 網(wǎng)站中對(duì)此有詳盡的思考，如有興趣請(qǐng)看：https://thetype.com/kongque/
原則說(shuō)明
書籍排版中，文字所在的范圍稱為「版心」。
經(jīng)驗(yàn)老道的文字排印設(shè)計(jì)師，檢查正文排版效果時(shí)，最常用的方法是：離遠(yuǎn)看頁(yè)面，就像蒙上一層磨砂玻璃一樣，檢查整個(gè)頁(yè)面是否疏密均衡（《字體排印》，高岡昌生先生），也叫做「灰度均衡」（龜倉(cāng)雄策先生稱之為「濃淡勻稱」，from《疾風(fēng)迅雷》）?；叶染獾陌嫘目梢宰屨麄€(gè)頁(yè)面美觀的同時(shí)，也保證了讀者閱讀中不會(huì)被突然的空白打斷。
如下圖所示，第一張圖因?yàn)橐恍┰驅(qū)е铝隧?yè)面中有許多「窟窿」，顯得零碎，灰度明顯不均衡。而第二張圖，通過「標(biāo)點(diǎn)擠壓」將這些「窟窿」填上，整個(gè)版面更像是一個(gè)整體，灰度更均衡。
看倒數(shù)第二行的「乃跪地罪曰：‘大人何故’」兩個(gè)標(biāo)點(diǎn)連續(xù)的地方，從整體的角度看，會(huì)不會(huì)覺得這里有一個(gè)窟窿？
總的來(lái)說(shuō)，灰度均衡的版面整體感更強(qiáng)、視覺上更舒適，因此也是相當(dāng)重要的原則。
工序：
相鄰標(biāo)點(diǎn)擠壓
眾所周知的，漢字是方塊字，在字體設(shè)計(jì)時(shí)會(huì)被放在一個(gè)方形里；中文標(biāo)點(diǎn)同樣也會(huì)被放置于同等大小的方框之中，如下圖所示。
如上圖所示，中文標(biāo)點(diǎn)所占體積一般遠(yuǎn)小于漢字，因此當(dāng)多個(gè)標(biāo)點(diǎn)符號(hào)連續(xù)排列時(shí)，會(huì)讓版面在這里好像有一個(gè)窟窿。專業(yè)的中文排版中會(huì)做的事情是「相鄰標(biāo)點(diǎn)擠壓」。如下圖所示：
如上圖所示，有連續(xù)標(biāo)點(diǎn)存在時(shí)，通過壓縮標(biāo)點(diǎn)所占的寬度，從而補(bǔ)上「窟窿」。
原則說(shuō)明
與西文書籍的左側(cè)對(duì)齊不同，中文書籍（橫排）傳統(tǒng)而言是講究?jī)啥藢?duì)齊。這是被大多數(shù)國(guó)人認(rèn)可的中文排版方式，因此不再贅述。
工序
行首段首標(biāo)點(diǎn)擠壓。當(dāng)行首出現(xiàn)標(biāo)點(diǎn)符號(hào)，會(huì)感覺左側(cè)不齊：
可以看到，處理前版心左側(cè)因?yàn)橛袉我?hào)，看起來(lái)第一行沒有和第二行左對(duì)齊，處理后效果回歸正常。同樣的，段首的標(biāo)點(diǎn)也需要擠壓。
知道了以上內(nèi)容，我們需要把它變成開發(fā)需要的邏輯。具體如下：
1. 相鄰標(biāo)點(diǎn)擠壓邏輯
在 W3C 的《中文排版需求》中，對(duì)相鄰標(biāo)點(diǎn)擠壓的具體做法為：
通過梳理，我們將其簡(jiǎn)化描述為 4個(gè)邏輯（實(shí)際邏輯與 W3C 基本一致）：
備注：成對(duì)出現(xiàn)的標(biāo)點(diǎn)叫做夾注符，如雙引號(hào)、書名號(hào)等；其中細(xì)分為開始夾注符與結(jié)束夾注符。
此外，我們注意到，一些出版書在以上邏輯之外，把問號(hào)與嘆號(hào)與[頓、逗、句]歸為一類，實(shí)際效果良好，因此出于問號(hào)與嘆號(hào)同樣占據(jù)字面不多的邏輯，采用了這種分類法。然而隨后在走查階段發(fā)現(xiàn)線上部分字體的問號(hào)與句號(hào)占據(jù)字面的位置不同。
這促使我們關(guān)注到標(biāo)點(diǎn)在字面中占據(jù)的位置，我們梳理了客戶端所有字體的中文標(biāo)點(diǎn)。
發(fā)現(xiàn)漢儀樂喵、方正蘭亭黑、漢儀啟體等幾款字體的問號(hào)字面占據(jù)異常，如果進(jìn)行相鄰標(biāo)點(diǎn)擠壓可能會(huì)造成標(biāo)點(diǎn)粘連的情況，因此最終我們決定保持問號(hào)與嘆號(hào)不參與相鄰標(biāo)點(diǎn)擠壓。
2. 避頭、避尾標(biāo)點(diǎn)匯總表：
以上邏輯實(shí)施需要首先讓程序判定哪些標(biāo)點(diǎn)是避頭尾標(biāo)點(diǎn)，因此我們梳理了所有漢字標(biāo)點(diǎn)并分為避頭、避尾兩類（部分標(biāo)點(diǎn)即避頭又避尾）。
漢字標(biāo)點(diǎn)符號(hào)與西文的標(biāo)點(diǎn)符號(hào)許多時(shí)候僅憑肉眼難以分辨（如,與，前者是西文標(biāo)點(diǎn)中的逗號(hào)，后者是中文標(biāo)點(diǎn)中的逗號(hào)），因此我們使用Unicode 碼為每一個(gè)標(biāo)點(diǎn)精準(zhǔn)劃分，確保不會(huì)造成錯(cuò)誤。
3. 行內(nèi)標(biāo)點(diǎn)擠壓與「優(yōu)先推入式避頭尾」邏輯：
「行內(nèi)標(biāo)點(diǎn)擠壓」與「優(yōu)先推入式避頭尾」其實(shí)本質(zhì)上都是對(duì)行內(nèi)標(biāo)點(diǎn)寬度進(jìn)行壓縮，因此在邏輯上歸為一類。根據(jù)具體解決邏輯的不同將其分為以下四類：
針對(duì)這四種情況要做的具體事項(xiàng)補(bǔ)充在右側(cè)：
至于推出邏輯，則稍簡(jiǎn)單些，書籍中有時(shí)候會(huì)遇到連續(xù)幾個(gè)標(biāo)點(diǎn)符號(hào)都是避尾標(biāo)點(diǎn)的情況（或連續(xù)避頭標(biāo)點(diǎn)），因此對(duì)推出的邏輯設(shè)定為：
備注：國(guó)內(nèi)知名的字體設(shè)計(jì)與排印網(wǎng)站 Type is Beautiful 中有介紹，行內(nèi)標(biāo)點(diǎn)擠壓的方式有多種，「開明式」「全部半寬式」「平均式」等等…我們選擇了「平均式」（有權(quán)重），開發(fā)難度會(huì)稍小些、效果也更可控制，不再贅述。
4. 整體邏輯流程圖
但是僅僅通過文字性質(zhì)的描述還不夠，我們需要能讓程序理解的邏輯。
由于部分處理方式之間互相干擾，因此根據(jù)這四種方式影響的內(nèi)容不同，以「對(duì)其他處理方式的干擾程度」從高到低排序，并串聯(lián)成整整體的邏輯圖，以保證整體邏輯簡(jiǎn)單、不重復(fù)，如下圖所示。
在此基礎(chǔ)上，我們將文章中第二部分所梳理的邏輯細(xì)節(jié)填充進(jìn)流程圖內(nèi)，并合并重復(fù)流程，最終獲得如下流程圖，方便開發(fā)理解和工作：
5. 小結(jié)
通過「避頭尾標(biāo)點(diǎn)列表」「可擠壓標(biāo)點(diǎn)與擠壓空間」「廣義的推入邏輯具體說(shuō)明」「整體邏輯流程圖」四個(gè)文件，我們可以順暢的將設(shè)計(jì)要求傳達(dá)給開發(fā)。
最終，通過這些工序，我們可以在最大限度上保證字間距恒定、版面齊整和內(nèi)容灰度均衡。提升閱讀流暢性和閱讀頁(yè)的體驗(yàn)。
文字排印作為一個(gè)古老的技藝，從排版工人操作實(shí)體字模的時(shí)代，經(jīng)歷了照排時(shí)代，來(lái)到了數(shù)字排版的當(dāng)下，排版的自由度和效率已然成倍提高，然而由于許多原因至今這些排版的工序只在出版社等專業(yè)領(lǐng)域流通。
相對(duì)于紙質(zhì)書籍，電子閱讀在易攜帶性、閱讀方便性、多媒體輔助閱讀上有得天獨(dú)厚的優(yōu)勢(shì)，然而最基礎(chǔ)的閱讀體驗(yàn)有時(shí)候不如紙質(zhì)書籍，我們希望通過我們的努力，電子閱讀在未來(lái)，能夠讓讀者獲得全面超過紙質(zhì)書籍的閱讀體驗(yàn)。
當(dāng)然，文字在移動(dòng)端的體驗(yàn)上限遠(yuǎn)不止如此，一些產(chǎn)品僅靠網(wǎng)格系統(tǒng)與字體排印加上優(yōu)秀的字體，已經(jīng)做出了令人驚艷的體驗(yàn)。
如上圖所示，通過優(yōu)秀的明朝體、網(wǎng)格系統(tǒng)，物書堂出品的幾個(gè)詞典 APP 的界面讓人驚艷，文字之美還有很多可能，這也是我們的努力方向。我們也知道，當(dāng)前客戶端內(nèi)中英混排、英文排版等方面，依然有進(jìn)步空間，未來(lái)也會(huì)進(jìn)一步完善。
文章來(lái)源：優(yōu)設(shè)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://tweetduck.com