[css-pseudo-4][css-page-floats][css-inline] Float and first-letter pseudo-element interaction missing from the latest specs

[kizu]

The Problem

CSS2 ::first-letter definition did explicitly allow float to be applied to ::first-letter pseudo-element:

These are the properties that apply to :first-letter pseudo-elements: …, float, …

This is also how browsers currently work: we can use float on the ::first-letter to emulate the initial-letter styles.

However, the most recent ::first-letter definition does not mention float, it is absent from the “Styling the First-Letter Pseudo-elements” section, only having the following escape hatch which could potentially allow the float:

any other properties defined to apply to ::first-letter by their respective specifications

But the most recent float definition does not mention ::first-letter in any way.

This creates an ambiguity in the specs, which can be problematic. For example, when creating bug reports for browser compatibility of this interaction, there is no place in spec other than CSS2 to mention.

Examples of issues:

1. How should text-indent work?

   • text-indent spec says that it applies to block containers.
   • ::first-letter spec mentions only css-text properties that apply to “inline elements”:

     any typesetting properties that apply to inline elements (see [CSS-TEXT-4])

   • According to the definition of “block formatting context”, floats establish a new BFM:

     Inline formatting contexts exist within (are part of their containing) block formatting contexts; for example, line boxes belonging to the inline formatting context interact with floats belonging to the block formatting context.

   Now, should a) the text-indent be applied to the ::first-letter with a float, b) if so, should we be able to override it?

   This being not defined in specs leads to browsers interpreting this differently:

   • Firefox does not make the ::first-letter inherit the text-indent, and does not allow overriding it.
   • Safari makes the ::first-letter inherit the text-indent when it is floated, and it allows setting the text-indent on it, making it possible to “reset” it.
   • Chrome also makes ::first-letter inherit it, but it does not allow overriding it, leading to an impossibility to use a floated ::first-letter in a context with text-indent.

2. Should the shape-outside work?

   As it can be only applied to the floated elements, and css-shapes does not mention ::first-letter it is uncertain how it should behave. Browser testing shows that Safari and Firefox allow applying it to the floated ::first-letter, while Chrome does not apply it.

3. How should browser built-in features like search or text selection work?

   When the ::first-letter does not have a float on it, things work well in all browsers.

   When we add float to the mix, weird things start to appear:

   • Chrome removes a floated ::first-letter from the page search, but allows selecting the letter.
   • Safari allows the floated ::first-letter to participate in page search, but is weird when selecting it (selection not visible, but the letter itself can be selected and copied).
   • Firefox is mostly ok: both page search works, and selection is nice, with the exception of when you try to select the word with the floated letter with a double click, it also selected the preceding newlines for some reason.

Here is my CodePen demonstrating some of those issues (without shape-outside case): https://codepen.io/kizu/pen/NWOBNXM

There are other issues I saw in my testing, but I think this should be enough for the start.

Related issue: initial-letter

In the CodePen above there is also an initial-letter added to the mix, which often behaves very similarly to when the ::first-letter is floated (but not exactly).

Maybe it would be worth it to create a separate issue for it, but I think there is a lot in common in how we would want the initial-letter to behave which are similar to float, so I think it is worth mentioning it, as well as testing the float alongside it, as maybe this interaction should also be defined — I saw differences in how the letter is positioned between Chrome's initial-letter and Safari's -webkit-initial-letter implementations, for example.

There is a section “Interaction with floats”, but it only talks about how the initial-letter should interact with floats around it, not when they are combined.

Browser bugs

Initially I wanted to go and submit a bunch of browser bugs related to my findings, but given this is an undefined place in the specs, it would be complicated for the browser engines to “fix” them, as there is nothing to reference as “how it should be”. I hope this issue would lead to some clarifications that could be used to submit those bugs.

References

• float in css-page-floats-3
• float in css2
• ::first-letter in css-pseudo-4
• ::first-letter in css2
• text-indent in css-text
• Block formatting context in css-display
• shape-outside in css-shapes
• My CodePen with floated first-letter examples

[fantasai]

I think the best way forward here would be to say:

• If initial-letter is anything other than than normal, then the float property is ignored.
• Otherwise if float is specified on ::first-letter the behavior is implementation-defined.
• Use of float on ::first-letter is deprecated and authors SHOULD NOT do it except as a fallback for initial-letter.

[css-meeting-bot]

The CSS Working Group just discussed [css-pseudo-4][css-page-floats][css-inline] Float and first-letter pseudo-element interaction missing from the latest specs, and agreed to the following:

• RESOLVED: Accept Elika's bullet points in the last comment

The full IRC log of that discussion

<fantasai> -> https://github.com//issues/8842#issuecomment-2762607744
<TabAtkins> fantasai: some issues needed to be clarified, and some unclear details
<TabAtkins> fantasai: but i think we should say that if initial-letter is anything bu tnormal, we ignore float
<TabAtkins> fantasai: otherwise, if float is on the ::first-letter, behavior is impl-defined. And deprecated.
<TabAtkins> fantasai: I think that should address most concerns.
<TabAtkins> (sounds good to me)
<TabAtkins> florian: when you say impl-defined, how broadly do you mean this? "it must work, but impl defined how it works" or "whether it does anything at all is impl defined"?
<TabAtkins> fantasai: the latter, no real requirements at all on it
<kizu> q+
<TabAtkins> fantasai: if we defined this today, we would not make float work
<TabAtkins> florian: probably true. it is working on browsers today tho, with some differences, right?
<astearns> ack kizu
<TabAtkins> fantasai: yeah, so that's a web-compat decision they can make about what they want to continue to do. but otherwise we want to move people to initial-leters
<TabAtkins> kizu: sounds good. some small context
<TabAtkins> kizu: a case initial-letter doesn't cover that float does is shape-outside.
<TabAtkins> kizu: wonder if we could define shape-outside to work with initial-letter. common for it to have ascenders/descenders that you want to wrap text around
<TabAtkins> kizu: this is i think where we had interop issues, if you used initial-letter + float + shape-outside, it didn't correclty work everywhere
<TabAtkins> fantasai: shape-outside is defined, i think, to interact with initial-letter in the spec, i think?
<TabAtkins> kizu: hm, i'll look again, it might have not been there a while ago
<TabAtkins> astearns: i recall adding something for this...
<TabAtkins> fantasai: [reads from the spec about shape-outside]
<TabAtkins> kizu: i'll do more tests and see what we have today
<TabAtkins> astearns: so proposed resolution is to follow what's outlined in the last comment of this issue?
<fantasai> See If the value of shape-outside is not none, shape-outside is used instead of the glyph outline.
<fantasai> In both cases, shape-margin is applied to expand the outline, and the resulting outline is clipped by the initial letter’s margin edges.
<fantasai> https://www.w3.org/TR/css-inline-3/#initial-letter-wrapping
<TabAtkins> astearns: concerns? objections?
<TabAtkins> +1
<TabAtkins> RESOLVED: Accept Elika's bullet points in the last comment