Closed Bug 1731541 (interop-2024-text-wrap-balance) Opened 3 years ago Closed 7 months ago

Implement CSS `text-wrap: balance`

Categories

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

enhancement

Tracking

()

RESOLVED FIXED
120 Branch
Tracking Status
firefox120 --- fixed

People

(Reporter: bramus, Assigned: jfkthame)

References

(Blocks 1 open bug)

Details

(Keywords: dev-doc-complete, parity-chrome)

Attachments

(4 files)

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

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.

Component: Untriaged → Layout: Text and Fonts
Product: Firefox → Core

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.

No longer blocks: 1825140
Severity: -- → S3
Status: UNCONFIRMED → NEW
Ever confirmed: true

(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.)

Blocks: 1825140
Keywords: parity-chrome
Blocks: 1758391
No longer blocks: 1758391
Depends on: 1758391

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.

Assignee: nobody → jfkthame
Status: NEW → ASSIGNED

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

Keywords: dev-doc-needed

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

Pushed by jkew@mozilla.com:
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

Backed out for causing bustage on nsBlockFrame.cpp

[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
Flags: needinfo?(jfkthame)
Pushed by jkew@mozilla.com:
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
Pushed by smolnar@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/c185a38fb335
Fix wpt failures. r=jfkthame CLOSED TREE
Pushed by jkew@mozilla.com:
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
Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/42266 for changes under testing/web-platform/tests
Upstream PR merged by moz-wptsync-bot
Regressions: 1856226
Regressions: 1856227
Regressions: 1856629
Depends on: 1858421
Blocks: 1860446
Alias: interop-2024-text-wrap-balance
Blocks: interop-2024
Flags: needinfo?(jfkthame)
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: