Introducing four new international features in CSS

Jack J
Jack J
GitHub

Four new international CSS features from the CSS Text Module Level 4 are coming to Chrome. This post explains what has already shipped, and what is coming soon.

  • From Chrome 119: Japanese phrase line breaking with word-break: auto-phrase.
  • Behind a flag from Chrome 120: Inter-script spacing with the text-autospace property.
  • Under development: Chinese, Japanese, and Korean (CJK) punctuation kerning with the text-spacing-trim property.
  • Consistent minimum font size across languages.

Japanese phrase line breaking: word-break: auto-phrase

This feature improves the readability of Japanese text, and is available from Chrome 119

Some East Asian languages such as Chinese or Japanese don't use spaces to separate words, and lines can wrap at any character, even if it's in the middle of a word. This is the normal line breaking behavior for these languages, but in short text such as headings or poems, it is preferable to wrap lines at natural phrase boundaries (In Japanese, this boundary is called "Bunsetsu").

The new CSS feature word-break: auto-phrase specifies that wrapping should occur at such boundaries.

<html lang="ja">
<style>
h1 {
  word-break: auto-phrase;
}
</style>

<h1>窓ぎわのトットちゃん<h1>
word-break: auto-phrase wraps the line at the natural phrase boundary.
word-break: auto-phrase wraps the line at the natural phrase boundary.

The boundary detection is performed by a machine learning engine, and therefore it may not result in what you intend. If that happens, you can manually adjust breakable points. A <wbr> tag or Zero Width Space (&ZeroWidthSpace;) enforces a breakable point, and Zero Width Joiner (&zwj;) prevents a break.

窓ぎわの<wbr>トットちゃん
ユーザー<wbr>インターフェース

Currently, Chrome supports this feature only for Japanese, using the BudouX C++ port that uses AdaBoost ML technology. Read more about it in Google Developers Japan: BudouX: 読みやすい改行のための軽量な分かち書き器.

We plan to support Korean and Chinese in future versions of Chrome.

Inter-script spacing: text-autospace

The following feature is currently behind a flag in Chrome. To test it, enable the Experimental Web Platform features flag (found at chrome://flags/#enable-experimental-web-platform-features) in Chrome 120 or later.

Chinese and Japanese mix multiple scripts, Han, Latin, and ASCII digits as well as Hiragana and Katakana in case of Japanese. Small spacings when switching from and to non-Han ideographic scripts often help readability.

Chrome is planning to start inserting inter-script spacing by default. This feature brings a common practice, widely used in printed materials to improve readability, to the web.

New default applies small spacings for better readability which can be controlled with text-autospace.
New default applies small spacings for better readability which can be controlled with text-autospace.

If you want to disable this behavior, the text-autospace property lets you control inserting the spacings.

text-autospace: no-autospace;

CJK punctuation kerning: text-spacing-trim

The following feature is under development, with the aim that it will be enabled by default in Chrome.

In Chinese, Japanese, and Korean, applying kerning between punctuation characters improves the readability and produces more visually pleasing typography. Most printed materials and word processors apply this kerning today.

For example, CJK periods and CJK close parentheses are usually designed to have glyph-internal spacings on the right half of the glyph spaces, so that each character has a constant advance.

But when these punctuation characters appear in a row, this glyph-internal spacings become excessive. In the following two examples, the second one is the correct typography; the right-half of the CJK period should be removed.

When punctuation characters appear in a row, the right-half of the CJK period should be removed.
When punctuation characters appear in a row, the right-half of the CJK period should be removed.

The default behavior provides good results in general, but developers can use the text-spacing-trim property to choose different styles, or to disable it in some cases.

Consistent minimum font size across languages

Before Chrome 118, font sizes smaller than 10px or so were not rendered as specified, but rounded up if the language was Arabic, Farsi, Japanese, Korean, Thai, Simplified or Traditional Chinese. Developers needed workarounds to render small text, for example by using the transform property.

From Chrome 118, this limit is lifted for all languages, making the seven languages match the rest. This change improves the interoperability with other browsers.

From Chrome 118, the limitation that font sizes smaller than 10px or so are not rendered as specified is lifted for Arabic, Farsi, Japanese, Korean, Thai, Simplified or Traditional Chinese.
From Chrome 118, the limitation that font sizes smaller than 10px or so are not rendered as specified is lifted for Arabic, Farsi, Japanese, Korean, Thai, Simplified or Traditional Chinese.

Engage and share feedback

Should you have any feedback about these features, please file an issue at crbug.com.