Japanese headings that break in the middle of a word
Japanese is written without spaces, so browsers may wrap it between any two characters. From Chrome's post introducing the fix: lines "can wrap at any character, even if it's in the middle of a word". That is normal in body text, but in a large heading on a phone it splits words the reader has to put back together. For Chrome and Edge, it is two lines of CSS:
h1, h2, h3 {
word-break: auto-phrase;
line-break: strict;
}
Safari and Firefox don't support auto-phrase yet; for them, put the break points in the text (below).
See it in your browser
The same heading, "Manage your team's tasks on one screen", in a box 10 characters wide:
| Default | チームのタスクをひとつの画面で管理しましょう |
|---|---|
| With the fix | チームのタスクをひとつの画面で管理しましょう |
In Chromium 152 on Windows 11, the default ends the first line after ひと, the first half of ひとつ ("one"), and starts the last line with a small ょ. With the fix, the three lines are the three phrases. If the second row also breaks inside words, your browser doesn't support auto-phrase.
word-break: auto-phrase, in Chrome and Edge
From MDN's word-break: with auto-phrase, "language-specific analysis is performed to improve word breaks by not placing them in the middle of natural phrases". Chrome has supported it since version 119, and so has Edge. Chrome finds the phrases with BudouX, a machine-learning model, and its post warns that "it may not result in what you intend".
It needs the text marked as Japanese. With the same heading under lang="en", Chromium 152 broke it exactly as without auto-phrase. If your Japanese pages still say <html lang="en">, fix that first (how); it also decides the shapes of the kanji.
Use it on headings, buttons and other short text. Chrome's post describes it for "short text such as headings or poems"; in body text, breaking anywhere is ordinary Japanese typesetting.
Add line-break: strict
A phrase longer than the line still breaks inside it. "Check out the new user interface", 新しいユーザーインターフェースをチェックしてください, has a 13-character phrase in the middle. At 7 characters wide, auto-phrase alone put ユーザーインタ on one line and started the next with the long-vowel mark: ーフェースを. With line-break: strict it gave ユーザーイン and ターフェースを.
W3C's Requirements for Japanese Text Layout (3.1.7) lists small kana and the long-vowel mark ー among the characters that, "in principle", should not begin a line, and notes that a fair number of books allow them anyway. CSS Text Level 3 now says these breaks "are forbidden for normal and strict line breaking", but Chromium 152's default still made them, with or without auto-phrase; strict stopped them. line-break: strict is supported in Safari and Firefox too.
To move a break yourself, Chrome's post: a <wbr> tag or a zero-width space adds a break point, and a zero-width joiner (‍) prevents one. Its own example:
ユーザー<wbr>インターフェース
With the fix, at 9 characters wide, that turned the heading above into 新しいユーザー / インターフェースを / …
Safari and Firefox: put the break points in the text
As of the date above, MDN's compatibility data lists auto-phrase in Safari only in Technology Preview, and not in Firefox. For them, mark the phrases yourself with zero-width spaces (U+200B) and stop the browser from breaking anywhere else:
.phrases {
word-break: keep-all;
overflow-wrap: anywhere;
}
A zero-width space is a character, so it can live in your translation file: "チームのタスクを\u200bひとつの画面で\u200b管理しましょう" in JSON. keep-all stops breaks between the characters, the zero-width spaces add them back between phrases, and overflow-wrap: anywhere lets a phrase that doesn't fit break instead of overflowing. In Chromium 152 this gave the same three lines as auto-phrase; keep-all is supported in Safari and Firefox as well. A phrase that doesn't fit breaks anywhere, before a ー too, so keep phrases short enough for a phone.
To find the phrases for you, use BudouX, the model behind Chrome's auto-phrase. Its JavaScript version:
import {
loadDefaultJapaneseParser,
} from "budoux";
const parser =
loadDefaultJapaneseParser();
parser.parse("今日は天気です。");
// ["今日は", "天気です。"]
parser.translateHTMLString() returns the HTML with these zero-width spaces and the same two properties, and the <budoux-ja> web component does it in the page.
Don't use word-break: keep-all without the break points. It is the usual answer for Korean, which has spaces between words (BudouX's README says so). Japanese has none: in Chromium 152 our heading stayed on one line and ran out of its box.
The rest of a Japanese check
Headings are the largest text on the first screen, so a broken one is the first thing a Japanese reader sees. The same pass catches Enter while typing Japanese (the fix), yen charged 100 times over (the fix), kanji drawn in their Chinese shapes (the fix), postal codes rejected when typed in Japanese (the fix), dates saved one day early in Japan (the fix), address forms in the American order (the fix), phone numbers sent to +81 with the 0 still in (the fix), PDFs with the Japanese missing (the fix), search that finds nothing in Japanese (the fix), previews cut down to “...” in Japanese (the fix), lists sorted in the wrong order (the fix), email subjects that arrive garbled (the fix), CSV files that open garbled in Excel (the fix), Japanese titles that give an empty URL slug (the fix), file names garbled on upload and download (the fix), dates in the Japanese era that come out wrong (the fix), full-width spaces that get past your checks (the fix), public holidays your app gets wrong (the fix), and vertical text that comes out sideways or upside down (the fix).
Lesstep translates web apps into Japanese and delivers them as one pull request. In Complete (US$249), we set this on your headings and buttons, put break points in the Japanese strings that need them, and check every screen at phone width in Chrome and in WebKit. The first step is a free sample.
Chrome is a trademark of Google LLC; Microsoft Edge is a trademark of Microsoft Corporation; Safari is a trademark of Apple Inc.; Firefox is a trademark of the Mozilla Foundation. This page is not affiliated with or endorsed by any of them.
More: Enter sends the message while typing Japanese · Stripe charges 100 times too much in yen · Kanji in their Chinese shapes · Forms that reject numbers typed in Japanese · Dates that come out wrong for Japanese users · Address forms in the Japanese order · Japanese phone numbers in forms · Japanese text missing from your PDFs · Search that finds nothing in Japanese · Length limits that break in Japanese · Japanese lists sorted in the wrong order · Japanese email subjects that arrive garbled · Japanese CSV files that open garbled in Excel · Japanese titles that give an empty URL slug · Japanese file names garbled on upload and download · Japanese era dates that come out wrong · Full-width spaces that get past your checks · Japanese public holidays your app gets wrong · Japanese vertical text that comes out sideways or upside down · Japanese localization checklist · Japanese localization for your web app