[css-pseudo] Clarify spec text in "Finding the First Formatted Line" section

[mrego]

Spec: https://drafts.csswg.org/css-pseudo/#first-text-line

The spec says:

The first line of a table-cell or inline-block cannot be the first formatted line of an ancestor element. Thus, in <DIV><P STYLE="display: inline-block">Hello<BR>Goodbye</P> etcetera</DIV> the first formatted line of the DIV is not the line "Hello".

It'd be nice to clarify what the first line is in that example. It only says that it's not the line "Hello", but what about the line "Goodbye etcetera" or only the word "etcetera".
Also there's no browser interoperability if you add for example:

<style>div::first-line { color: cyan; background: magenta; }</style>

All browsers do weird things. 😄

For example for first-letter the text is clearer:

In CSS the first letter of a table-cell or inline-block cannot be the first letter of an ancestor element. Thus, in <DIV><P STYLE="display: inline-block">Hello<BR>Goodbye</P> etcetera</DIV> the first letter of the DIV is not the letter "H". In fact, the DIV doesn’t have a first letter.

It says that it's not the "H" and that there's no first letter in that example. So things are 100% clear.

[MatsPalmgren]

FYI, Firefox doesn't support applying first-letter/line inside descendant blocks yet (bug 214004), so for the given example the entire <DIV> contents is wrapped in a ::first-line pseudo. Given the limitations of our existing implementation, the rendering makes sense, i.e. it renders exactly the same as:

<style>span { color: cyan; background: magenta; }</style>
<div><span><p style="display: inline-block">Hello<br>Goodbye</p> etcetera</span></div>

[SelenIT]

I read this as the intent to completely exclude inline-block descendants from ::first-line, because the second line of the inline-block doesn’t feel like the first line of anything at all, and the first line of such descendants is excluded explicitly. If my understanding is correct, maybe it would make sense to replace the words “the block descendants in the same flow” with “the block descendants that don’t establish the new block formatting context” to clarify and generalize this rule?

[mrego]

JFTR, in the following codepen there are more examples or interop issues between browsers in both ::first-line and ::first-letter: https://codepen.io/mrego/pen/PEGRmK

I have a hard time to be sure what's the expected behavior in each of them. 😇

[fantasai]

This entire section has been rewritten per @Loirooriol’s instructions in #1158
I think the answers to these questions are now clear? @mrego Let me know if anything is still unclear. :)

[mrego]

Sorry for the slowness replying here.

I like the edits, and I think the clarify things. According to them Firefox is doing it right (see first comment).

Anyway I think there's one bit that is confusing:

Note: The first line of a block container that does not participate in a block formatting context cannot be the first formatted line of an ancestor element. Thus, in <DIV><P STYLE="display: inline-block">Hello<BR>Goodbye</P> etcetera</DIV> the first formatted line of the DIV is not the line “Hello”, but rather the (otherwise empty) line that contains that entire inline block.

otherwise empty has confused me about this stuff. In this example the first line contains the inline-block, so it's not empty at all. Why the spec says "otherwise empty"? Could we use a different wording there?

[frivoal]

It's otherwise empty rather than empty, precisely because it contains the inline-block and nothing else. It's empty except for that inline block. So I think the wording is correct. But it may still be confusing, so if you have a better suggestion…

[mrego]

It contains the inline block, but also the word "etcetera" if there's enough available space. If there's not and "etcetera" moves to a second line it doesn't include it.

At least that's what Firefox does, see that "etcetera" has cyan color on the first screenshot.

[SelenIT]

Maybe something like "...the first formatted line of the DIV is not the line “Hello”, but rather the line that contains that entire inline block, regardless of whether the inline block is the only content in this line or not" will be more unambiguous?

[frivoal]

the same comment applies to the later note about first-letter:

In fact, the DIV doesn’t have a first letter, as its first formatted line contains no content besides the inline block.

Its first formatted line may contain the word etcetera, depending on the width.

[fantasai]

Thanks for the review! Deleted the phrase "otherwise empty" and truncated the second half of the first-letter sentence. I think it should all be good now. :)