1685247 - Layout bug with ::first-letter

Status: RESOLVED DUPLICATE of bug 362880

(Core :: Layout, defect)

Description

[jeroen.zwartepoorte]

Attachment: Screenshot 2021-01-06 at 08.19.07.png

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.2 Safari/605.1.15

Steps to reproduce:

https://codepen.io/jpzwarte/pen/VwKxJGR

I'm running FF developer edition 85.0b4 (64-bit).

Actual results:

See the screenshot. Notice the superfluous whitespace between the text and the dot.

Expected results:

No whitespace.

Comment 1

[jeroen.zwartepoorte]

Workaround seems to be to set display: inline-block on .title. Works across all browsers.

Comment 2

[jeroen.zwartepoorte]

Scratch that. Extraneous whitespace is still there with inline-block.

Comment 3

[Ting-Yu Lin [:TYLin] (PST, UTC-8)]

Attachment: 1685247.html

This is bug 362880. The intrinsic width of the text "lowercase title" is measured wrongly as if it had text-transform: uppercase applied to the entire text. That is, Firefox measure the width as if the text is "LOWERCASE TITLE", which is larger than the final representation "Lowercase title" (with text-transform: uppercase applied only to the first letter).