Skip to content

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

Closed
@bzbarsky

Description

@bzbarsky

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....

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions