[css-pseudo-4] Allow intervening space and no-break space in ::first-letter, preceding the letter

[johannesodland]

Summary

Can we revisit the decision from 5830 to exclude word break on either side of ::first-letter?
Intervening space (U+0020) and no-break space (U+00A0) should be allowed directly before the letter.

Background

Many languages use an intervening space between the quotation mark and the first letter. A notable example is the quotation dash, which is used in several languages including Norwegian, Swedish, Danish, Bulgarian, French, Greek, and others, as well as in some modern English novels.

Example from Ulysses:

― O Miss Douce! Miss Kennedy protested. You horrid thing

In practice, many languages use regular spaces or at-best no-break spaces between the first quotation mark and the first letter, despite arguments suggesting these aren't typographically ideal. This preference could arise from established guidelines or the difficulty in typing other spaces.

(I have checked Norwegian, Swedish and Danish news outlets, and all use a regular U+0020 space)

Previous discussions

Previous discussions on this topic include:

• A resolution to include space separators within the ::first-letter pseudo-element was agreed upon in [css-pseudo-4] ::first-letter should include space separators #5154 (comment).
• This decision, however, was later partially reversed in issue 5830, excluding word breaks on either side of the first-letter.

By excluding word breaks we exclude the use of (U+0020) and no-break space (U+00A0). Consequently, ::first-letter becomes impractical for languages that use a space between quotation marks and the first letter.

Proposal

Given the widespread use of intervening spaces in various languages and the practical challenges in employing specific space characters, it is worth reconsidering the decision made in issue 5830.

The ::first-letter pseudo-element should allow for the inclusion of regular space (U+0020) and no-break space (U+00A0) directly preceding the first letter.

[johannesodland]

cc: @fantasai

[fantasai]

Sounds like a use case for text-autospace: punctuation replace. :]

[johannesodland]

Sounds like a use case for text-autospace: punctuation replace. :]

text-autospace sounds like a powerful tool to correct the source spaces, but I'm not quite sure if it would solve the current use case. (I would be delighted if it did).

Both space (U+0020) and no-break space (U+00A0) are excluded from the set of spaces that can intervene the punctuation and the first letter.

I don't think there's another typographic space with the correct width we can replace them with? In a variable font, the width of space and no-break space would adapt as the width of the font is adjusted. Typographic spaces like Four-Per-Em Space (U+2005) would not change?

[css-meeting-bot]

The CSS Working Group just discussed [css-pseudo-4] Allow intervening space and no-break space in ::first-letter, preceding the letter, and agreed to the following:

• RESOLVED: Allow spaces between initial punctuation and the ::first-letter

The full IRC log of that discussion

<TabAtkins> fantasai: there's a request that if you have ::first-letter and it's predeced by punctuation, we allow there to be spaces/nbsp between the punct and ::first-letter
<TabAtkins> fantasai: plenty of examples where there's leading punctuation and then the first letter
<TabAtkins> fantasai: i thinkt his makes sense
<TabAtkins> florian: i concur it's useful, is it webcompatible?
<TabAtkins> fantasai: yeah, it's actually what's implemented right now
<TabAtkins> astearns: so resolution is to allow intervening space in this case
<TabAtkins> RESOLVED: Allow spaces between initial punctuation and the ::first-letter

[johannesodland]

@fantasai I have a draft for an improved web-platform-test that checks all punctuation and whitespace that should be included in the ::first-letter pseudo-element. I can update it and ask for a review once the spec is updated.

web-platform-tests/wpt#51361

[fantasai]

@johannesodland Ok, it took two tries, but I think I got the edits this time. Can you take a look and confirm? :)

[johannesodland]

Thank you 🙏

This looks good to me. The only thing I can think of is the use of "typographic space". It includes two slightly different groups of characters when it precedes and when it follows the first letter. I don't see any better way of wording it though :)

I've updated the tests in web-platform-tests/wpt#51361.

[johannesodland]

@fantasai After trying to implement according to the updated spec, I realized that there is both preceding and intervening space. In the example form Ulysses below, there's space before and after the m-dash.

<p>
  ― O Miss Douce! Miss Kennedy protested. You horrid thing
</p>

I think both should be included in the ::first-letter. Until now the preceding whitespace has been included in WebKit.
Should there be any limitations to the whitespace allowed to precede the punctuation?

I'm also wondering if there should be any limitations to how many punctuation characters that are allowed before and after the first letter?

[jfkthame]

I think both should be included in the ::first-letter.

Agreed.

Until now the preceding whitespace has been included in WebKit.

And in Blink and Gecko, afaict:

data:text/html;charset=utf-8,<style>p{white-space:pre-wrap}p::first-letter{background:cyan}</style>
    <p>     —   O Miss Douce!</p>

Shows current browsers including all the preceding spaces (and Firefox 136 also includes the intervening spaces and the "O", since the recent resolution was implemented).

[r12a]

fwiw, i just updated some tests that are relevant to this issue at w3c/line_paragraph_tests#54