1552731 - ::first-letter box + float has a higher height than in Chrome/Safari.

Status: RESOLVED DUPLICATE of bug 290125

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

Description

[Karl Dubost💡 :karlcow]

Attachment: Capture d’écran 2019-05-20 à 14.11.32.png

Initially reported on https://webcompat.com/issues/30291

Created this test case to reproduce the issue.
https://codepen.io/webcompat/pen/rgzrEL

::first-letter + float create a "different" box height in Safari/Chrome vs Firefox.

I'm not sure who's right there.

Comment 1

[Karl Dubost💡 :karlcow]

Probably a duplicate of previous issues.

Comment 2

[Jonathan Kew [:jfkthame]]

Yeah, this is a known issue; basically, the long-standing spec for ::first-letter (e.g. see https://drafts.csswg.org/selectors-3/#first-letter) does not precisely specify the result here, it explicitly allows the possibility of making the floated box fit the actual size of the character (as Firefox does) rather than being based on the overall font metrics (as Safari and Chrome do).

In this particular example, I think the Firefox result is visually much better, and illustrates why such behavior is desirable; but unfortunately it's not interoperable, and when authors write their content targeting the Chrome behavior (e.g. by adding negative margins to get rid of the excess whitespace), the result looks poor in Firefox (overlapped text).

The "proper" solution to styling things like this will be the new initial-letter property, but that's not widely implemented yet.

Pretty sure there are existing bugs where this is discussed similarly.