Chrome 將推出 CSS 文字模組層級 4 新增的 4 項國際 CSS 功能。這篇文章說明已出貨的商品,以及即將推出的新功能。
- 從 Chrome 119 版起:日文詞組在
word-break: auto-phrase
中斷行。 - 在 Chrome 120 的旗標後面:使用
text-autospace
屬性的指令碼間間距。 - 開發中:使用
text-spacing-trim
屬性搭配中文、日文和韓文 (CJK) 標點符號。 - 各語言字型大小一致。
日文詞組換行:word-break: auto-phrase
這項功能可提升日文的可讀性。本功能已於 Chrome 119 推出
有些東亞語言 (例如中文或日文) 不會使用空格來分隔字詞,且行可以換行,即使位於字詞中間也一樣。這是這些語言的一般換行行為,但是在標題或詩詞等簡短文字中,最好在自然詞組邊界加上換行 (在日文中,此邊界稱為「Bunsetsu」)。
新的 CSS 功能 word-break: auto-phrase
會指定系統應在這類邊界發生換行。
<html lang="ja">
<style>
h1 {
word-break: auto-phrase;
}
</style>
<h1>窓ぎわのトットちゃん<h1>
邊界偵測是由機器學習引擎執行,因此可能不符合您的預期。在這種情況下,你可以手動調整可中斷點。<wbr>
標記或零寬度空格 (​
) 會強制執行可中斷點,而 零寬度合併器 (‍
) 則會強制中斷點。
窓ぎわの<wbr>トットちゃん
ユーザー<wbr>インターフェース
目前 Chrome 僅支援日文,且會使用採用 AdaBoost 機器學習技術的 BudouX C++ 連接埠。詳情請參閱 Google Developers 日本:BudouX:読やすい惽のたはの軽な分のいきた。
我們計劃在日後的 Chrome 版本中支援韓文和中文。
指令碼間間距:text-autospace
下列功能目前在 Chrome 中設有旗標,如要進行測試,請在 Chrome 120 以上版本中啟用「Experimental Web Platform 功能」旗標 (位於 chrome://flags/#enable-experimental-web-platform-features
)。
中文和日文混用多種字母,包括漢文、拉丁文和 ASCII 數字,以及平假名和片假名 (日文)。從外型或非人體表觀文字切換成畫面時,如果文字間距較小,通常都能讓畫面更加一目瞭然。
Chrome 預設預設開始插入跨指令碼間距。這項功能運用在印刷素材中廣泛使用的常見做法,可提升網路可讀性。
如要停用這項行為,可以透過 text-autospace
屬性控制插入間距。
text-autospace: no-autospace;
CJK 標點符號:text-spacing-trim
下列功能仍在開發階段,預計在 Chrome 中預設為啟用。
在中文、日文和韓文中,在標點符號字元之間套用核心可以改善可讀性,並產生更加賞心悅目的字體排版。目前大部分的印刷材料和文書處理工具都適用這個 KO。
例如,CJK 句號和 CJK 右括號通常在字符空格的右半部具有字符和內部間距,因此每個字元都會保持穩定不變。
但當這些標點符號字元連續出現時,字符內部的間距就會過大。在以下兩個範例中,第二個範例是正確的字體排版,應移除 CJK 週期的右側半部。
預設行為通常可提供良好結果,但開發人員可以使用 text-spacing-trim 屬性選擇不同的樣式,或在某些情況下停用。
各語言字型大小一致
在 Chrome 118 之前的版本中,系統不會將小於 10 像素的字型大小呈現為指定的尺寸,但如果語言是阿拉伯文、波斯文、日文、韓文、泰文、簡體中文或繁體中文,則會四捨五入。開發人員需要變通方法才能轉譯小型文字,例如使用 transform
屬性。
自 Chrome 118 版起,所有語言的限制均已解除此限制,讓七種語言相符。這項變更改善了與其他瀏覽器的互通性。
互動並提供意見
如果你對這些功能有任何意見,請前往 crbug.com 回報問題。