Implement CSS `text-wrap: balance`
Categories
(Core :: Layout: Text and Fonts, enhancement)
Tracking
()
Tracking | Status | |
---|---|---|
firefox120 | --- | fixed |
People
(Reporter: bramus, Assigned: jfkthame)
References
(Blocks 2 open bugs)
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
Comment 1•3 years ago
|
||
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•2 years ago
|
||
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.
Updated•1 year ago
|
Comment 4•1 year ago
|
||
(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.)
Updated•1 year ago
|
Assignee | ||
Comment 5•1 year ago
|
||
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.
Updated•1 year ago
|
Assignee | ||
Comment 6•1 year ago
|
||
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
Updated•1 year ago
|
Assignee | ||
Comment 9•1 year ago
|
||
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•1 year ago
|
||
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
Comment 11•1 year ago
|
||
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•1 year ago
|
||
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
Comment 13•1 year ago
|
||
Pushed by smolnar@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/c185a38fb335 Fix wpt failures. r=jfkthame CLOSED TREE
Comment 14•1 year ago
|
||
Backed out for causing multiple wpt failures
Backout link: https://hg.mozilla.org/integration/autoland/rev/2c0444cfb7d60a431997df802f4075df11fd26b0
Failure log -> TEST-UNEXPECTED-OK | /css/css-text/parsing/text-wrap-invalid.html | expected PASS
Comment 15•11 months ago
|
||
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
Comment 17•11 months ago
|
||
bugherder |
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
Upstream PR merged by moz-wptsync-bot
Updated•7 months ago
|
Assignee | ||
Updated•6 months ago
|
Description
•