Bug 205915 - Certain special characters causes the ::first-letter CSS selector to overflow to multiple characters
Summary: Certain special characters causes the ::first-letter CSS selector to overflow...
Status: RESOLVED INVALID
Alias: None
Product: WebKit
Classification: Unclassified
Component: Text (show other bugs)
Version: Safari 13
Hardware: All All
: P2 Minor
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2020-01-08 04:00 PST by Duncan McKenna
Modified: 2021-04-09 01:03 PDT (History)
5 users (show)

See Also:


Attachments
screenshot of ::first-letter styling (60.92 KB, image/png)
2020-01-08 04:00 PST, Duncan McKenna
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Duncan McKenna 2020-01-08 04:00:02 PST
Created attachment 387093 [details]
screenshot of ::first-letter styling

When there is a special character in the second letter of a paragraph (e.g. !, #, @, & and others), the CSS selector ::first-letter overflows and selects subsequent letters. 

This seems to be a common issue in multiple browsers.

Example and current workaround: https://codepen.io/duncan_ie/full/povzbeR
Comment 1 Radar WebKit Bug Importer 2020-01-09 10:33:52 PST
<rdar://problem/58448389>
Comment 2 Myles C. Maxfield 2021-04-09 01:03:51 PDT
This is intentional, and per-spec.

https://drafts.csswg.org/css-pseudo-4/#first-letter-pseudo

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