![Jack J](https://web.dev/images/authors/jackjey.jpg) Jack J [GitHub](https://github.com/JackJey)

<br />

Four new international CSS features from the [CSS Text Module Level 4](https://drafts.csswg.org/css-text-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`](https://drafts.csswg.org/css-text-4/#valdef-word-break-auto-phrase) specifies that wrapping should occur at such boundaries.

> [!NOTE]
> **Note:** `lang="ja"` is required to declare that the text is in Japanese.

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

<h1>窓ぎわのトットちゃん<h1>
```
![word-break: auto-phrase wraps the line at the natural phrase boundary.](https://developer.chrome.com/blog/image/word-break-auto-phrase.png) `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>`](https://developer.mozilla.org/docs/Web/HTML/Element/wbr) tag or [Zero Width Space](https://en.wikipedia.org/wiki/Zero-width_space) (`&ZeroWidthSpace;`) enforces a breakable point, and [Zero Width Joiner](https://en.wikipedia.org/wiki/Zero-width_joiner) (`&zwj;`) prevents a break.

```html
窓ぎわの<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: 読みやすい改行のための軽量な分かち書き器](https://developers-jp.googleblog.com/2023/09/budoux-adobe.html).

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.](https://developer.chrome.com/blog/image/text-autospace.png) 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`](https://drafts.csswg.org/css-text-4/#text-autospace-property) property lets you control inserting the spacings.

```css
text-autospace: no-autospace;
```

> [!NOTE]
> **Note:** Chrome doesn't insert the spacing if there are explicit space characters around different scripts, so you don't have to worry about fixing existing content.

## 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.](https://developer.chrome.com/blog/image/text-spacing-trim.png) 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](https://drafts.csswg.org/css-text-4/#text-spacing-trim-property) property to choose different styles, or to disable it in some cases.

> [!NOTE]
> **Note:** The feature consists of two parts; one for line edges and another for adjacent characters. The latter is already available on Android and ChromeOS when the used font is Noto CJK, from Android 13 and ChromeOS 90. This feature complements it by supporting line edges, supporting more fonts and platforms, and supporting more edge cases such as when the fonts change.

## 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.](https://developer.chrome.com/blog/image/minimum-font-size.png) 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](https://issues.chromium.org/issues/new?noWizard=true&template=0&component=1456410).