Description
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:
- 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?
- What is the used value of line-height for the anonymous inline and why? For the block and why?
- 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. - If the
<span>
has a font-family style that differs from that of the<div>
, what font is used by the text? - 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....