你未必知道的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. 這篇短文介紹了緊排（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的朋友推薦一下。一方面為了讓我的努力能讓更多讀者受益，另一方面也為了讓真正的好書不被其他濫書埋沒。相信大家的舉手之勞，就能讓好書惠及更多讀者。謝謝！