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:

Text

Assignee:

Nobody <webkit-unassigned>

Status:

RESOLVED INVALID

Severity:

Minor

CC:

bfulgham, mmaxfield, simon.fraser, webkit-bug-importer, zalan

Priority:

Keywords:

InRadar

Version:

Safari 13

Hardware:

All

OS:

All

Attachments:

Description	Flags
screenshot of ::first-letter styling	none

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."