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