An end to typographic widows on the web
source link: https://clagnut.com/blog/2424/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
An end to typographic widows on the web
Currently shipping in Chrome Canary, and thus soon to be in Blink-based browsers including Edge, is a relatively new CSS declaration which promises to virtually end typographic widows.
The text-wrap:balance
declaration in CSS Text Module Level 4 says that line breaks should be chosen to balance out the line lengths in a block of text. How exactly that is done is ‘UA-defined’, in other words it’s determined by the rendering engine rather than any specific rules or guidelines set in the CSS specifications. This is how today’s version of Chrome Canary balances out one of the longer headings in this blog:
Default text wrapping
‘Balanced’ text wrapping
What this is not is control over widows and orphans. My previous examples show how the text balancing algorithm in Chrome Canary does indeed prevent a widow (the single word dropped down), and that’s a highly likely outcome. But you have to remember that the balancing job shortens the lines, so this isn’t an approach you would take to prevent widows at the end of paragraphs. In fact Canary limits balancing to 4 lines (the spec itself recommends 10 or fewer). The CSS spec itself makes the application clear:
the balance value is intended for titles and captions, where equal length lines of text tend to be preferred
With that in mind, this is the rule I’ve applied to this blog, and I’d say could end up in most people’s default reset:
h1, h2, h3, h4, h5, h6, caption, figcaption {
text-wrap:balance;
}
Balancing left-aligned headings is not always preferable. I would love to have a value for text-wrap
whose sole purpose is to prevent widows, without any other formatting involved. One could borrow from the widows
property of the Fragmentation Module:
text-wrap: 2 widows /* maybe one day */
Where 2
in this case specifies the minimum number of words allowed on the final line of a text block. There would have to be slightly more to it than this, in particular a single word should be allowed if the final two words together would be too long to fit inside the text block.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK