Bug 205915

Summary: Certain special characters causes the ::first-letter CSS selector to overflow to multiple characters
Product: WebKit Reporter: Duncan McKenna <duncan.mckenna>
Component: TextAssignee: Nobody <webkit-unassigned>
Status: RESOLVED INVALID    
Severity: Minor CC: bfulgham, mmaxfield, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: Safari 13   
Hardware: All   
OS: All   
Attachments:
Description Flags
screenshot of ::first-letter styling none

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.