1758391 - Convert text-wrap CSS property to a shorthand

Status: RESOLVED FIXED

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

Description

[Sebastian Zartner [:sebo]]

CSS Text Module Level 4 defines a text-wrap property that specifies the mode for text wrapping.

Comment 1

[Jonathan Kew [:jfkthame]]

Bug 1731541 is introducing text-wrap, but only as a longhand to expose the text-wrap: balance value (which is already shipping in other browsers, and gaining traction on the web).

However, the spec is evolving to make both white-space (see bug 1852478) and text-wrap into shorthands, having some overlap in associated longhands, so once the bikeshedding dust settles we should do that restructuring here.

Comment 2

[Jonathan Kew [:jfkthame]]

Attachment: Bug 1758391 - Rename `text-wrap` to `text-wrap-style`, and create the `text-wrap` shorthand. r=#style

This depends on having text-wrap-mode, introduced in bug 1852478 as part of
turning white-space into a shorthand.

Depends on D198790

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/01711557e2bf
Rename `text-wrap` to `text-wrap-style`, and create the `text-wrap` shorthand. r=firefox-style-system-reviewers,emilio

Comment 4

[Narcis Beleuzu [:NarcisB]]

Backed out for failures on test_animation-type-longhand.html

Backout link: https://hg.mozilla.org/integration/autoland/rev/58cedc1e4ff28881f9ebd1749feaa24edbded9ce
Log link: https://treeherder.mozilla.org/logviewer?job_id=444130137&repo=autoland&lineNumber=2966

There were also:

1. Reftest failure on word-spacing-01.html
2. Bustages on HTMLEditorDeleteHandler.cpp

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/c0fa98fec39a
Rename `text-wrap` to `text-wrap-style`, and create the `text-wrap` shorthand. r=firefox-style-system-reviewers,emilio

Comment 6

[Cristian Tuns]

Backed out for causing build bustages in UseCounterMetrics.cpp

• Backout link
• Push with failures
• Failure Log
• Failure line: /builds/worker/workspace/obj-build/dom/base/UseCounterMetrics.cpp(1589,38): error: no member named 'css_text_wrap_mode' in namespace 'mozilla::glean::use_counter_css_page'; did you mean 'css_text_wrap'?

Comment 7

[Jonathan Kew [:jfkthame]]

Sigh... broken rebase. Trying again.

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/99028aaeb246
Rename `text-wrap` to `text-wrap-style`, and create the `text-wrap` shorthand. r=firefox-style-system-reviewers,emilio

Comment 9

[Sandor Molnar[:smolnar]]

https://hg.mozilla.org/mozilla-central/rev/99028aaeb246

Comment 12

[Dave Letorey]

I feel that I may have found a very weird bug related to this, it only affects firefox when using :has() with a radio button, when setting text-wrap: balance; or text-wrap-style: balance; and only with the font Georgia.

I have created two codepens and the only difference is the font.

• With font-family: Georgia
• With font-family: Didot

You can see that the :has() selector is working becasue the color of the text is changing.

I have also created other codepens that help prove this, both of which work as expected:

• With font-family: Georgia and checkbox instead of radio button
• With font-family: Georgia

• this is probably not the correct place to report this, but it's just so weird

Comment 13

[Jonathan Kew [:jfkthame]]

It'd be better to file a new report, so that we have the example on record as an open issue. (Comments on already-closed issues tend to get lost and forgotten...)

From a quick look, I think what you're seeing is a natural result of the "balancing" algorithm Firefox currently uses, which has the effect of minimizing the longest line length in the block. In this particular example, the original "un-balanced" layout has a longest line of 571px (line 2), and there's no alternative layout (given the available line-break options) that will be more compact. In the "balanced" result that I see in Chrome, the 3rd line actually ends up longer at 577px, although arguably their result may be better-looking in that the three lines have a more even spread of lengths (short, medium and long) rather than being two longer lines and one shorter.

Here's a codepen where you can see that this is the stable 3-line layout Firefox chooses for this particular text and font combination, as the available width varies.

Anyhow, I think it's behaving as expected given the algorithm in use, but that's not necessarily the final word; alternative heuristics could perhaps be considered. Again, feel free to file it as a new issue.

Comment 14

[Dave Letorey]

Related pull requests

• Content PR
• BCD PR
• data PR
• Interactive examples PR
• Firefox Release note