CSS word-break: auto-phrase

[kojiishi]

Description

When wrapping lines, word-break: auto-phrase specifies to prioritize keeping natural phrases together using language-specific content analysis. This feature is especially useful for writing systems that don't use spaces to delimit words such as Chinese or Japanese, because in such cases lines wrap at the middle of words.

Specification

https://drafts.csswg.org/css-text-4/#valdef-word-break-auto-phrase

Additional Signals

Standard Positions

• Blink: Shipping https://chromestatus.com/feature/5133892532568064
• Gecko: CSS Text Level 4: word-break: auto-phrase mozilla/standards-positions#877
• WebKit: Shipping under a runtime flag https://bugs.webkit.org/show_bug.cgi?id=258668

Tests

• https://wpt.fyi/results/css/css-text/parsing?label=master&label=experimental&aligned&q=word-break
• https://wpt.fyi/results/css/css-text/word-break/auto-phrase?label=master&label=experimental&aligned

Web Developer Signals (data as of Oct 9th, 2024)

• A JS/Python/Java implementation of this feature BudouX has 1.4k stars.
  • Demo.
  • A tweet about Adobe's use of the BudouX has 420 likes.
  • There are several Japanese articles on the web.
• A demo tweet of the Blink prototype and its retweets has over 100 likes.