CSS Text Module Level 4 中的四項新國際 CSS 功能即將在 Chrome 推出。這篇文章將說明已出貨的內容,以及即將推出的內容。
- 自 Chrome 119 起:使用
word-break: auto-phrase
進行日文片語斷行。 - Chrome 120 的旗標背後:使用
text-autospace
屬性設定指令之間的間距。 - 正在開發中:使用
text-spacing-trim
屬性,為中文、日文和韓文 (CJK) 標點設定字距。 - 各語言的字型大小下限一致。
日文詞組分行:word-break: auto-phrase
這項功能可改善日文文字的可讀性,並自 Chrome 119 起開放使用。
有些東亞語言 (例如中文或日文) 不會使用空格分隔字詞,而且行結尾可以是任何字元,即使是字詞中間的字元也沒問題。這是這些語言的一般斷行行為,但在標題或詩歌等短文中,建議在自然的詞組邊界處換行 (在日文中,這個邊界稱為「文節」)。
新的 CSS 功能 word-break: auto-phrase
會指定應在這些邊界處進行換行。
<html lang="ja">
<style>
h1 {
word-break: auto-phrase;
}
</style>
<h1>窓ぎわのトットちゃん<h1>
邊界偵測功能是由機器學習引擎執行,因此可能無法產生預期結果。如果發生這種情況,您可以手動調整可中斷點。<wbr>
標記或零寬度空格 (​
) 會強制設定可中斷點,而零寬度合併字元 (‍
) 則會防止中斷。
窓ぎわの<wbr>トットちゃん
ユーザー<wbr>インターフェース
目前 Chrome 僅支援日文,使用的是採用 AdaBoost ML 技術的 BudouX C++ 端口。如要進一步瞭解這項工具,請參閱 Google Developers Japan: BudouX: 読みやすい改行のための軽量な分かち書き器。
我們預計在日後的 Chrome 版本中支援韓文和中文。
字幕間距:text-autospace
以下功能目前在 Chrome 中設為旗標。如要測試,請在 Chrome 120 以上版本中啟用「Experimental Web Platform features」旗標 (位於 chrome://flags/#enable-experimental-web-platform-features
)。
中文和日文混合了多種文字,包括漢字、拉丁字母和 ASCII 數字,日文則有平假名和片假名。從漢字轉換為非漢字表意文字時,使用較小的間距通常有助於提升可讀性。
Chrome 預計預設插入程式碼間間距。這項功能將常見的印刷資料可讀性改善做法,應用至網頁。
如要停用這項行為,您可以使用 text-autospace
屬性控制插入間距。
text-autospace: no-autospace;
CJK 標點符號字距調整:text-spacing-trim
我們正在開發下列功能,目標是讓這項功能在 Chrome 中預設為啟用。
在中文、日文和韓文中,在標點符號之間套用字距調整功能,可改善可讀性,並產生更賞心悅目的排版效果。目前,大多數的印刷品和文字處理器都會套用這種字距調整。
舉例來說,CJK 的句號和 CJK 的右括號通常會設計成在字形空格的右半部有字形內部間距,這樣每個字元都會以固定進度顯示。
但當這些標點符號出現在同一行時,這個字形內部間距就會過大。在以下兩個示例中,第二個是正確的排版方式;CJK 的右半邊應移除。
預設行為通常可提供良好的結果,但開發人員可以使用 text-spacing-trim 屬性選擇不同的樣式,或在某些情況下停用該屬性。
各語言的字型大小下限一致
在 Chrome 118 之前,如果語言為阿拉伯文、波斯尼亞文、日文、韓文、泰文、簡體中文或繁體中文,則小於 10px 左右的字型大小不會以指定方式顯示,而是會四捨五入。開發人員需要使用其他方法顯示小字體,例如使用 transform
屬性。
從 Chrome 118 開始,所有語言都已解除這項限制,讓七種語言與其他語言相符。這項變更可改善與其他瀏覽器的互通性。
互動並分享意見回饋
如對這些功能有任何意見,請前往 crbug.com 回報問題。