[csswg-drafts] [css-display] Sort out interaction of "display:contents" with font-size and line-height

bzbarsky has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-display] Sort out interaction of "display:contents" with font-size and line-height ==
CSS 2.1 has an invariant that can be summarized as follows: "any piece of text is contained in an inline box whose computed values for font-size and line-height match those of the text".  That's to the extent that text has computed values at all, of course.

Now consider this testcase:

    <div style="border: 1px solid black; font-size: 10px;">
       <span style="display: contents; font-size: 50px;">Text</span>
    </div>

What is the expected layout?  In terms of the box tree, the `<span>` doesn't exist.  The box tree is constructed as if "Text" were a child of the `<div>` and per https://www.w3.org/TR/CSS21/visuren.html#anonymous (which nothing supersedes, afaict) there is an anonymous inline box whose computed font-size is "10px" and computed line-height is "normal".

Obvious questions:

1) What is the actual size of the text?  Is it 10px or 50px, and why?  That is, does text have independent computed font-size even though it's not actually a box in the box tree?
2) What is the used value of line-height for the anonymous inline and why?  For the block and why?
3) If the `<span>` had a line-height specified, would that have any effect on anything?  As far as I can tell from current spec language, no, because the text itself is not a box and hence does not participate in the line layout algorithm.  What participates is the anonymous inline wrapping it, and that has a line-height that doesn't depend on the `<span>` in any way.
4) If the `<span>` has a font-family style that differs from that of the `<div>`, what font is used by the text?
5) If the `<span>` has a font-family style that differs from that of the `<div>`, which font is used to determine the ascent/descent of the anonymous inline box?  Presumably that of the `<div>`, since that's what it inherits per the linked spec above.  But that can be quite different from the actual ascent/descent of the text involved; seems wrong to me.

Basically, it would make the most sense to me if the anonymous inline for a piece of text inherited from the parent element of the text, not from the block.  Without display:contents those are the same thing, but with display:contents they're not the same at all.

Note also that this would mean that this testcase:

    <div style="border: 1px solid black; font-size: 10px;">
       <span style="display: contents; font-size: 50px; font-family: Times">Text</span>
       <span style="display: contents; font-size: 20px; font-family: Arial">Text</span>
    </div>

would need two separate anonymous inlines, whereas CSS2.1 somewhat implies that this case would only have one anonymous inline.  Of course without display:contents the number of anonymous inlines wrapping a piece of text, is not observable, nor are their boundaries....

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1249 using your GitHub account

Received on Wednesday, 19 April 2017 19:52:52 UTC