正式推出 CSS 的四項全新國際功能

Jack J
Jack J

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>
word-break: auto-phrase 會在自然片語邊界處換行。
word-break: auto-phrase 會在自然詞組邊界處換行。

邊界偵測功能是由機器學習引擎執行,因此可能無法產生預期結果。如果發生這種情況,您可以手動調整可中斷點。<wbr> 標記或零寬度空格 (&ZeroWidthSpace;) 會強制設定可中斷點,而零寬度合併字元 (&zwj;) 則會防止中斷。

窓ぎわの<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 控制。

如要停用這項行為,您可以使用 text-autospace 屬性控制插入間距。

text-autospace: no-autospace;

CJK 標點符號字距調整:text-spacing-trim

我們正在開發下列功能,目標是讓這項功能在 Chrome 中預設為啟用。

在中文、日文和韓文中,在標點符號之間套用字距調整功能,可改善可讀性,並產生更賞心悅目的排版效果。目前,大多數的印刷品和文字處理器都會套用這種字距調整。

舉例來說,CJK 的句號和 CJK 的右括號通常會設計成在字形空格的右半部有字形內部間距,這樣每個字元都會以固定進度顯示。

但當這些標點符號出現在同一行時,這個字形內部間距就會過大。在以下兩個示例中,第二個是正確的排版方式;CJK 的右半邊應移除。

當標點符號出現在同一行時,請移除 CJK 句號的右半部。
標點符號出現在同一行時,應移除 CJK 句號的右半部。

預設行為通常可提供良好的結果,但開發人員可以使用 text-spacing-trim 屬性選擇不同的樣式,或在某些情況下停用該屬性。

各語言的字型大小下限一致

在 Chrome 118 之前,如果語言為阿拉伯文、波斯尼亞文、日文、韓文、泰文、簡體中文或繁體中文,則小於 10px 左右的字型大小不會以指定方式顯示,而是會四捨五入。開發人員需要使用其他方法顯示小字體,例如使用 transform 屬性。

從 Chrome 118 開始,所有語言都已解除這項限制,讓七種語言與其他語言相符。這項變更可改善與其他瀏覽器的互通性。

自 Chrome 118 起,系統將不再針對阿拉伯文、波斯尼亞文、日文、韓文、泰文、簡體中文或繁體中文,實施小於 10 個像素的字型大小無法正確顯示的限制。
從 Chrome 118 開始,阿拉伯文、波斯文、日文、韓文、泰文、簡體中文或繁體中文的字型大小若小於 10 像素,則不會以指定方式顯示。

互動並分享意見回饋

如對這些功能有任何意見,請前往 crbug.com 回報問題。