網絡暴民 Jacky’s Blog

最近看到兩篇文章： The Problem with CSS 和 Everything You Know about CSS is wrong ，都是 sitepoint 為新書作宣傳的文章，談的是 CSS 排版的問題。

CSS 排版難學又難精，因為其當初並沒有為排版而設的規則，因此即使要做幾個簡單的 Column，也必需走很遠的路：理解一大堆 CSS 的 Box Model、Positioning、Document Flow 等的運作原理，用很多怪招如 faux column、negative margin 等等去嘗試實作。終於做到效果，卻發覺某某在內容會破壞整個排版，脆弱得很。各大瀏覽器對 CSS 的支持程度不一，要花大量心力處理這些差異。也因為這樣，而催生了 一大堆 CSS Framework ，主要就是想解決排版的問題。

其實對於要弄 grid-like 的排版，有更簡單的古方：HTML table，問題是這個做法並不符合網頁標準網頁標準的精神¹，即讓 HTML 標籤能符合語義 (Semantics)，而有關外表描述讓 CSS 解決。所以 Table 只應用顯示表列式的資料，用 Table 來排版語義上不對。因此，推行網頁標準，間接要提供 Table 排版以外的方案，但 CSS 排版頗高的學習曲線，某程度上也阻礙了網頁標準的推行。

那麼還有沒有更好的方法，可以順得哥情又不失嫂意？上述文章提到 CSS2 裏的 display: table 類的屬性，即可以用 CSS 指示任何元素表現得像 table 一般，瀏覽器會在實際繪畫時，自動補上 table 元素。這樣的話，用簡單幾句語法就可以實行 Column 排版了。

有人會覺得：實際就是用 table 來排版嘛！這麼多年來叫人不要用 table 排版，現在又叫人用，豈非本末倒置？我想在這裏必需認清的是：用甚麼來做網頁排版才算「正確」？在 CSS3 裏的確有 排版模組 ，但仍然是在起草階段。而在真正可用這些排版屬性前，我們用盡現有 CSS 可行的方法去試去做，所以才有那麼多排版怪招，display:table 只是其中一種方法罷了，難道用 float、negative margin 等才是「正確」？最重要的是有沒有違反網頁標準的精神。使用 display:table，HTML 可以保留語義，CSS 只作外表描述，大概沒有問題吧？

當然，table 也並非完美，例如在第二篇文章中的相集例子裏的 HTML 碼：

這裏代碼其實跟一個 HTML table 差不多，只不過全都變成了 div。其中 <div class="row"> 究竟是一種只屬外表的架構，還是符合語義的？但如想使用 display:table，這個元素是必需的。 (雖然文章解釋過瀏覽器會自動產生其他 table 元素，但 Safari 上似乎有一些限制)。

雖然可用 display:table，但現時為止卻不是所有瀏覽器都支持，至少仍時是市場上佔大多數的 IE6/7 還未支持。將推出的 IE8 將會更全面支持 CSS2 並 通過 ACID2 ，也會支持 display:table，所以文章作者覺得時機大概成熟，可以試用了？不過要等到大多數用戶都轉成 IE8，大概又要好幾年時間吧？而且還要看 Windows 7 的銷售如何呢？

¹ 「網頁標準」在這裏的意思傾向於 Wikipedia 所說：In recent years, the term has been more frequently associated with the trend of endorsing a set of standardized best practices for building web sites, and a philosophy of web design and development that includes those methods

本站的 veryplaintext 模版大概是一年前轉用 Wordpress 時安裝的。然而，我自己也做了不少調較，如字型、Margin、單篇排版等等。我是一個「字大」派，一段長文裏的字應該夠大和清晰，行高與文字間隔也應調整得宜，這樣讀者 (至少我) 才會看得舒服。

(一) 大小 (font-size) – 理論上，預設的瀏覽器文字大小應該是最適合的。但實際上，只談 Windows 的話，中文字在網頁上的大小，偏偏又只有某些數值 (如 9pt, 12pt 等等) 是比較合適，其他的會出現「爛字」情形 (IE 好一點)。而在這些字型比較美觀的數值裏，其實也只是大和小兩種。 (當然還有可作微調的 px 值，但在此省略) 。我現在的設定值是：瀏覽器預設值的 76% x 1.15 em ，很複雜吧，對於一般 windows 和 Firefox 來說大概是 12pt。

(二) 字距 (letter-spacing) – 有人認為設定成 1em，即如蘋果日報網站的字距。但事實上，蘋果的字距，是暴力地在每個字之間加入「全形空白」的字元，而非用 CSS 來設定。為甚麼呢？因為用 CSS 設定的話，就連英文字每串的字母字距也會拉長，很不好看。我自己則認為，預設一般瀏覽器所設的字距已經足夠了，所以我只是微調了 letter-space 值為 1px。

(三) 行高 (line-height) – 是可以很有效地減消文字之間的壓迫感的，看起來會比較有「呼吸」空間，跳行時也會舒服些。我的設定是 1.55em。

(四) 段落間隔 – 一般認為應用空行分段，也可以增加文字區塊間的「呼吸」空間。因為這裏使設了用 textile 為轉換器，所以段與段之間，不是 br ，而是正確地用 p 包圍著。亦因此，只要在 CSS 設定好 p 的 margin 值就可以了 (留意要計算 margin collapse 在內)。

另外，最近看到一個叫 E2R 的網站，所推的就是「簡單易讀」(並非指內容) 的文字排版。其提倡有五個要點，可以參考一下：

1. 長篇文章使用標準字型大小
2. 提供空白
3. 設定行高
4. 用清晰的顏色對比
5. 不用圖顯示文字

當然，這不是甚麼金科玉律，但作為一個體貼讀者的 blogger，應該考慮讀者可以舒舒服服讀你的文章。無論你是選用「字大派」還是「字小派」，單單調較好行高已經令效果很不同了。

還好的是，用 Firefox, Opera 等瀏覽器的話，你可以自由設定字體大小。不會像 IE6 般被 CSS 「騎劫」了字體大小。( IE7有無問題？)

延伸閱讀：

• 老貓學出版：傳統編輯對部落格新手的寫作建議
• E2R