[css-text] Clarification about hanging spaces and max-content size

[javifernandez]

The CSS WG resolved recently (issue #3440) that preserved spaces by pre-wrap, if not followed by a forced break, must hang:

https://drafts.csswg.org/css-text-3/#white-space-phase-2

If white-space is set to pre-wrap, the UA must (unconditionally) hang this sequence, unless the sequence is followed by a forced line break, in which case it must conditionally hang the sequence is instead.

The above mentioned resolution included a clarification of the concept of hung vs conditionally hung glyph, which regarding this issue implies the following:

https://drafts.csswg.org/css-text-3/#hang

The hanging glyph is also not taken into account when computing intrinsic sizes (min-content size and max-content size), and any sizes derived thereof.

So, I wonder whether the following case is covered by the statements described before:

<div style="font: 20px/1 Ahem; color: green; background: red; width: max-content; white-space: pre-wrap">XX&#x0020;</div>

I'm not sure if the concept if "hanging glyph" implies that such glyph would otherwise overflow; at least I don't find that in the definition if hung descried in the link above. This is perhaps the first clarification I'd ask (if that's the case maybe we can add something in the spec about it)

Following what the White Space Processing Phase II states, the trailing space sequence must hang, hence it should not account for the box's max-content size. So, I'd expect no red color will be shown when rendering the example. However, both Firefox and Chrome renders the mentioned example as follows:

[frivoal]

In this case, the   is at the end of the div, so it is before a forced like break (https://drafts.csswg.org/css-text-3/#forced-line-break). In that case, as you quoted, “it must conditionally hang the sequence is instead”.

Conditionally hanging is at https://drafts.csswg.org/css-text-3/#conditionally-hang, two paragraphs after https://drafts.csswg.org/css-text-3/#hang (which is the one you quoted). It says:

Glyphs that conditionally hang are not taken into account when computing min-content sizes and any sizes derived thereof, but they are taken into account for max-content sizes and any sizes derived thereof.

So, in this case, the space is taken into account for max-content, the size of the div is 3 characters, and you see red.

[frivoal]

btw, this is a nice test case, thanks.

I still need to update the tests in wpt to match the resolution of #3440

[javifernandez]

In this case, the is at the end of the div, so it is before a forced like break

Wow, I didn't realize about the end line being a forced break. With that in mind, seeing red makes sense and it's correctly defined in the spec.

Give me some time to think on other possible cases before closing the issue, but so far, everything looks sensible.

[javifernandez]

Ok, everything is clear on my side. Thanks for the feedback.