See #2040 for suggested ::first-punctuation pseudo class.

The following example can be used to test how different browsers renders the ::first-letter pseudo element:

https://codepen.io/johannesodland/pen/LYGYWyY

This 10 year old bugzilla issue describes the same thing:

https://bugzilla.mozilla.org/show_bug.cgi?id=602459

Current spec prose for reference:

Punctuation (i.e, characters that belong to the Punctuation (P*) Unicode general category [UAX44]) that precedes or follows the first typographic letter unit must also be included in the ::first-letter pseudo-element.

I believe the pattern we want to collect is: (P+Zs)?[LN]+(ZsP+)? (where letters represent corresponding Unicode categories). So proposed wording:

Punctuation (i.e, characters that belong to the Punctuation (P*) Unicode general category [UAX44]) that precedes or follows the first typographic letter unit, as well as any intervening space separators (characters that belong to the Spaces (Zs) Unicode general category), must also be included in the ::first-letter pseudo-element.

Agenda+ to confirm.

If that was supposed to be regular-expression-ish, I'd have expected the equivalent of the prose to be something more like (with slightly different notation) ([P]+[Zs])*([L]|[N])([Zs][P]+)*.

(I think your grammar also needs to indicate that this appears at the beginning of the paragraph.)

@r12a The grammar isn't going into the spec, and the spec already anchors it to the first Letter/Number.

The CSS Working Group just discussed [css-pseudo-4] ::first-letter should include space separators.

@johannesodland So Tantek insists on seeing real-world examples where this behavior is necessary, since he doesn't believe the change is worth making to the spec otherwise. Do you happen to have any examples of existing typography showing the desired behavior?

I think another important aspect is, are there use cases/examples for not including spaces in the first letter? e.g. is there existing content where someone deliberately put a space after punctuation so that the following letter was not considered to be in the ::first-letter. In english at least, I can't come up with a valid use case where this would be desirable, where I can come up with use cases where the space should be included.

If there are valid use cases in both directions, then perhaps we need an additional control to determine what's included in ::first-letter.

I'll look around for some examples. Perhaps i can rope in some help from folks in France, but Florian may also know where to look.

One thing to consider: the space between punctuation and text in French is commonly not an ordinary space, but rather a NNBSP or other such thinner spaces. We might, just a thought off the top of my head, want to consider whether only these types of space trigger the text to be kept together – which would probably address the concern of @plinss for false positives, if that turns out to be a significant concern, but we'd also need to ensure that those spaces are captured in any rules.

Wrt current behaviour, i have some results and a link to a test that cover the 3 main engines and 3 types of space, at w3c/line_paragraph_tests#54.

Just to be sure...
::first-letter should not apply to initial spaces, according to the following test and its author, Ethan Malasky

http://wpt.live/css/css-backgrounds/first-letter-space-not-selected.html

its reference
http://wpt.live/css/css-backgrounds/reference/first-letter-space-not-selected-ref.html

In my opinion, the test above is correct.

::first-letter applying to PunctuationCharacter+Space+LetterOrNumber is different and can make sense (depending on language).

According to Unicode, there are many kinds of spaces (gc = Zs) and many kinds of punctuation characters which would eventually apply regarding this issue:

Code Name
U+0020 space
U+00A0 no-break space
U+1680 ogham space mark
U+2000 en quad
U+2001 em quad
U+2002 en space
U+2003 em space
U+2004 three-per-em space
U+2005 four-per-em space
U+2006 six-per-em space
U+2007 figure space
U+2008 punctuation space
U+2009 thin space
U+200A hair space
U+202F narrow no-break space
U+205F medium mathematical space
U+3000 ideographic space

Pc Connector_Punctuation a connecting punctuation mark, like a tie
Pd Dash_Punctuation a dash or hyphen punctuation mark
Ps Open_Punctuation an opening punctuation mark (of a pair)
Pe Close_Punctuation a closing punctuation mark (of a pair)
Pi Initial_Punctuation an initial quotation mark
Pf Final_Punctuation a final quotation mark
Po Other_Punctuation a punctuation mark of other type

FWIW, here are some examples of first letter styling in French:

References:

• http://www.mobileread.mobi/forums/showthread.php?t=119418&page=23#post2479698
• https://twitter.com/sophianf/status/740835674522275840 (this one looks like a ligature)
• https://manualzz.com/doc/20239639/quelques-exemples-de-lettrines

(We should document this in https://www.w3.org/TR/dpub-latinreq/#initial-capitals )

Of those three examples ("— « M", "«L'", and "«E"), only the second one (the L) seems doable with ::first-letter, since the first and the third have the punctuation sized with the non-drop-cap text, and the third is also aligned with it. The third also pretty clearly doesn't have a space, though the first looks like it probably does, and I think the second perhaps does not.

Typografi.org has an example of the norwegian remark punctuation ("replikkstrek"). It can be seen in the following sentence:

– Bare vent litt, jeg må fange en squirtle her.
http://www.typografi.org/dropcaps/assets/sitatstrek-anf%C3%B8rselstegn_714.jpg
http://www.typografi.org/dropcaps/initialer.html

The author notes that the preferred option is to style the punctuation away. To be able target punctuation for styling we also need the ::first-punctuation suggested by @fantasai in #2040.

I'll write a few words about why I brought up this issue.

I work in the norwegian public broadcasting company. We've tried to use the ::first-letter to style drop caps but it fails. Sentences starting with "remark punctuation" (– Bare vent litt) is prominent in news and magazine-style articles. But whenever ::first-letter is applied to these sentences the results is inconsistent between browsers, and the desired effect is not achieved.

In an article we published in 2017 we deliberately changed the language and dropped starting sections with these sentences to avoid this problem: https://www.nrk.no/sperret-inne_-slatt-og-lenket-fast-1.13769828

Typography literature tells us to hide the punctuation, or move it into the margins (hanging punctuation). Most examples I can find in todays print newspapers hide the punctuation. (typography teaching book from 1952: https://www.nb.no/nbsok/nb/a627d2b30ca616ba40bcd2100bf63e1f?index=3#59)

On the web we can not simply remove the punctuation. We need to support older browsers and progressively enhance the layout. The punctuation can be hidden only when ::first-letter is supported.

Including space separators in ::first-letter will not solve the problem with hanging or hidden punctuation, but it will be a necessary step on the way. A ::first-punctuation would be really helpful.

I fear that if ::first-letter does not support space between the punctuation and the letter, it will be unusable for the Norwegian language.

The CSS Working Group just discussed [css-pseudo-4] ::first-letter should include space separators.

The meeting mentions compat between Gecko and Blink.

I don't think theres compat between Gecko and Blink. They treat punctuation and space somewhat differently.

Chrome:
Does not include any characters when sentence starts with "« ". Includes the punctuation but not the space and the following character when starting with "– ".

Firefox:
Does not include any characters when sentence starts with "« " or "– ".

Safari:
Includes punctuation and space when starting with "« ". Only includes punctuation when starting with "– ".

@dbaron Wrt #5154 (comment) this distinction appears in languages (like English) that don't use spaces between the quote mark and the drop-cap, and is an issue against initial-letter currently, see issue #2040. If you're going to take that as a reason to make a distinction here that excludes the punctuation from ::first-letter, then logically we would have to do the same thing also where there is no intervening space.

The CSS Working Group just discussed Should ::first-letter include space separator?, and agreed to the following:

• RESOLVED: Spaces separating punct from first letter dont' stop ::first-letter

I think we should allow the regular space, even though I'm fussy about typography
florian: At least in French, it's pretty common to say ordinary spaces, probably same in Norwegian. So I'd include standard space.

We use a regular space between the punctuation and the first letter in norwegian:
– Pettersen, ropte hun, – kom inn og få kaffe.

http://www.typografi.org/dropcaps/assets/sitatstrek-anf%C3%B8rselstegn_714.jpg
florian: So in this example we actually do want the included thing to be large.
florian: In other cases we wont' want the punct large, but those apply equally to the exisdting punct-letter without space.

There are several examples where the punctuation is styled with the same size as the letter. The author notes that it's preferable to hide the punctuation, as in the lower example. Sometimes the punctuation is styled smaller and placed into the margin. I think the best thing would be to support all three versions. This issue should be seen together with #2040

Received two more examples from norwegian print:
One with « and one with –. Note that there is a regular space between the – and the J in the text: – Jo, eg tror me gjer det

@johannesodland Thanks for the ping. :) And also all of the great examples. Edits are in. I think the spec would benefit from a good example / illustrations. Do you think you could hack your examples in #5154 (comment) to look the way they ought to, and we can include them in the spec?

@fantasai Sorry for answering this late. I didn't see the comment.

I'm a little bit wary of adding the examples, because in the end one ought to adjust the style of the punctuation as well. This is tracked in #2040.

I have created a test-case of the examples here: web-platform-tests/wpt#25828
These are based on the first-letter-004 tests. Maybe they are useful as examples?

I created a reference of the initial test-page here:
https://codepen.io/johannesodland/pen/vYKYPjj