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 avoids typographic widows. You can read a bit more here, although that refers to balance where pretty works slightly differently. The example from that post, shown here, features a typographic widow:

One year on and what next for remote
working?

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

One year on and what
next for remote working?

The other one, "pretty", would wrap it specifically to avoid the typographic widow:

One year on and what next for
remote working?

The feature is useful for headings and captions especially, and it would be nice if there was a way to apply this in the block editor.

Proposed solution

In global styles, as part of the typography panel, add options to adjust the text-balance:

These properties should ideally show up only in Global Styles, as they are not useful on a per-block basis.

**Note: ** text-wrap: pretty; still isn't supported in safari & firefox. So if that option is chosen, it should should add text-wrap: balance; as a fallback.

See #62233 for an example

Issue updated Aug 13.

[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;
}

[jasmussen]

Might be good to look at this as a group; typography presets, spacing, text indents, text-wrapping, etc. Some of these properties apply differently to headings vs. paragraphs, etc. So could use a broader look.

[MaggieCabrera]

Would this be something we ever surface as a control in the UI too or just theme.json?