text-wrap: balance

[foolip]

Description

text-wrap: balance adjusts line breaking to balance the lengths of lines in a paragraph, for better readability and to prevent typographic widows. This feature is often used in headlines. It is also called headline balancing.

WebVTT also uses text-wrap: balance.

Specification

https://drafts.csswg.org/css-text-4/#valdef-text-wrap-style-balance

Open Issues

https://github.com/w3c/csswg-drafts/issues?q=is%3Aissue+is%3Aopen+text-wrap+balance

Tests

https://wpt.fyi/results/css/css-text/white-space?label=master&label=experimental&aligned&q=balance
https://wpt.fyi/results/css/css-text/parsing/text-wrap-valid.html?label=master&label=experimental&aligned

Current Implementations

• Blink
• Gecko
• WebKit

Standards Positions

mozilla/standards-positions#755
WebKit/standards-positions#143

Browser bug reports

https://bugzilla.mozilla.org/show_bug.cgi?id=1731541
https://bugs.webkit.org/show_bug.cgi?id=249840

Developer discussions

https://clagnut.com/blog/2424
https://medium.com/swlh/typographic-orphans-on-the-web-266e32f756fe

Polls & Surveys

https://2023.stateofcss.com/en-US/features/typography/#text_wrap_balance

There are 20 freeform comments here, for example "Waiting for support to be above 90%, very cool feature"

It's also in the "Other Answers" section of https://2023.stateofcss.com/en-US/usage/#css_interoperability_features. Note also Devographics/Monorepo#324 if comparing the number of "Other Answers" to the main view.

Existing Usage

https://chromestatus.com/metrics/feature/timeline/popularity/4544

Workarounds

No response

Accessibility Impact

No response

Privacy Impact

No response

Other

Blink's Intent to Ship: https://groups.google.com/a/chromium.org/g/blink-dev/c/f5eLz6PIXaI/m/R__N3BdjAAAJ

https://software.hixie.ch/utilities/js/live-dom-viewer/?saved=12038 is a quick test of support. Resize the window until the line breaks and see where the line break happens.

Although the implementation bugs for Gecko and WebKit are closed, I wasn't able to make this test work. It looks like in Safari Technology Preview it's behind a "CSS text-wrap: balance stable pretty" flag which is disabled by default. For Firefox, I couldn't find anything in about:config.

[nt1m]

I would be interested in seeing interop regarding the related longhand properties (white-space-collapse, white-space, text-wrap-style/mode). Chrome currently implements an old version of the properties.

[foolip]

@nt1m do you know if there are tests for those longhand properties?

[nt1m]

@nt1m do you know if there are tests for those longhand properties?

Yes I updated them recently: https://wpt.fyi/results/css/css-text/parsing?label=master&label=experimental&aligned&q=text-wrap

[nt1m]

Hmm, there are none testing specifically text-wrap-mode / text-wrap-style but they could be added pretty easily. Only tests for the shorthand right now.

[kojiishi]

I would be interested in seeing interop regarding the related longhand properties (white-space-collapse, white-space, text-wrap-style/mode). Chrome currently implements an old version of the properties.

Blink shipped white-space-collapse and shorthadified white-space. Shorthandifying white-space required a number of sites to change, so I hope sites are ready by now. We're aware of the recent spec change for text-wrap after we shipped it. We're happy to match what other implementations ship.

It looks like Gecko is going to ship text-wrap: balance as a longhand in its initial release, and then shorthandify it in future. @jfkthame
https://groups.google.com/a/mozilla.org/g/dev-platform/c/uAscf5sfEdc/m/0EQcFYqxAAAJ

[nt1m]

It would be good to exclude interaction with floats / line-clamp from the focus area.

[foolip]

@nt1m does that mean the test with "float" or "line-clamp" in their names in https://wpt.fyi/results/css/css-text/white-space?label=master&label=experimental&aligned&q=balance?

[nt1m]

Yes. I think it's more important that all browsers get the shorthands / longhands right: https://wpt.fyi/results/css/css-text/parsing?label=master&label=experimental&aligned&q=text-wrap

Otherwise, it will lead to web compat issues in the future, especially with Chrome supporting white-space: balance which is no longer the latest spec.

[gsnedders]

I believe specifically we're in favour of https://wpt.fyi/results/?label=master&label=experimental&aligned&q=%28path%3A%2Fcss%2Fcss-text%2Fwhite-space%20and%20balance%20and%20not%20float%20and%20not%20line-clamp%29%20or%20%28path%3A%2Fcss%2Fcss-text%2Fparsing%20and%20text-wrap%20and%20not%20subtest%3Apretty%29

[jgraham]

This proposal has been accepted as part of Interop 2024! On behalf of the entire Interop team, thank you for proposing it. You’ll be able to track progress on this topic throughout the year via the Interop 2024 dashboard.