你未必知道的CSS故事:揭開leading的面紗
幾乎所有CSS書在講到line-height
屬性的時候,都會提到傳統排版中的一個術語——leading。這個leading到底指什麼,它在漢字排版中叫什麼,它與CSS中的line-height
,也就是“行高”有什麼關係?本文試圖拔開歷史的迷霧,把事實真相呈現在讀者眼前。
從傳承說起
作為網頁排版語言,CSS跟其他專業或大眾化的排版軟體一樣,同樣植根於傳統出版。傳統出版,特別是鉛活字印刷時代被稱為“鉛與火”的時代。而通過計算機軟體排版印刷的時代,被稱為“光與電”的時代。從“鉛與火”到“光與電”的變遷,並非簡單的取代和革命,更多的還是對人類出版實踐的傳承。
不用說InDesgin、QuarkXPress、Acrobat等專業的排版軟體,只要用過Word、WPS等文書處理軟體的人,都能說出一堆出版的術語來。可想而知,這些軟體的設計和編碼,一定是以傳統出版實踐為依據的。當然,這些排版軟體都以排印以頁為單位的紙質書為目的,這一點與CSS不同。CSS的目標是可以無限延長的網頁。但除此之外,CSS與排版軟體並沒有本質區別。在CSS標準中,各種排版術語隨處可見。從人工揀字到計算機排版,從紙面到網頁,工具的革命、介質的更迭,並不代表可以無視過去,藐視傳統。相反,瞭解傳統排版實踐,是真正理解CSS標準和相關術語的必要一環。
在《CSS設計指南(第3版)》中,作者同樣提到了leading。甚至還說,CSS中的line-height
屬性對應於印刷行業常說的leading,原文截圖如下。
我們都知道,line-height
是“行高”的意思。難道排版中的leading是CSS中的“行高”?要解決這個問題,首先得知道leading的確切含義。
神祕的鉛空
為了弄清楚leading最初的含義,我在網上找到了以下圖片:
(圖片出處:http://www.normanfournier.com/capabilities/typography11.html)
(圖片出處:http://www.creativepro.com/article/just-say-no-automatic-leading)
第一張圖片告訴我們,兩行文字之間的距離(或空白)是leading。而第二張圖片更直觀:兩行字模之間有一條薄薄的填充材料,那就是lead。
有讀者可能會問:“第二張圖片中的Lead在中文活字排版中叫什麼呢?”問得好!須知,瞭解傳統出版是理解CSS的必由之路。幸好我手頭有一本戰士出版社1981年12月版的《出版工作手冊》,這本書第二章“排字部分”有一個詞條:
就此,我又請教了公司校對董秋霞師傅。董師傅跟說我,排版工在揀字拼版時,會根據版心寬度自己裁割鉛條。鉛條長度稍短於一行字長,以便不妨礙將來固定版面時壓緊字模。鉛條高度低於鉛字高度,在印件上產生空白。
Slug、Em Quad是什麼?
細心的讀者會追問:第二張圖裡的Slug、1-Em Quad又是什麼?Slug應該也是鉛條,或者叫厚鉛條。Em Quad中的Em指字型大小(英文字型以大寫字母M標稱點大小,em就是M的發音 :),另可參見維基百科中的相關詞條:http://en.wikipedia.org/wiki/Em_(typography)),Quad就是方形空鉛。
根據《出版工作手冊》:“凡是印件的版面之內沒有印跡的地方,都要用空鉛填充。空鉛的大小是以該字號全身鉛字為基準,比全身鉛字小的稱分數空鉛,如相等於五號鉛字一半大小的叫五號對開空鉛,三分之一或四之一大小的叫五號三分或四分空鉛,如相等於五號鉛字二個大小的叫五號雙連空鉛,三個或四個大小叫三連空鉛或四連空鉛(又稱五號三倍空或四倍空)。以此類推。為了節約材料,有時把大空鉛中間挖空,叫做空心空鉛。”
對應到漢字排版,1-Em Quad就是N 點全身空鉛,2-Em Quad就是N 點雙連空鉛。總之,都是為了在版面中創造空白,鉛空主要用在行首尾,鉛條主要填在行間。
相信所有人都能看得出來,leading其實就是我們常說的行間距!行間距跟行高可不是一個概念。難道《CSS設計指南(第3版)》錯了?別急,事情又有了曲折。
微妙的歧義
假如我一開始不是上網搜尋圖片,而是查文字資料呢?《牛津高階英漢雙解詞典(第7版)》:
俗話說:“眼見為實。”(稍後你會發現,眼見也不一定為實!)看了前面的圖示,再讀上面詞典的解釋——特別是讀到釋義括號中的“相鄰兩個文字行之間的距離”時,你一定認為“行距”就是鉛條的高度!應該說,這恐怕正是我們中的大多數人所理解的“行距”的概念。畢竟,行距就是加在兩行之間嘛,增大行距也是增大兩行之間的距離呀。換句話說,假設兩行文字的字型大小是10點(point,一點為一英寸的1/72,即0.35146毫米。我國規定一點為0.35毫米),即3.5毫米高,鉛條厚度2毫米,那麼這兩行文字的行距是2毫米,對吧?——很遺憾,不對!
雖然鉛字排版時代的leading確實是指兩行之間的鉛條,但現代排版軟體中的leading指的則是兩行文字基線之間的距離。以下是維基百科中的解釋(http://en.wikipedia.org/wiki/Leading):
英文看著可能不太舒服,以下是譯文:
那什麼是文字行的基線之間的距離呢?還是用圖來說明吧。
英文字型有基線(baseline)和中線(meanline),這兩條線之間就是所謂的“x-height”,即小寫字母x的高度。基線之上的部分是上伸區域(ascent),基線之下的部分是下伸區域(descent)。小寫字母超過中線之上的部分(如d上面的豎劃)稱字母的上伸部分(ascender),超過基線之下的部分(如字母q下面的豎劃)稱字母的下伸部分(descender)。英文大寫字母都位於基線以上,頂部稍低於小寫字母上伸部分的頂線1。
1. 這篇短文介紹了緊排(kerning)和字元間距(tracking):http://www.brightlemon.com/blog/typography-01-font-basics。
如上圖所示,兩行文字的基線之間的距離是現代排版軟體中所說的行距(leading)。這樣定義行距是有意義的,因為知道了行距和行數,就能算出版心的高度,而版心高度加上、下頁邊距就是頁面高度。下圖就是InDesign中調整行距的“字元”皮膚,其中的圖示清楚地表明,這裡行距實際上就是一行的高度。
簡言之,當我們在Word、WPS,或者InDesign、QuarkXPress中調整行距時,我們設定的其實是包括字型大小在內的文字行的高度,而不僅是文字行之間的距離。當你聽到別人說“行距”或“行間距”時,一定要搞清楚他說的到底是哪個距離。有人可能會說:“‘行間距’也可以理解為‘兩行文字基線之間的距離’吧”……算了,這事兒不能抬槓,反正意思你懂了。
明白了就裡之後,那是不是可以認為《CSS設計指南(第3版)》說“line-height
屬性對應於印刷行業常說的leading”沒有問題了呢?別急,一波總要三折嘛。
CSS的定義
如果說“行距”和“行間距”尚有一字之差,可以勉強分辨,那我們對相同字形的leading就更要多加小心了。如前所述,同樣是leading,可能代表兩個不一樣而且容易混淆的含義:一是填充在兩行文字之間的鉛條,二是兩行文字基線之間的距離。
那麼,CSS中的leading到底採用了哪個意思呢?答案是前者,即填充在兩行文字間的鉛條。請參考下面的示意圖。
(圖片出處:http://doctype.com/calculating-lineheight-from-comp)
CSS 2.1第10.8.1節(http://www.w3.org/TR/CSS21/visudet.html#leading)明確規定(參考上圖):
leading = line-height
- font-size
其中一半leading加到文字上方,另一半leading加到文字下方。這一點與前面提到的排版軟體對leading的實現有所不同,排版軟體一般把leading加到文字上方。比如,如果字型大小是10點,而行距為18點,則多出的8點在InDesign中會被加在文字上方(為清晰起見,這裡為文字加了下劃線)。
而在CSS中,leading(0.8倍font-size
的計算值)被平均分成了兩半,分別加到文字行上方和下方。
上圖的HTML和CSS程式碼分別如下所示。HTML:
<h3>The way C works</h3> <div> Computers really only understand one language: machine code, <span>a binary stream of 1s and 0s</span>. You convert your C code into machine code with the aid of a compiler. </div>
CSS:
div { line-height: 1.2; /*省略其他樣式*/ } span { line-height: 2; /*省略其他樣式*/ }
另外,CSS 2.1還建議把line-height
屬性的預設值,也就是normal
值設定為字型大小的1.0到1.2倍。這也是為什麼把塊級文字元素的上下外邊距都去掉(margin:0;
),其元素盒子仍然比字型還高的原因。Eric Meyer著名的CSS重置樣式表(http://meyerweb.com/eric/tools/css/reset/)把根元素body
的line-height
重置為1
,這相當於把所有元素行高中的leading重置為0。
綜上所述,說“line-height
屬性對應於印刷行業常說的leading”還是有問題的。準確的表述應該是:“line-height
屬性包含了/實現了印刷行業常說的leading。”至於這個leading在《CSS設計指南(第3版)》中被翻譯成了什麼,上下文還講了些什麼,請購買電子版或即將出版的紙質書看一看吧。
最後的話
當然,希望讀者買書看只是開個玩笑。只要你能看完這篇文章,買不買這本書看並不重要。重要的是你已經真正理解了leading這個術語的幾種含義。而更重要的是,當你看到譯者因為原書中一句話表達不當,就會查幾天資料,而且還能寫出這麼長的一篇文章來,你會明白翻譯不容易,翻譯準確、翻譯好更不容易。
很多時候,一本書翻譯得好不好,除了譯者既有的知識儲備和文字功底,更多的還要依賴譯者求真的態度和堅韌的毅力。我不敢說《CSS設計指南(第3版)》中沒有錯誤,而只是想說一本好書的問世並非外界想象得那麼輕而易舉。但這本書(我已經翻譯了一半了)的的確確是學習CSS的難得好書,我會盡力把它譯好,也希望看了此文的諸君支援一下它。比如,在微博上轉發一下,或者向學習CSS的朋友推薦一下。一方面為了讓我的努力能讓更多讀者受益,另一方面也為了讓真正的好書不被其他濫書埋沒。相信大家的舉手之勞,就能讓好書惠及更多讀者。謝謝!
相關文章
- 揭開ThreadLocal的面紗thread
- 揭開 Kubernetes 的神祕面紗
- 揭開“QUIC”的神祕面紗UI
- 揭開“信創”的神秘面紗
- 揭開OKR (Objectives and Key Results) 的面紗OKRObject
- 揭開Kotlin協程的神秘面紗Kotlin
- 揭開 Hyperledger Cacti 專案的面紗
- 揭開Java記憶體管理的面紗Java記憶體
- 揭開redux,react-redux的神祕面紗ReduxReact
- 揭開Future的神祕面紗——任務取消
- Dive into TensorFlow系列(3)- 揭開Tensor的神秘面紗
- 帶你揭開神秘的javascript AST面紗之AST 基礎與功能JavaScriptAST
- 『MySQL』揭開索引神祕面紗MySql索引
- 你該知道的《css揭祕》--形狀篇CSS
- 揭開Future的神祕面紗——結果獲取
- 揭開Future的神祕面紗——任務執行
- 揭開java記憶體模型的神祕面紗Java記憶體模型
- 揭開單體應用程式的神祕面紗
- 圖文並茂|為你揭開微服務架構的“神祕面紗”!微服務架構
- 一文帶你深扒ClassLoader核心,揭開它的神祕面紗!
- 揭開神秘面紗——深入淺出ThreadLocalthread
- 從一個Demo開始,揭開Netty的神祕面紗Netty
- 揭開React中server-side rending的神祕面紗ReactServerIDE
- 揭開JS無埋點技術的神祕面紗JS
- 揭開NoahV智慧運維前端框架的神祕面紗運維前端框架
- 《SpringBoot判空處理》揭開@Valid與@Validated的面紗Spring Boot
- 揭開DRF序列化技術的神祕面紗
- 你該知道的《css揭祕》--背景與邊框篇CSS
- 從理論到實施,帶你揭開管理駕駛艙的神祕面紗
- 效能再提升70%?大咖前瞻帶你揭開.NET6的神祕面紗!
- 揭開C++移動與複製的神祕面紗C++
- 浮點數的這些坑,你未必知道
- 帶你揭開神秘的Javascript AST面紗之Babel AST 四件套的使用方法JavaScriptASTBabel
- netty原始碼分析之揭開reactor執行緒的面紗(三)Netty原始碼React執行緒
- netty原始碼分析之揭開reactor執行緒的面紗(二)Netty原始碼React執行緒
- netty原始碼分析之揭開reactor執行緒的面紗(一)Netty原始碼React執行緒
- 揭開AI、機器學習和深度學習的神秘面紗AI機器學習深度學習
- 【譯】用 GitHub Copilot 提交註釋揭開歷史的神秘面紗Github
- 是時候揭開混合雲架構的神祕面紗了!架構