[csswg-drafts] [css-pseudo-4][css-page-floats][css-inline] Float and first-letter pseudo-element interaction missing from the latest specs (#8842)

kizu has just created a new issue for https://github.com/w3c/csswg-drafts:

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

CSS2 [`::first-letter` definition][css2-fletter] 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][css3-fletter] does not mention `float`, it is absent from the [“Styling the First-Letter Pseudo-elements”][css3-fletter-styling] 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][css3-float] 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][css-text-indent] says that it applies to `block containers`.
    - [`::first-letter` spec][css3-fletter-styling] 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”][css-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`][css-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`]([css-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”](https://drafts.csswg.org/css-inline/#initial-letter-floats), but it only talks about how the initial-letter should interact with floats _around_ it, not when they are combined.

## References

- [`float` in css-page-floats-3][css3-float]
- [`float` in css2][css2-float]
- [`::first-letter` in css-pseudo-4][css3-fletter]
- [`::first-letter` in css2][css2-fletter]
- [`text-indent` in css-text][css-text-indent]
- [Block formatting context in css-display][css-formatting-context]
- [`shape-outside` in css-shapes][css-shape-outside]
- [My CodePen with floated first-letter examples](https://codepen.io/kizu/pen/NWOBNXM)

[css2-fletter]: https://drafts.csswg.org/css2/#first-letter
[css2-float]: https://drafts.csswg.org/css2/#float-position
[css3-fletter]: https://drafts.csswg.org/css-pseudo-4/#first-letter-pseudo
[css3-fletter-styling]: https://drafts.csswg.org/css-pseudo-4/#first-letter-styling
[css3-float]: https://drafts.csswg.org/css-page-floats/#float-property
[css-text-indent]: https://drafts.csswg.org/css-text/#text-indent-property
[css-formatting-context]: https://drafts.csswg.org/css-display/#block-formatting-context
[css-shape-outside]: https://drafts.csswg.org/css-shapes/#shape-outside-property
[css-initial-letter]: https://drafts.csswg.org/css-inline/#sizing-drop-initials

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8842 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Sunday, 14 May 2023 10:47:13 UTC