[css-pseudo] Should ::first-line include markers? #4506

Loirooriol · 2019-11-11T13:11:07Z

For ::first-letter https://drafts.csswg.org/css-pseudo-4/#application-in-css says

In CSS the first letter of a table-cell or inline-block cannot be the first letter of an ancestor element. [...] If an element is a list item (display: list-item), the ::first-letter applies to the first letter in the principal box after the marker.

But for ::first-line https://drafts.csswg.org/css-pseudo-4/#first-text-line only has the first part

The first line of a table-cell or inline-block cannot be the first formatted line of an ancestor element.

Should markers be excluded too? testcase

.inside {
  list-style-position: inside;
}
li::first-line {
  color: magenta;
}
li::first-letter {
  color: blue;
}

<ol>
  <li class="inside">inside</li>
  <li>outside</li>
</ol>

Chromium always excludes markers, Firefox includes them when they have inside positioning.

CC @MatsPalmgren

MatsPalmgren · 2019-11-11T15:10:27Z

There's a difference in how ::first-letter/line boxes are created though. A ::first-letter box is created "on the inside" wrapping just the text and becomes a descendant of any existing boxes on the line, whereas a ::first-line box is "on the outside" wrapping all boxes on the line. So for that reason I'm leaning towards Gecko's behavior making more sense here.

Also, if there are any display: inline list-item children there may be multiple ::marker boxes on the first line, so it would be a bit tricky to fragment the ::first-line to avoid those. I guess we could make a special rule to just skip over an inside marker of the block itself to avoid that complexity, but that seems a bit arbitrary to me and it also makes the assumption that an inside marker box is the first box on the line which may not be true if we add new pseudos in the future.

Excluding the ::marker also gives surprising results in some cases. For example, with ::first-line { font-size: 400% } I would expect an inside marker to also use that font-size. Maybe I'm just used to how Firefox handles it, but I'm not convinced Chrome's behavior is necessarily better.

Loirooriol · 2019-11-11T15:44:54Z

it would be a bit tricky to fragment the ::first-line

Note that Chromium already does so for atomic inlines: testcase.

MatsPalmgren · 2019-11-11T17:08:22Z

Interesting, but that behavior doesn't make much sense to me. It's also not compliant with the spec which is very clear that the ::first-line should wrap all children on the line. I tend to think it's just a bug in Chrome that you should fix.

bfgeek · 2019-11-11T18:09:30Z

Its not exactly clear what the spec intends, e.g. there is also this paragraph:

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

Which could be interpreted in different ways. E.g. skip new formatting contexts, or add logic such that "Goodbye" only matches.

There is also this paragraph:

In CSS, the ::first-line pseudo-element can only have an effect when attached to a block container. The first formatted line of an element must occur inside a block-level descendant in the same flow (i.e., a block-level descendant that is not out-of-flow due to floating or positioning).

"same flow" could be interpreted a few different ways.
https://drafts.csswg.org/css-pseudo-4/#first-text-line

Loirooriol · 2019-11-26T11:44:20Z

It seems Chromium doesn't include markers when applying ::first-line's color, but ::first-line's background includes inside markers! testcase

Firefox: . Chromium:

The marker-list-style-position.html WPT test was created by Mozilla, and it relies on inside list markers being affected by ::first-line. However, that doesn't happen in Chromium and WebKit, and the relevant issue (w3c/csswg-drafts#4506) is still open. Therefore I'm adding a 2nd expectation in order to allow both behaviors. Bug: 457718 Change-Id: Id61fbdd07940d541eb7a9638a0fc1aefc13bb545

