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