Discussion:
[css-display][css-pseudo] run-in & ::first-letter
(too old to reply)
Florian Rivoal
2015-02-12 08:22:57 UTC
Permalink
Raw Message
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:

<style>
h1, h2 {display: run-in; }
h1::first-letter { color: green; }
h2::first-letter { color: orange; }
p::first-letter { color: blue; }
</style>

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

and 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
<style>
p::before {content: "A";}
p::first-letter {color:green;}
</style>
<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?

- Florian
Peter Moulder
2018-03-08 00:54:42 UTC
Permalink
Raw Message
Post by Florian Rivoal
We briefly discussed the interaction of display:run-in and ::first-letter during the f2f without reaching a conclusion.
<style>
h1, h2 {display: run-in; }
h1::first-letter { color: green; }
h2::first-letter { color: orange; }
p::first-letter { color: blue; }
</style>
<h1>First title</h1>
<h2>Second title</h2>
<p>Lorem ipsum</p>
Short answer: css-display-3 proposes that p::first-letter applies to F
(and not to L), and that h1::first-letter & h2::first-letter don't apply.
However, it does mark the behaviour of ::first-letter with run-ins as
"at risk". Text in both CSS2 and selectors-3 would need changing if that
proposal were adopted.

Longer answer, on what the behaviour ought to be:

It might be easiest to start by thinking what the behaviour of ::first-line
should be, as this would be one consideration as to the behaviour for
::first-letter.

As far as what existing spec language says [which I agree isn't the only
criterion], ::first-line/letter "can only be attached to block container
elements" (CSS2 language), so if h1 & h2 run in then h1::first-letter and
h2::first-letter don't apply.

(Regarding the condition "if they run in": In previously proposed run-in
specifications, display:run-in boxes would in some cases not run in, in
which case they were to behave like block boxes, in which case I supose
that h1::first-letter/line would apply; and indeed at least one UA
I tested just now does have this behaviour. Whereas in the css-display-3
proposal, display:run-in elements "always run in" in some sense, with an
anonymous box being generated around it if necessary, so ::first-line
& ::first-letter simply never attach to display:run-in elements in the
css-display-3 model.)

My own intuition accepts that display:run-in boxes [if they run in] aren't
block containers, and that their ::first-line styling shouldn't apply.
Whereas my intuition is that p's ::first-line styling should apply to the
first line of that block container, including any run-in text; and I'd go
so far as to expect that if those headers fill the first line, then
::first-line would apply to the first line of that block container, even
though it's not the first line of the p's "own" text.

However, I'm not strongly attached to the above.

I think that the above does match what's easiest for implementations for
::first-line.

Whereas the existing spec language (whether in CSS2 or selectors 3) doesn't
give much support to the above suggested behaviour, and might reasonably be
reas as applying only to p's "own" text [other than I expect including
::before and (though seemingly undesirable) including list marker text;
I haven't checked the specs for these questions].

(The spec is clear that "first line" doesn't descend into child formatting
contexts such as inline-block or tables, but display:run-in text is part of
p's formatting context.)

As far as what's desirable in terms of layout conventions outside of the
web, my feeling is that excluding run-in text is slightly better; but I'd
also say that I don't recall encountering run-in text and first-line
styling in the same paragraph, which suggests that this might not be the
most important consideration (i.e. that authors might prefer other
characteristics such as predictability or reduced implementation effort
if that translates to having more of other features implemented).

We certainly wouldn't want drop-cap styling to apply to the L, though this
could be made part of the existing provision for bidi (that the UA "need
not create the [::first-letter] pseudo-element(s)" if the first letter is
not at the start of the line), even if we did make ::first-line styling
exclude run-in text.

If p::first-line includes the run-in text, then most consistent would
seem to be for p::first-letter to style F in the example above. However,
I don't recall ever encountering such styling in print, so I wouldn't
mind an explicit exclusion if it made things any easier at all for
implementations.


Neither CSS2.x nor selectors-3 nor css-pseudo-4 say that ::first-line
styles the first formatted line of the containing block (selectors-3 and
css-pseudo-4 say "of an element" which I'd read as excluding run-in text;
CSS2 arguably defines it as "of a paragraph"; both restrict the
pseudo-element to block container elements, but don't say that it's the
first formatted line of the block container); so I think the answer to this
question should be more than just a non-normative note in css-display-3.

Nevertheless, I do lean towards adopting the behaviour that css-display-3
describes: that p::first-line apply to the first formatted line of the
block container box that p generates, regardless of whether the affected
text comes from p or from run-ins; and that it's appropriate to mark the
interaction of run-in and ::first-letter as at-risk due to low importance.

pjrm.

Loading...