Web 排版中,左對齊和兩端對齊各有什麼優缺點?不同情況下應該如何選用?

在看一篇jjgod關於中文排版的問題上,他說「永遠不要用左右對齊」,但是這篇文章是針對CSS2的,不知現在這個規則還成立么?或者有更好的解決辦法?


齊頭尾(justification、兩端對齊、雙齊)最大的問題是:當行的原始長度差異過大時(這個「差異過大」要相對於欄寬來看),齊頭尾之後的行與行之間有明顯的疏密變化(一會兒松、一會兒緊)。而且對西文來說,如果沒有 hyphenation,往往也很難讓行間長度差異適合齊頭尾。這是齊頭尾在字體排印方面的問題。
在 CSS2 的時代,罕有瀏覽器能處理好中英文混排的齊頭尾:本來應該將齊頭尾添加的空白合理分散到所有空格和漢字間距中,但大多數瀏覽器(一枝獨秀的 IE 除外)只能把空白分配給空格(因為西文齊頭尾有這個就基本夠用),結果中英文混排且帶有空格的文本流之中就會出現一些慘不忍睹的空白。這是曾經影響齊頭尾的技術局限。

跟隨 IE 的先鋒革命路線,以及 CSS3 規範 [1] 的正確領導,越來越多的瀏覽器開始實現適用於中文的齊頭尾演算法。所以現在技術局限越來越弱了。(Hyphenation 是又一個有望減弱的技術局限,詳見 @江疆 給出的鏈接。)
如果你的目標用戶不怎麼受到老瀏覽器的限制(比如針對 iOS 做 web 排版),而且你想用齊頭尾的地方沒有字體排印方面的問題(行間長度差異相對欄寬來說過大),那麼目前確實可以嘗試齊頭尾了。

純中文文本的行間長度差異天生較小(這些差異基本都是標點避頭尾的結果,通常不會超過兩個字),而且簡單左齊並不好看(右邊緣的變化很呆板,卻又不完全整齊),其實比較適合齊頭尾,一般只要欄寬不太小就好(一兩 em 的空白分散到三五十個字的行中,沒什麼問題)。
但中英文混排的文本就容易出現明顯的行間長度差異,需要小心。
而純西文文本行的長度錯落有致,右側不對齊也挺好看,不一定那麼需要齊頭尾。而且,沒有 hyphenation 的話齊頭尾的效果實在好不了。

我贊成 @陳賢安 說的「慎重慎重」。

注意:如果要為以中文為主的文本設定齊頭尾,應當保證欄寬是字型大小(或者更準確地說:字型大小加字距 [2])的整數倍。否則,所有行都會默認獲得齊頭尾帶來的不易控制的正字距。

[1] 7.3. Justification Method: the 『text-justify』 property http://www.w3.org/TR/css3-text/#text-justify
[2] 字距:又稱字元間距、tracking,CSS 用 letter-spacing 控制它。


參考 http://caniuse.com/css-hyphens 和 https://developer.mozilla.org/en/CSS/hyphens 的說明,如果可以啟用 CSS hyphens 的瀏覽器,那麼啟用 justify 還可以考慮。


局限於瀏覽器的文本渲染技術,兩端對齊一般會導致字詞間距不均勻,造成難於接受的排版效果。如果非要用兩端對齊,可以考慮啟用 hyphenation, 效果可能會好些,但也很難達到理想效果。慎重慎重。

更新:
瀏覽器現有技術也可能排出很漂亮的兩端對齊了:http://www.bramstein.com/projects/typeset/flatland/.


推薦閱讀:

如何評價真阿當的文章:《2016年前端技術觀察》?
好的前端主管是如何帶隊的?
作為一個前端開發實習生,我這樣做是不是特別不厚道?
QQ空間的前端技術水平如何?

TAG:網頁設計 | 前端開發 | CSS | 字體排印 |