Closed foolip closed 7 months ago
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.
@nt1m do you know if there are tests for those longhand properties?
@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
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.
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
It would be good to exclude interaction with floats / line-clamp from the focus area.
@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?
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.
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
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.
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
Standards Positions
https://github.com/mozilla/standards-positions/issues/755 https://github.com/WebKit/standards-positions/issues/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 https://github.com/Devographics/Monorepo/issues/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.