v145 · CSS · CJK and Latin

CJK and Latin Justification

East Asian typography has different justification conventions from Latin. In Japanese and Chinese, text is traditionally set on a grid — every character occupies the same width — and justification distributes space between characters, not just words. text-justify: inter-character enforces this convention; auto defers to the browser's locale defaults.

Chrome 145 required for text-justify. Older browsers justify text using their default algorithm. Japanese and Chinese fonts may require OS font support for CJK glyphs.

Japanese — inter-character vs inter-word

text-justify: inter-character

日本語のテキストは、均等割り付けによって各文字間にスペースが均等に配分されます。これにより、行の左右両端がそろい、整然とした印象を与えます。

lang="ja" · inter-character (standard for Japanese)

text-justify: inter-word

日本語のテキストは、均等割り付けによって各文字間にスペースが均等に配分されます。これにより、行の左右両端がそろい、整然とした印象を与えます。

lang="ja" · inter-word (non-standard, space distributed to few gaps)

Chinese — inter-character vs inter-word

text-justify: inter-character

中文排版通常使用均匀分布在字符之间的间距来实现两端对齐。每个汉字占据相同的宽度，使文本在视觉上保持整齐的网格结构。

lang="zh" · inter-character (standard for Chinese)

text-justify: inter-word

中文排版通常使用均匀分布在字符之间的间距来实现两端对齐。每个汉字占据相同的宽度，使文本在视觉上保持整齐的网格结构。

lang="zh" · inter-word (fewer word boundaries in Chinese)

Latin for comparison

text-justify: inter-word

For Latin script, justification by expanding inter-word spaces is the traditional typographic convention. The gaps between words grow while the letter-spacing stays tight, producing the familiar newspaper or book column effect.

lang="en" · inter-word (standard for Latin)

text-justify: inter-character

For Latin script, justification by expanding inter-word spaces is the traditional typographic convention. With inter-character, space distributes between every letter — noticeable as a slightly looser feel throughout the line.

lang="en" · inter-character (non-standard for Latin, but legal)

code

/* Standard Japanese / Chinese justification */
:lang(ja),
:lang(zh) {
  text-align: justify;
  text-justify: inter-character;
}

/* Standard Latin justification */
:lang(en),
:lang(de),
:lang(fr) {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

/* Mixed content — use auto and trust the browser */
.multilingual {
  text-align: justify;
  text-justify: auto;
  /* Browser uses lang attribute to pick the right algorithm */
}

see also