v145 · css

Newspaper Layout

A print-inspired newspaper layout with adjustable column count and live text-justify switching. Narrow columns make word-spacing gaps ("rivers") visible in inter-word mode; inter-character distributes spacing more evenly. Try 4–5 columns to see the difference most clearly.

Feature detection: checking…
The CSS Gazette
All the typography fit to print — Chrome 145 edition
text-justify Arrives in Chrome 145, Giving Authors Control Over Justification Algorithms

The new text-justify property in Chrome 145 gives authors explicit control over how whitespace is distributed when text-align: justify is active. Previously, browsers chose the algorithm on their own — typically spreading space between words for Latin script. Now developers can enforce inter-word or inter-character spacing per element.

Inter-word justification adds space only to word boundaries — the gaps between tokens. In narrow columns, this can create uneven rivers of white space that distract the eye across lines. Print designers often use tighter column counts and hyphenation to mitigate this effect, which is why the hyphens toggle above is so relevant to this demo.

Inter-character justification distributes extra space between every glyph, not just every word boundary. This produces a more uniform texture in narrow columns and is the standard approach for East Asian typography where words are not delimited by spaces. Latin text rarely uses inter-character justification in print, but it can be appropriate for headlines or display settings.

The auto value lets the browser choose the most appropriate algorithm for the script in use — inter-word for Latin, inter-character for CJK. Setting none with text-align: justify disables any justification expansion, effectively reverting to the last-line behaviour without distributing space across earlier lines.

Typographers working on multilingual sites can now use a single CSS rule for each script block without reaching for per-language font-size overrides or JavaScript layout recalculation. The cascade handles script detection automatically when auto is in use, and authors can override for any element where they want explicit control over the glyph-spacing algorithm.

Generated CSS — current settings

Why rivers appear in narrow columns

inter-word (narrow col)
Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed.
inter-character (narrow col)
Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed.
/* Newspaper column layout */
.np-columns {
  column-count: 3;            /* set by slider */
  column-rule: 1px solid #ccc;
  column-gap: 1.25rem;
  padding: 0.75rem 1rem;
}

.np-text {
  text-align: justify;
  hyphens: auto;             /* reduces inter-word rivers */

  /* Choose the justification algorithm: */
  text-justify: inter-word;       /* words only (Latin default) */
  /* text-justify: inter-character; */  /* glyphs (CJK standard) */
  /* text-justify: auto; */             /* browser decides by script */
  /* text-justify: none; */             /* no expansion */
}

see also