Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
frivoal opened this issue Oct 26, 2016 · 1 comment
Closed

Comments

@frivoal
Copy link
Collaborator

frivoal commented Oct 26, 2016

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?

@frivoal frivoal added css-display-3 Current Work css-pseudo-4 Current Work labels Oct 26, 2016
@fantasai
Copy link
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
Projects
None yet
Development

No branches or pull requests

2 participants