v145 · CSS · Typography · demo
Column Width Tester
Justification looks very different depending on column width. At narrow widths, text-justify: inter-word creates "rivers of white" — distracting gaps between words. inter-character distributes space evenly across every character, producing a more consistent result regardless of column width. Drag the width slider to see the difference.
Chrome 145+ —
text-justify: inter-word and text-justify: inter-character. Both require text-align: justify to have any effect.
Narrow the column width to see where inter-word spacing creates rivers · compare the two panels side by side · try different text samples
inter-word
space between words only
inter-character
space between all characters
/* text-justify controls how space is distributed when text-align: justify */
/* Default — browser chooses (usually inter-word for Latin) */
p { text-align: justify; text-justify: auto; }
/* Expand gaps between words only (Latin/Western text convention) */
p { text-align: justify; text-justify: inter-word; }
/* Expand gaps between every character (better for narrow columns) */
p { text-align: justify; text-justify: inter-character; }
/* Practical: use inter-character for narrow magazine/newspaper columns */
.narrow-col {
max-width: 200px;
text-align: justify;
text-justify: inter-character; /* avoids rivers of white */
}