v145 · CSS · Justification Modes

Justification Modes

Three columns showing the same Latin paragraph with text-align: justify but different text-justify values. Drag the width slider to see how each algorithm distributes space at different line lengths — the difference between inter-word and inter-character is most visible at narrow column widths.

Chrome 145 required for text-justify. Older browsers treat the property as unknown and use their default justification algorithm for text-align: justify.

interactive comparison

Column width: 220px

text-justify: auto

When type is set justified, the browser must distribute the extra whitespace on each line across the available word and character gaps. The auto value lets the browser pick the best algorithm.

text-justify: inter-word

When type is set justified, the browser must distribute the extra whitespace on each line across the available word and character gaps. Only the gaps between words grow; character spacing stays fixed.

text-justify: inter-character

When type is set justified, the browser must distribute the extra whitespace on each line across the available word and character gaps. Both word and character gaps grow — common in East Asian typography.

which value to choose

Value	When to use	Script
auto	Let the browser decide based on language/locale	Any
inter-word	Latin, Arabic, Hebrew — word-spaced scripts	Latin, Arabic, Hebrew
inter-character	Japanese, Chinese, Korean — character-based justification	CJK
none	Override inherited justify — effectively same as start	Any

code

/* Standard Western typography */
article {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;         /* combine with hyphenation for tighter measure */
}

/* East Asian typography */
.cjk-content {
  text-align: justify;
  text-justify: inter-character;
}

/* Mixed content — let the browser handle it */
.multilingual {
  text-align: justify;
  text-justify: auto;   /* browser respects lang attribute */
}