Skip to content

[css-pseudo][css-display] Interaction between run-in and ::first-letter #650

Closed

Description

@frivoal

Rescued from an old mail, as I was doing some mailbox cleanup:


We briefly discussed the interaction of display:run-in and ::first-letter during the f2f without reaching a conclusion.

Given the following markup & styling, it is not clear what will happen:

h1, h2 {display: run-in; }
h1::first-letter { color: green; }
h2::first-letter { color: orange; }
p::first-letter { color: blue; }
<h1>First title</h1>
<h2>Second title</h2>
<p>Lorem ipsum</p>

CSS2.1 says:

The :first-letter pseudo-element must select the first letter of the first line of a block, if it is not preceded by any other content (such as images or inline tables) on its line.

css-pseudo says:

The ::first-letter pseudo-element represents the first typographic letter unit on the first formatted line of its originating element, if it is not preceded by any other content (such as images or inline tables) on its line.

p::first-letter should certainly not select 'L' and make it blue, as it is not "the first typographic letter unit on the first formatted line" or "The first letter of the first line of a block", and regardless of spec wording, it would be a bad idea for 'L' to be selected here.

Whether p::first-letter and h1::first-letter should select 'F' or nothing is a lot less clear to me, but I believe that at least one should.

Given that

 p::before {content: "A";}
 p::first-letter {color:green;}
 <p>Lorem ipsum</p>

makes 'A' green, p::first-letter should match 'F' in the first example. Arguably this is already what the spec says, but the wording does not seem clear-cut to me.

As for "h1::first-letter", I am not sure what the what the spec intends, but it seems reasonable and useful that it would also match 'F'.

Finally, it seems clear to me that h2::first-letter should not select 'S', and I also don't think it would be good for it to select 'F'.

Should we fix/clarify the specs so that both p::first-letter and h1::first-letter match 'F', or does someone believe another behavior would be preferable?

Activity

  1. fantasai commented on Jan 24, 2017

    @fantasai
    Collaborator

    CSSWG concluded in Seattle that block::first-letter should match the H in <run-in>Heading</run-in><block>Lorem Ipsum</block> and that <run-in> has no ::first-letter because it's an inline. The spec has been updated accordingly.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

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