為什麼 Chrome 在 Windows 下對 justify 做得這麼差?

版本:

Chrome 21.0.1180.83 m

IE 9.0.8112.16421

Firefox 12.0

全局比較:

細節1:

細節2:

細節3:

細節4:

我的看法: http://www.andrewsun.net/panta_rhei/archives/3630


題主還提了另一個相關的問題(http://www.zhihu.com/question/20450176),一起回答一下。

--------------------

首先,CSS3 中規定一個新屬性 text-justify (http://www.w3.org/TR/css3-text/#text-justify),通過這個屬性可以指定各類文本兩端對齊的方式,其中和這個問題相關的兩種對齊方式:

  • inter-word:通過調整單詞之間的留白來實現兩端對齊。
  • inter-ideograph:通過調整單詞和字元之間的留白來實現兩端對齊。

題目所說的很差的 justify,本質上是對漢欄位落錯誤地應用了 inter-word 這種兩端對齊方式。對漢欄位落應用 inter-word 方式的兩端對齊意味著:

  1. 如果一行都是漢字,那麼因為空白不能加到漢字之間,所以實際上是不可能對齊的;
  2. 如果一行漢字中夾雜幾個英文單詞,那麼極有可能出現單詞之間超大空隙(大於一個漢字寬度)的情況。

參見下圖,引號需要避頭尾,因此第一行少了一個字。對比兩種方式下,第一段的行尾以及第二段英文單詞之間空白。

  • (win7 ie9) text-justify: inter-word

  • (win7 ie9) text-justify: inter-ideograph

--------------------

接著,要看瀏覽器對 text-justify 的支持。我之前寫過一個測試對齊和標點禁則的頁面(http://qizhao.sakinijino.com/tools/kinsokutest/index.html ),今天調整了一下,讓其中兩端對齊設置為 text-align: justify; text-justify: inter-ideograph 。可以用不同瀏覽器訪問對比。

說一下我自己測過的部分(如果誰願意詳細測一下,歡迎補充結果):

  • Win7 下:
    • ie9:支持 text-justify ,但默認為 inter-word,低版本 ie 未測
    • firefox 10+:text-justify 不起作用,但漢欄位落默認為 inter-ideograph
    • chrome,safari,opera:text-justify 不起作用,且只能實現 inter-word 的方式
  • Mac OS X 下:
    • 各個瀏覽器漢欄位落對齊均為 inter-ideograph 方式,但未測是否支持 text-justify

結果說明,對 Windows 平台非 firefox 用戶,中英文混排的段落如果只設置了 text-align: justify ,那麼用戶很有可能會看到比較糟糕地對齊結果。

另外需要提醒一下的是,部分瀏覽器只是對有漢字的段落選用了 inter-ideograph 這種較優的對齊方式,但是並沒有支持 text-justify 。例如 firefox 是不能通過對漢欄位落設置 text-justify 實現 inter-word 的效果。Win7 下,目前看上去只有 ie9 支持了 text-justify 。手頭 Mac 不在,所以我也就沒再具體地測。

--------------------

最後,針對題主的另一個問題「為什麼HTML+CSS架構在跨語言typography方面總是達不到MS Word的水平(兩種技術有何不可比之處)?」(http://www.zhihu.com/question/20450176)。

技術上顯然沒什麼不可比之處。實際上如果 CSS3-text (http://www.w3.org/TR/css3-text/) 被充分實現,那麼在排印上 M$ Word 未必有優勢。

但具體到跨語言或者 CJK 排印這個問題上,CSS 和 Word 最大的區別在於,前者是個開放標準,而後者是個閉源商業軟體。對於開放標準,CJK 排印這類「小眾問題」,需要有較好的規範,各個實現才能趨向優美和一致。

這方面日本做了不少努力,例如 "Requirements for Japanese Text Layout" 這份文檔(http://www.w3.org/TR/jlreq/)。當然如果不講究,同為 CJK 集團,我們就搭便車了——實際上我們應該已經搭了不少便車了。


微軟有office團隊的豐富經驗,所以IE在國際化排版上必須領先其他瀏覽器。IE對兩端對齊支持的最完善。Firefox緊跟其後。


歷史原因造成。國際化排版是要靠積累的。

微軟一開始就是一家國際化公司,而且最重要的是有Office的經驗,因此其瀏覽器國際化和本地化的排版做得是最好的,可以說在國際化排版方面領先其他瀏覽器10年,沒有之一。

Firefox是老牌的開源社區,有許多非英語世界的貢獻者,所以在國際化排版方面還是可以的。

WebKit歷史最短,最差也是很正常。但是其發展的速度是非常快的。


確認是Chrome的問題可以給Google報告bug:

https://code.google.com/p/chromium/issues/entry


推薦閱讀:

深度Mac系統使用者兼設計師該如何取捨Safari與Chrome?
為什麼我在wps官網下載wps軟體的時候谷歌會提醒安全錯誤?
Chrome 在運行時佔用內存太多了嗎?為什麼?
有人自己下過Chrome瀏覽器源碼自己編譯過嗎,為什麼整個工程項目那麼大有好幾個G,如何進行裁剪
如何使自己 App 的卡片在多任務中像 Chrome 一樣「匯聚」在一起(Android 5.0+)?

TAG:GoogleChrome | HTML | CSS | 火狐瀏覽器Firefox | 字體排印 | InternetExplorer |