RESOLVED INVALID 205915
Certain special characters causes the ::first-letter CSS selector to overflow to multiple characters 
https://bugs.webkit.org/show_bug.cgi?id=205915
Summary Certain special characters causes the ::first-letter CSS selector to overflow...
Duncan McKenna
Reported 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
Attachments
screenshot of ::first-letter styling (60.92 KB, image/png)
2020-01-08 04:00 PST, Duncan McKenna 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2020-01-09 10:33:52 PST
<rdar://problem/58448389>
Myles C. Maxfield
Comment 2 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."
Note You need to log in before you can comment on or make changes to this bug.