Add text-wrap: pretty; as a global toggle option

[jasmussen]

The CSS feature text-wrap: pretty; enables line-breaks to happen in a way that balances the line-lengths. In many cases this avoids text widows. You can read a bit more here, although that refers to balance where pretty seems better as a global toggle.. The example from that post, shown here, features a widow:

One year on and what next for remote
working?

The CSS property would enable that heading to wrap instead like this:

One year on and what
next for remote working?

The feature is useful for headings and captions especially, and it would be nice if we had, in theme.json, a global toggle to enable it across all those.

It could be in settings.typography.textBalance as a true or false, and would output this:

h1, h2, h3, h4, h5, h6, caption, figcaption {
    text-wrap: pretty;
}

This would work as a progressive enhancement.

[richtabor]

Related in part: #48202

[simison]

In the editor you might want to have "stable" value for things that are editable, if I understood correctly:

[...] pretty is offered as an opt-in to take more time for better results. The pretty value is intended for body text, where the last line is expected to be a bit shorter than the average line; the balance value is intended for titles and captions, where equal-length lines of text tend to be preferred; and the stable is intended for sections that are, or are likely become toggled as, editable.

— via

[jasmussen]

Indeed, balance seems too balanced in cases, and pretty seems even better.

[hanneslsm]

Somehow related: While text-wrap: pretty is something worth exploring, adding manually line-breaks would be also very beneficial: #55565 Both features could also work well together.

[richtabor]

I've found a combination of both to work nicely:

/* Progresive enhancement to reduce widows and orphans. */
h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption {
    text-wrap: balance;
}

p {
    text-wrap: pretty;
}