為什麼 Chrome 在 Windows 下對 justify 做得這麼差?
版本:
Chrome 21.0.1180.83 mIE 9.0.8112.16421Firefox 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 方式的兩端對齊意味著:
- 如果一行都是漢字,那麼因為空白不能加到漢字之間,所以實際上是不可能對齊的;
- 如果一行漢字中夾雜幾個英文單詞,那麼極有可能出現單詞之間超大空隙(大於一個漢字寬度)的情況。
參見下圖,引號需要避頭尾,因此第一行少了一個字。對比兩種方式下,第一段的行尾以及第二段英文單詞之間空白。
- (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 |