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