1613353 - CSS ::first-letter with text-transform uppercase renders element too wide

Status: RESOLVED DUPLICATE of bug 385615

(Core :: Layout: Text and Fonts, defect)

Description

[peter]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36

Steps to reproduce:

Style the first-letter of an inline-block element with text-transform: uppercase.
https://codepen.io/peterwestendorp/pen/ExjYroE

Actual results:

The measurement (width) of the element came out wrong. It looks like the element got the width of the fully upper-cased text (HELLO WORLD).

Expected results:

I expected the element to be only as wide as the actual rendered text (Hello world).

Comment 1

[Alin Ilea, Desktop QA]

Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:72.0) Gecko/20100101 Firefox/72.0

Hi,

I have managed to reproduce this issue on latest FF release 72.0.2, Beta 73 and latest Nightly build 74.0a1 (2020-02-10) using Windows 10.
Further, I will move this over to a component so developers can take a look over it. If this is not the correct component please feel free to change it to an appropriate one.
The issue is not reproducible on Chrome.

Thanks for the report.

Comment 2

[Jonathan Kew [:jfkthame]]

Yes, this is a longstanding bug in how ::first-letter behaves.