Re: [csswg-drafts] [css-pseudo] Problems with styling ::first-letter with punctuation (#2040)

My preference is to keep this as a nested pseudo-element, but with a parenthetical modifier that distinguishes between the before / after.

It would probably also be useful to have a `::first-letter::the-letter-itself` pseudoelement (name TBD) so that if you want the font or color to change on the enlarged letter but to inherit from the paragraph for the punctuation, you can do that directly instead of changing it on `::first-letter` and then re-setting it on the nested punctuation pseudos.

Example:

```html
<p>“I’m on my way,” she said.</p>
```

`p::first-letter` selects `“I’`
`p::first-letter::punctuation(before)` selects `“`
`p::first-letter::letter-only` selects `I`
`p::first-letter::punctuation(after)` selects `’`
`p::first-letter::punctuation` selects both the quote and the apostrophe, separately.

In the case of `<p>— « Madame… »</p>` example, the string of punctuation before the M would ideally be a single `::punctuation(before)` pseudoelement, but if it was `<p>— <q>Madame…</q></p>` or some other markup structure that breaks up that string in the DOM tree, then there would be multiple consecutive pseudoelements that all match that selector, so the tree with pseudos inserted would look like:

```
p
  p::first-letter
    p::first-letter::punctuation(before)
      [text]— [/text]
    q [partial, split by the ::first-letter]
      q::before
        p::first-letter::punctuation(before)
          [text]« [/text]
      p::first-letter::letter-only
        [text]M[/text]
  q [rest of the element, outside the ::first-letter]
    [text]adame…[/text]
```

(Either way, we do need to carefully consider the case where the quotation mark at the start of the paragraph is generated content from a `<q>` element — that should still be stylable the same as a literal quotation mark in the text!)

I liked the suggestion that the `::punctuation` nested pseudoelement would also be useful on `::marker`. In that case we'd probably need an additional `::punctuation(separator)` modifier for multi-part counters like `(6.a.iii)`. The name of the “everything except the punctuation” nested pseudo-element should also be decided after considering this case.

P.S. I chose “before” and “after” for the modifiers because they are plain English terms already used in CSS, but if people think that it is confusing to re-use the terms another option would be “leading” vs “trailing”.

-- 
GitHub Notification of comment by AmeliaBR
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2040#issuecomment-669614648 using your GitHub account


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

Received on Thursday, 6 August 2020 00:32:57 UTC