3

An end to typographic widows on the web

 1 year ago
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.
neoserver,ios ssh client

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:

A screenshot showing a long heading with the final word dropped to the sewcond line as a widow

Default text wrapping

A screenshot showing the same long heading with the text split evenly over two lines

‘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.


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK