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 https://github.com/WordPress/gutenberg/pull/62233 for an example

Issue updated Aug 13.

[richtabor]

Related in part: https://github.com/WordPress/gutenberg/issues/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: https://github.com/WordPress/gutenberg/issues/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?

[jasmussen]

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

I think we should always strive to have UI options for each theme.json property, with only a few exceptions. Though it can certainly start in theme.json only, and get a UI at a later time. There's also a question on whether we want options, i.e. do you want it for headings only or also for paragraphs? Do you want pretty or balance? Perhaps nowrap and wrap?

It could be something like this:

Figma.

[jasmussen]

A note to self: these text wrapping properties are related to other global writing settings like text-justification (justified text etc) that make sense only when they are global.

[benniledl]

Please also add the ability to add an ­ inline element so that languages where a word needs to break at a specific spot can do so. https://github.com/WordPress/gutenberg/issues/55565

[jasmussen]

@at-benni can you use shift-enter to force an inline line-break?

[benniledl]

It should not break on desktop, it should only break when it does not have enough space. Just like ­ does

[jasmussen]

I wasn't familiar with ­, looks like it's a soft-hyphen. But I'm not sure how you'd use that. Would something like CSS hyphenation options work?

[benniledl]

I am not sure, I tested it but I don't think it's suitable.

German has a lot of long words, and provides rules where the word break should be so it should not just be random but it should be decided by the editor.

Arbeiterunfallversicherungsgesetz should break like this: Arbeiterunfall- versicherungsgesetz

[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 https://github.com/WordPress/gutenberg/pull/62233 for an example

[jasmussen]

Here's another somewhat simpler mockup:

In this one, pretty text-wrapping simply becomes a toggle. There's room in this mockup also for future text-indent toggles, as well as orientation. The latter may or may not be a fit for global styles, but for now I've made room for it. @richtabor any thoughts? It seems a fairly simple thing to ask for dev-help on, if we can unstick the design. CC: @jameskoster as well for instincts.

[jameskoster]

Personally I prefer the previous mockup. In this latest concept I worry too much information has been extracted, to the point it's not clear what the option does. Maybe it would work with different icons, but to me this feels like a case where some help text is warranted.

[jasmussen]

Here's a new mockup that restores the dropdown. It can then contain both "Pretty" and "Balance", where the latter can be good for some heading-based designs.

Edit: updated image to fix "appearance" typo.

This uses the same dropdown type that "Appearance" does, allowing it to show help-text next to each item.

[jameskoster]

Assuming the label should be "Text wrap" rather than "Appearance" that looks good to me, outside of a couple of minor copy considerations:

• Unsure if Default needs help text.
• "No wrapping" → "None"?
• Shorter help text for pretty: "Avoid typographic widows"?
• Shorter help text for balanced: "Evenly distribute text across lines"?
• Shorter no wrapping help text: "Force full text on to a single line"?

[jasmussen]

Good catch on the typo, yes it should be text wrap. Trying an i4 based on your feedback:

Great text-change suggestions. I did keep the help-text for default, though. Both because the 4 options look more balanced and equal with that in place, also because what actually is "default"?

[jameskoster]

:shipit:

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

[hanneslsm]

even more valuable, to also add the setting of "nowrap".

nowrap is for the average user probably only useful when there are also overflow settings. Could getting very complicated though.

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