1731541 - (interop-2024-text-wrap-balance) Implement CSS `text-wrap: balance`

Status: RESOLVED FIXED

(Core :: Layout: Text and Fonts, enhancement)

Description

[Bramus]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.82 Safari/537.36

Steps to reproduce:

Spec Link: https://www.w3.org/TR/2019/WD-css-text-4-20191113/#valdef-text-wrap-balance

Illustration, explaining the difference between centered and balanced text: https://www.bram.us/2013/02/07/automatic-text-balancing-on-the-web-for-better-readability/

JS Workaround people can use, awaiting support: https://codeberg.org/da/text-balancer

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::Layout: Text and Fonts' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.

Comment 2

[tobias.buschor]

Chromium is about to ship this feature:
https://groups.google.com/a/chromium.org/g/blink-dev/c/f5eLz6PIXaI/m/R__N3BdjAAAJ

Since a website works well without this feature, developers will soon use it. Even if it doesn't look so good in Firefox then.

Comment 3

[Jamie Katz]

https://developer.chrome.com/blog/css-text-wrap-balance/

Comment 4

[Daniel Holbert [:dholbert]]

(In reply to tobias.buschor from comment #2)

Chromium is about to ship this feature:
https://groups.google.com/a/chromium.org/g/blink-dev/c/f5eLz6PIXaI/m/R__N3BdjAAAJ

(Note, there's been a lot of discussion on that thread, resulting in some substantial changes/improvements to the spec and to Chrome's pending implementation.)

Comment 5

[Jonathan Kew [:jfkthame]]

Attachment: Bug 1731541 - Add CSS property text-wrap: auto | stable | balance. r=#style

Just the CSS property; not hooked up to any rendering behavior yet.

Currently this is implemented as a simple longhand text-wrap property,
but we'll want to rename it to text-wrap-style when we update white-space
to be a shorthand and introduce white-space-collapse, text-wrap-mode, etc.

The 'pretty' value is omitted as we have no immediate plans to implement it.
Initially, 'auto' and 'stable' will behave identically, although 'auto' could
change in future once we have higher-quality algorithms available.

Comment 6

[Jonathan Kew [:jfkthame]]

Attachment: Bug 1731541 - Implement text-wrap: balance for nsBlockFrame reflow. r=#layout-reviewers

A simple form of balance for short blocks, implemented by incrementally reducing
the effective inline-size used during line-breaking, up to the point where an
extra line would be created.

This fails the test text-wrap-balance-line-clamp-001.html, but it's unclear to me
if that test is correct (see https://github.com/w3c/csswg-drafts/issues/9310).
If we do want the behavior expected by that test, an additional patch to handle
the interaction with line-clamp will be required.

Depends on D187543

Comment 7

[Jonathan Kew [:jfkthame]]

Attachment: Bug 1731541 - Add a few WPT reftests using text-wrap:balance together with floats. r=#layout-reviewers

Depends on D187544

Comment 8

[Ronel]

As of my last knowledge update in September 2021, Mozilla Firefox had not implemented the text-wrap: balance CSS property. It's essential to check the latest documentation and release notes for Mozilla Firefox to see if there have been any updates or changes since then.

text-wrap: balance is a proposed CSS property that aims to provide better control over how text is wrapped and balanced in a container, particularly in multi-column layouts. It would help in balancing the text distribution across columns, making it visually appealing.

To keep up with the latest developments and see if Mozilla Firefox has implemented this property, you can visit the official Mozilla Firefox website (https://www.mozilla.org/en-US/firefox/) or refer to their developer documentation (https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap).

You can also check the CSS Working Group's specifications (https://drafts.csswg.org/css-text-4/#propdef-text-wrap) to see if there have been any updates regarding the text-wrap: balance property. Keep in mind that browser support for new CSS properties may vary, so it's essential to test your CSS code in multiple browsers to ensure compatibility.

https://sites.google.com/view/inbox-hotmail/hotmaillogin
https://sites.google.com/view/maillogin-signup/gmailcom-login

Comment 9

[Jonathan Kew [:jfkthame]]

Attachment: Bug 1731541 - When line-clamp is in effect, make text-wrap:balance consider only the lines up to the clamp limit. r=#layout-reviewers

This corresponds to how Chrome behaves, and passes the test they included in WPT.

It's unclear to me whether this behavior actually follows from the current spec
(see https://github.com/w3c/csswg-drafts/issues/9310), but it seems to be the desired
result.

(I've put it behind a (default-enabled) pref for now, so that it's possible to
experiment with the two possible interpretations, but we can remove the pref once
the spec question is clarified/confirmed.)

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/5926241957b4
Add CSS property text-wrap: auto | stable | balance. r=devtools-reviewers,emilio
https://hg.mozilla.org/integration/autoland/rev/0fd4431f5279
Implement text-wrap: balance for nsBlockFrame reflow. r=emilio
https://hg.mozilla.org/integration/autoland/rev/71d889de8d97
Add a few WPT reftests using text-wrap:balance together with floats. r=emilio
https://hg.mozilla.org/integration/autoland/rev/7ce2b41bb730
When line-clamp is in effect, make text-wrap:balance consider only the lines up to the clamp limit. r=emilio

Comment 11

[Natalia Csoregi [:nataliaCs]]

Backed out for causing bustage on nsBlockFrame.cpp

• backout: https://hg.mozilla.org/integration/autoland/rev/2f46b4983d1df519da6e13b5fd02006d011574f0
• push: https://treeherder.mozilla.org/jobs?repo=autoland&group_state=expanded&revision=7ce2b41bb730247e00da9c69a1df9a01df80633d
• failure log: https://treeherder.mozilla.org/logviewer?job_id=430615412&repo=autoland&lineNumber=22735

[task 2023-09-28T08:52:59.756Z] 08:52:59     INFO -  In file included from Unified_cpp_layout_generic1.cpp:92:
[task 2023-09-28T08:52:59.756Z] 08:52:59    ERROR -  /builds/worker/checkouts/gecko/layout/generic/nsBlockFrame.cpp(1490,28): error: comparison of integers of different signs: 'int32_t' (aka 'int') and 'size_type' (aka 'unsigned int') [-Werror,-Wsign-compare]
[task 2023-09-28T08:52:59.756Z] 08:52:59     INFO -   1490 |     MOZ_ASSERT(aClampCount < mLines.size());
[task 2023-09-28T08:52:59.756Z] 08:52:59     INFO -        |                ~~~~~~~~~~~ ^ ~~~~~~~~~~~~~
[task 2023-09-28T08:52:59.756Z] 08:52:59     INFO -  /builds/worker/workspace/obj-build/dist/include/mozilla/Assertions.h(444,24): note: expanded from macro 'MOZ_ASSERT'
[task 2023-09-28T08:52:59.756Z] 08:52:59     INFO -    444 |         ("MOZ_ASSERT", __VA_ARGS__))
[task 2023-09-28T08:52:59.757Z] 08:52:59     INFO -        |                        ^~~~~~~~~~~
[task 2023-09-28T08:52:59.757Z] 08:52:59     INFO -  /builds/worker/workspace/obj-build/dist/include/mozilla/Assertions.h(434,33): note: expanded from macro 'MOZ_ASSERT_GLUE'
[task 2023-09-28T08:52:59.757Z] 08:52:59     INFO -    434 | #define MOZ_ASSERT_GLUE(a, b) a b
[task 2023-09-28T08:52:59.758Z] 08:52:59     INFO -        |                                 ^
[task 2023-09-28T08:52:59.758Z] 08:52:59     INFO -  /builds/worker/workspace/obj-build/dist/include/mozilla/Assertions.h(414,51): note: expanded from macro 'MOZ_ASSERT_HELPER1'
[task 2023-09-28T08:52:59.759Z] 08:52:59     INFO -    414 |     if (MOZ_UNLIKELY(!MOZ_CHECK_ASSERT_ASSIGNMENT(expr))) {    \
[task 2023-09-28T08:52:59.759Z] 08:52:59     INFO -        |                                                   ^~~~
[task 2023-09-28T08:52:59.760Z] 08:52:59     INFO -  /builds/worker/workspace/obj-build/dist/include/mozilla/StaticAnalysisFunctions.h(62,73): note: expanded from macro 'MOZ_CHECK_ASSERT_ASSIGNMENT'
[task 2023-09-28T08:52:59.760Z] 08:52:59     INFO -     62 | #  define MOZ_CHECK_ASSERT_ASSIGNMENT(expr) MOZ_AssertAssignmentTest(!!(expr))
[task 2023-09-28T08:52:59.761Z] 08:52:59     INFO -        |                                                                         ^~~~
[task 2023-09-28T08:52:59.761Z] 08:52:59     INFO -  /builds/worker/workspace/obj-build/dist/include/mozilla/Likely.h(17,48): note: expanded from macro 'MOZ_UNLIKELY'
[task 2023-09-28T08:52:59.761Z] 08:52:59     INFO -     17 | #  define MOZ_UNLIKELY(x) (__builtin_expect(!!(x), 0))
[task 2023-09-28T08:52:59.762Z] 08:52:59     INFO -        |                                                ^
[task 2023-09-28T08:52:59.763Z] 08:52:59     INFO -  1 error generated.
[task 2023-09-28T08:52:59.763Z] 08:52:59    ERROR -  gmake[4]: *** [/builds/worker/checkouts/gecko/config/rules.mk:659: Unified_cpp_layout_generic1.obj] Error 1

Comment 12

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/af42a433722a
Add CSS property text-wrap: auto | stable | balance. r=devtools-reviewers,emilio
https://hg.mozilla.org/integration/autoland/rev/eb0b125d3214
Implement text-wrap: balance for nsBlockFrame reflow. r=emilio
https://hg.mozilla.org/integration/autoland/rev/225642ff1de8
Add a few WPT reftests using text-wrap:balance together with floats. r=emilio
https://hg.mozilla.org/integration/autoland/rev/16a3de29e4e6
When line-clamp is in effect, make text-wrap:balance consider only the lines up to the clamp limit. r=emilio

Comment 13

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/c185a38fb335
Fix wpt failures. r=jfkthame CLOSED TREE

Comment 14

[Sandor Molnar[:smolnar]]

Backed out for causing multiple wpt failures

Backout link: https://hg.mozilla.org/integration/autoland/rev/2c0444cfb7d60a431997df802f4075df11fd26b0

Push with failures

Failure log -> TEST-UNEXPECTED-FAIL | /web-animations/animation-model/animation-types/accumulation-per-property-002.html | text-wrap: "nowrap" onto "wrap" - assert_equals: The value should be nowrap at 0ms expected

Failure log -> TEST-UNEXPECTED-OK | /css/css-text/parsing/text-wrap-invalid.html | expected PASS

Failure log -> TEST-UNEXPECTED-PASS | /css/css-text/parsing/text-wrap-valid.html | e.style['text-wrap'] = "auto" should set the property value - expected FAIL

Comment 15

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/2a7646e1a4a5
Add CSS property text-wrap: auto | stable | balance. r=devtools-reviewers,emilio
https://hg.mozilla.org/integration/autoland/rev/b8a405d2e140
Implement text-wrap: balance for nsBlockFrame reflow. r=emilio
https://hg.mozilla.org/integration/autoland/rev/77fce08f9637
Add a few WPT reftests using text-wrap:balance together with floats. r=emilio
https://hg.mozilla.org/integration/autoland/rev/8c9ba927121c
When line-clamp is in effect, make text-wrap:balance consider only the lines up to the clamp limit. r=emilio

Comment 16

[Web Platform Test Sync Bot (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/42266 for changes under testing/web-platform/tests

Comment 17

[Natalia Csoregi [:nataliaCs]]

https://hg.mozilla.org/mozilla-central/rev/2a7646e1a4a5
https://hg.mozilla.org/mozilla-central/rev/b8a405d2e140
https://hg.mozilla.org/mozilla-central/rev/77fce08f9637
https://hg.mozilla.org/mozilla-central/rev/8c9ba927121c

Comment 18

[Web Platform Test Sync Bot (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot

Comment 19

[Dave Letorey]

Pull Requests:

• Content
• Browser Compat Data