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

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

[MaggieCabrera]

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

[fabiankaegy]

Also just noting that text-wrap: pretty still isn't supported in safari & firefox. So we should add text-wrap: balance as a fallback.

See #62233 for an example

[jasmussen]

Updated the issue and shuffled the labels to indicate, this is ready!

[Drivingralle]

I like the idea.
My suggestion to make the effort of adding another control to the interface even more valuable, to also add the setting of "nowrap".

That can be very useful while creating websites with lists or tables full of details that should not be wrapped. like pricing tables.

[jasmussen]

My suggestion to make the effort of adding another control to the interface even more valuable, to also add the setting of "nowrap".

Nowrap is included as the "None" option, with additional help-text below.