The marker-list-style-position.html WPT test was created by Mozilla, and it relies on inside list markers being affected by ::first-line. However, that doesn't happen in Chromium and WebKit, and the relevant issue (w3c/csswg-drafts#4506) is still open. Therefore I'm adding a 2nd expectation in order to allow both behaviors. Bug: 457718 Change-Id: Id61fbdd07940d541eb7a9638a0fc1aefc13bb545 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2260618 Reviewed-by: Rune Lillesveen <futhark@chromium.org> Commit-Queue: Oriol Brufau <obrufau@igalia.com> Cr-Commit-Position: refs/heads/master@{#781817}

…list-style-position.html WPT, a=testonly Automatic update from web-platform-tests [css-pseudo] Add expectation for marker-list-style-position.html WPT The marker-list-style-position.html WPT test was created by Mozilla, and it relies on inside list markers being affected by ::first-line. However, that doesn't happen in Chromium and WebKit, and the relevant issue (w3c/csswg-drafts#4506) is still open. Therefore I'm adding a 2nd expectation in order to allow both behaviors. Bug: 457718 Change-Id: Id61fbdd07940d541eb7a9638a0fc1aefc13bb545 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2260618 Reviewed-by: Rune Lillesveen <futhark@chromium.org> Commit-Queue: Oriol Brufau <obrufau@igalia.com> Cr-Commit-Position: refs/heads/master@{#781817} -- wpt-commits: 57dde864942fec658ea66cdc0b5f9756fef468d2 wpt-pr: 24315

fantasai · 2020-12-30T22:43:41Z

@bfgeek That text is describing how to find the first line. It's not saying how deep declarations applied to the first line inherit, which is a separate question. For a two-line inline-block on the first line, definitely we wouldn't pick out only the first line to style. But I think it makes sense for the ::first-line styles to inherit through.

Wrt markers specifically, I can see arguments both ways and would be interested to hear what @dauwhe / @MurakamiShinyu / @faceless2 think about it.

MurakamiShinyu · 2021-12-28T03:14:59Z

I tested several CSS Paged Media implementations, with the PrintCSS Playground, Test: https://printcss.live/l4zbqQ3bpr, and got the following 5 different results:

Vivliostyle and Antenna House Formatter
- ::first-line excludes markers
- ::first-letter excludes markers
Paged.js
- ::first-line excludes markers, but the background includes the inside marker
- ::first-letter excludes markers
Prince and DocRaptor
- ::first-line includes the inside marker and excludes the outside marker
- ::first-letter includes the inside marker and excludes the outside marker
PDFreactor and typeset.sh
- ::first-line is not supported
- ::first-letter excludes markers
WeasyPrint
- ::first-line is not supported
- ::first-letter includes the inside marker and excludes the outside marker

I think that the ::first-letter should always exclude markers and the ::first-line should exclude the outside marker, but for the ::first-line and the inside marker both excluding and including would make sense.

faceless2 · 2021-12-28T15:05:34Z

We match Prince, or will when we fix an issue combining first-letter and first-line.

I agree with @MurakamiShinyu, and also with @MatsPalmgren above:

if there are any display: inline list-item children there may be multiple ::marker boxes on the first line
...
the ::first-line should wrap all children on the line

So while I think outside markers must be excluded, inline markers really must be considered part of the first line, for the reasons Mats raised. Here's a testcase demonstrating those reasons (which needs Firefox to display properly). If the markers weren't styled with first-line styling, it would look quite odd.

(I should add I had a good look and can't find any examples in print where first line (or first phrase) formatting is used and the paragraph begins with a numbered list. I suspect it's going to be a very unusual combination in print, at least for English. So outside of testcases for this condition I don't think it's going to come up much.)

The marker-list-style-position.html WPT test was created by Mozilla, and it relies on inside list markers being affected by ::first-line. However, that doesn't happen in Chromium and WebKit, and the relevant issue (w3c/csswg-drafts#4506) is still open. Therefore I'm adding a 2nd expectation in order to allow both behaviors. Bug: 457718 Change-Id: Id61fbdd07940d541eb7a9638a0fc1aefc13bb545 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2260618 Reviewed-by: Rune Lillesveen <futhark@chromium.org> Commit-Queue: Oriol Brufau <obrufau@igalia.com> Cr-Original-Commit-Position: refs/heads/master@{#781817} Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src Cr-Mirrored-Commit: cbc19370a775ae19d318b4a5d4a230f3a90f8052

fantasai · 2022-12-29T17:49:22Z

Agenda+ Proposed to resolve that ::first-line includes markers when list-style-position: inside and excludes them when list-style-position: outside.

(Note that for ::first-letter we already define that ::marker is excluded. This issue is only about ::first-line.)

css-meeting-bot · 2023-01-25T17:43:43Z

The CSS Working Group just discussed Should ::first-line include markers?, and agreed to the following:

RESOLVED: ::first-line applies to markers when `list-style-position` is `inside` but excludes them when it’s `outside`

The full IRC log of that discussion

<emeyer> Topic: Should ::first-line include markers?
<emeyer> github: https://github.com//issues/4506
<fantasai> -> https://github.com//issues/4506#issuecomment-1367490644
<fantasai> -> https://github.com//issues/4506#issuecomment-1001846929
<emeyer> fantasai: Does ::marker part of a ::first-line or not?
<fantasai> -> https://github.com//issues/4506#issuecomment-558592436
<emeyer> …A lot of tests were done on implementations
<emeyer> …Proposed resolution is ::first-line includes markers when `list-style-position` is `inside` but excludes them when it’s `outside`
<emeyer> oriol: I think that’s fine
<TabAtkins> No strong opinion from me, but the proposed resolution seems good
<fantasai> emeyer: So this would mean that if list-style-position is outside, and color is set by ::first-line, the marker would not pick up that color
<fantasai> Rossen_: correct
<emeyer> TabAtkins: With outside positioning, it’s positioned, so we’re considering it outside the line
<Rossen_> s/ Rossen_: correct/ TabAtkins: correct/
<emeyer> fantasai: This is important if you set a background color on the first line and it wouldn’t match well with the marker, we don]t want it to apply to that outside marker
<emeyer> s/don]t/don’t/
<emeyer> RESOLVED: ::first-line applies to markers when `list-style-position` is `inside` but excludes them when it’s `outside`

…list-style-position.html WPT, a=testonly Automatic update from web-platform-tests [css-pseudo] Add expectation for marker-list-style-position.html WPT The marker-list-style-position.html WPT test was created by Mozilla, and it relies on inside list markers being affected by ::first-line. However, that doesn't happen in Chromium and WebKit, and the relevant issue (w3c/csswg-drafts#4506) is still open. Therefore I'm adding a 2nd expectation in order to allow both behaviors. Bug: 457718 Change-Id: Id61fbdd07940d541eb7a9638a0fc1aefc13bb545 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2260618 Reviewed-by: Rune Lillesveen <futhark@chromium.org> Commit-Queue: Oriol Brufau <obrufau@igalia.com> Cr-Commit-Position: refs/heads/master@{#781817} -- wpt-commits: 57dde864942fec658ea66cdc0b5f9756fef468d2 wpt-pr: 24315

Loirooriol added the css-pseudo-4 Current Work label Nov 11, 2019

chromium-wpt-export-bot mentioned this issue Jun 23, 2020

[css-pseudo] Add expectation for marker-list-style-position.html WPT web-platform-tests/wpt#24315

Merged

Loirooriol mentioned this issue Oct 13, 2020

[css-lists][css-pseudo] Interaction of ::marker and ::first-line #1442

Closed

fantasai added the Commenter Response Pending label Dec 31, 2020

fantasai added Agenda+ and removed Commenter Response Pending labels Dec 29, 2022

css-meeting-bot removed the Agenda+ label Jan 25, 2023

mozilla-apprentice mentioned this issue Jan 25, 2023

[css-pseudo] Should ::first-line include markers? mozilla/wg-decisions#1012

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[css-pseudo] Should ::first-line include markers? #4506

[css-pseudo] Should ::first-line include markers? #4506

[css-pseudo] Should ::first-line include markers? #4506

[css-pseudo] Should ::first-line include markers? #4506

Comments