If we have initial punctuation with an initial letter, we usually omit the punctuation.

It is possible to omit the punctuation in some cases.
A coherent solution would be to hide the punctuation using css.

Say that you create a stylesheet for feature articles. You want to control both how the drop-cap looks and how to handle the punctuation. Leaving it up to writers/authors/journalist to remove the punctuation if there happens to be a drop cap is a fragile solution. If you decide to change the stylesheet later on you would have to go back and edit the content as well.

If you choose to hide or hang your punctuation, it should be possible to do so using css.

http://www.graphics.com/article/creating-drop-caps-adobe-indesign
http://etutorials.org/Adobe/Adobe+Indesign+CS2+Professional+Typography/Part+II+Paragraph+Formats/Chapter+10.+First+Impressions+Creating+Great+Opening+Paragraphs/Coming+Unstuck+with+Drop+Caps/

OK, so new proposal is to have a ::first-punctuation pseudo-class, which is a child of ::first-letter, and which selects the punctuation which is part of ::first-letter. Then such punctuation can be styled or hidden accordingly.

Hanging the punctuation can be done with hanging-punctuation: first.

What's the status of the ::first-punctuation pseudo class?

I like the proposal for a child pseudo-element. I'm not sure of the status of nested pseudo-elements being legal, but it's a bridge we need to cross at some point anyway (if we haven't already), so let's not let that stop it.

1. I suggest that it be called simply ::punctuation, the first- is redundant if it's a child of ::first-letter. Also if we ever extend the notion to other pseudos like ::marker we can simply re-use it rather than have ::marker-punctuation.
2. There are examples of punctuation following the first letter being included in a drop cap, e.g. L' in French. I presume in that case punctuation following the first letter would also be a ::punctuation pseudo-element. Which then allows two of them within a single ::first-letter, e.g. «L'. In principle we could allow selecting them independently with pseudo-classes (once we allow pseudo-classes on pseudo-elements). I'm also guessing the rules about which following punctuation are to be included are likely language specific.
3. If there are multiple leading punctuation characters, would they all be considered one pseudo-element, individual pseudo-elements, or do we possibly need grouping rules, e.g. does –«L' have two or three ::punctuations? What if there's a space between the dash and quote? e.g. – «L' This isn't relevant unless we can select the individual pseudo-elements with pseudo-classes, but I'm wondering if there's a use case to style them independently (I can see use cases for styling the leading and trailing punctuation differently, e.g. make the leading quote small, but the following apostrophe match the font size of the first-letter.)

We already have nested pseudos, they're fine.

More examples: #5154 (comment)

The CSS Working Group just discussed [css-pseudo] Problems with styling ::first-letter with punctuation.

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:

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

Agree that before vs. after needs to be built into the pseudo, not a pseudo-class, because if we go with the idea that it is a tree-abiding pseudo-element, then there are potentially multiple pseudos representing the leading punctuation if there are element boundaries in there.

Wrt ::letter-only, would be nice to pick a word that worked with ::marker, if that's in fact the direction we want to go in eventually. Either way, I'd drop -only.

Wrt color, if we implement fill on CSS generally, you could do it like

::first-letter { fill: fun-color-here; }
::first-letter::punctuation { fill: currentColor; }

:) But that wouldn't solve for font family changes, so you're probably right that we need to have ::letter be separate somehow. This is all getting very complicated. :/

Wrt ::letter-only, would be nice to pick a word that worked with ::marker, if that's in fact the direction we want to go in eventually. Either way, I'd drop -only.

Yes, definitely, and one of the reasons I emphasized that the name needed work.

Maybe ::value? So ::first-letter::value would match the letter itself, while ::marker::value would match the value of the counter(s). That works for separating out any prefix/suffix defined by an @counter rule, separators inserted by counters() function. But… it's a little strange if you want to handle markers set directly via the content property. For ::marker { content: "(" counter(n) ")"; }, the non-counter strings are equivalent to prefix/suffix punctuation. But for ::marker { content: "→"; }, the string is the marker value.

So… maybe it would be best to focus on a name for the current use case & deal with the counter use case, if need be, with a more explicit name.

Adding examples in case they're needed:

The Norwegian example also applies to English. Bringhurst specifically recommends keeping the initial quotation mark bu style it differently (smaller size, exact size by eye; see 4.1.5).

The CSS Working Group just discussed [css-pseudo] Problems with styling ::first-letter with punctuation, and agreed to the following:

• RESOLVED: Add sub-pseudo elements. Bikeshed name

As suggested by @fantasai during the call ::first-letter::prefix and ::first-letter::postfix seem like a good idea: short and clear.

OK, posted edits for this following @frivoal's recommendation to go with ::prefix and ::postfix. Let me know if anything about the edits is unclear, or if anything else needs to be addressed here.

Agenda+ to review the change and confirm the naming.

The CSS Working Group just discussed ::first-letter punctuation styling, and agreed to the following:

• RESOLVED: Accept what's in the draft