[css-pseudo] ::first-line and line-height

[OxyDesign]

Specs: https://www.w3.org/TR/css-pseudo-4/#first-line-pseudo

The part of the specs related to the issue raised:

The ::first-line pseudo-element’s generated box behaves similar to that of an inline-level element, but with certain restrictions. The following CSS properties apply to a ::first-line pseudo-element:

- all font properties (see [CSS3-FONTS])
- the color and opacity properties (see [CSS3COLOR])
- all background properties (see [CSS3BG])
- any typesetting properties that apply to inline elements (see [CSS3TEXT])
- all text decoration properties (see [CSS3-TEXT-DECOR])
- any inline layout properties that apply to inline elements (see [CSS3LINE])
- any other properties defined to apply to ::first-line by their respective specifications

I'm opening this ticket because I've recently used the ::first-line pseudo element and realized that the line-height property for that pseudo element:

• is implemented in a different way in each browser
• doesn't behave as I was expecting (inline VS block)

A short code sample to explain: https://codepen.io/OxyDesign/pen/bc9238f85b871ba1059bc43c953c7a46
(The pseudo element ::first-line has a smaller line-height)

• Chrome (63) applies the reduced line-height
• Firefox (58) doesn't apply the reduced line-height
• Safari (10) applies the reduced line-height but only if the line is not broken with a <br>, in that case it doesn't apply the reduced line-height
• Internet Explorer (I could only have a quick look at 9, 10 and 11) seems to follow the same logic as Chrome

So that might not be really clear on that point because each browser seems to have its own interpretation.

The second point is that the specs says that it should "behaves similar to that of an inline-level element". I was expecting this to behave as a block-level element. I understand that ::first-letter should behave as an inline-element as it's part of the text content of a block and is just a part of the line. But ::first-line is clearly supposed to use the whole width available. Anything that is on this line is included in the ::first-line definition, therefore should behave like a block in my humble opinion.

The code samples shows that the first line has a smaller font-size, so indeed I wanted to apply a smaller line-height which is not applied by FF and (partially) by Safari because as an inline-level element it shouldn't. But I think this behavior would make only sense for the ::first-letter as it's part of a line and we don't want the line to be shrink by the ::first-letter's line-height. But in the ::first-line case there is no possibility that any other content would be in the same line without being a part of the ::first-line pseudo element so that shouldn't behave like that I think.

[Loirooriol]

CSS 2 says that line-height on a block container behaves as a minimum height value for the line boxes inside it, due to the strut.

However, it seems CSS Inline tries to explain this behavior by introducing a root inline box that inherits the line-height from the block container.

Then, the question is: how do the root inline box and ::first-line interact? That's #1384.

So if the strut no longer exists and the fragment in the first line of the root inline box inherits from ::first-line, then I expect a reduced line height. If the strut still exists or all the root inline box fragments inherit from the block container, then I don't expect a reduced line height.

See bug 1427241.

---

Anything that is on this line is included in the ::first-line definition, therefore should behave like a block in my humble opinion.

But a ::first-line does not stretch to fill all the available space as a block would do by default. See https://jsfiddle.net/q36d3wmx/

[fantasai]

Reduced testcase

So I guess this is the practical impact of @Loirooriol’s question in #1384. :)
It does seem to me that letting the ::first-line’s line-height affect the root inline fragment on the first line is helpful, so maybe we want to resolve on that?

[css-meeting-bot]

The CSS Working Group just discussed [css-pseudo] ::first-line and line-height, and agreed to the following:

• RESOLVED: Align with chromium behavior for ::first-line and line-height

The full IRC log of that discussion

<dael> Topic: [css-pseudo] ::first-line and line-height
<dael> github: https://github.com//issues/2282
<dael> fantasai: Is ::first-line about to effect root inline elemnt fragment. Then an issue about if line-height can be changed about first-line. Same question.
<dael> fantasai: Seems to me letter it effect makes sense. Prop: root inline fragment on the first line is inside the ::first-line and therefore is effected by changes in size
<dael> oriol: Clarify, it's not jsust being able to change line-height, but also set smaller then line-height in the block container or is block container the min value
<dael> Rossen_: Currently block container is the min and the prop here allow it to be smaller
<dael> oriol: Depends on impl. In FF block cotnainer is a min but in chromium you can reduce to smaller
<Rossen_> q?
<dael> Rossen_: Which are we prop to change to? chromium or FF?
<dael> oriol: I think fantasai proposed chromium
<dael> Rossen_: So ability to set sizes smaller than block container
<dael> Rossen_: Additional comments or feedback?
<dael> RESOLVED: Align with chromium behavior for ::first-line and line-height