Another chapter in the series “fascinated by the details of CSS,” this time featuring the attribute text-wrap: pretty and how browsers handle line breaks, “typographic river” (a concept I wasn’t familiar with), and the length of the final line.
Safari is the second-to-last major browser to implement text-wrap: pretty, a feature announced in a super detailed post, which is quite interesting. “Pretty” in English means “beautiful”; I find it lovely that the CSS specification delegates the decisions for presenting beautified text to each browser.
Chromium (the base for Chrome, Edge, Opera, and Samsung Browser), for instance, “only makes adjustments to the last four lines of a paragraph” because it focuses on preventing the last line from being short.
Speaking of which…
A new attribute has emerged, text-wrap: avoid-short-last-line, to… prevent the last line from being short. At rare moments, I think people go overboard with specificity.
Check out this demonstration from the WebKit team (the engine behind Safari), featuring dynamic controls for text-wrap: pretty. (As of today, in April 2025, the stable version of Safari still does not support it.)
This Manual do Usuário implements some more established rules for balancing blocks of text and improving readability:
- Headings, for example, get
text-wrap: balance, which ensures that all lines have roughly the same length. - Paragraphs and list items utilize
overflow-wrap: break-wordto break long words to prevent them from overflowing the visible area, and creating a horizontal scrollbar.
The WebKit post introduced me to this other one, which details the margin-trim attribute and the lh (line height) unit, both previously unknown to me. Nowadays, spacing between blocks of text is done with regular margin and line height defined in rem (relative size based on the browser’s default font size).
It’s for these reasons and more that I can never seem to spend too much time without tweaking the layout of this site.