1425503 - Float first-letter negative margin-bottom (drop caps) renders differently FF vs Chrome

Status: RESOLVED DUPLICATE of bug 1376061

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

Description

[Brad Werth [:bradwerth]]

Attachment: Testcase

The floated first-letter drop cap in the attached testcase has a negative bottom margin. This causes the text flowing after it to overlap the drop cap. Chrome renders this situation differently, possibly by applying the negative bottom margin as a positive top margin. This leads to webcompat issues like https://www.curbed.com/2017/12/12/16735474/neon-signs-austin-texas.

Comment 1

[Jonathan Kew [:jfkthame]]

This sounds like bug 1376061. The issue is that the size of the box used for a floated first-letter is (explicitly) underspecified, and Gecko and Blink have very different behaviors: Gecko uses a box whose height/depth fits the actual glyph, so first-letters containing "h", "x" and "g" will get quite different boxes, whereas Blink uses global font metrics, so they will all get the same height of box, with a bunch of blank space above and/or below the actual glyph.

This leads authors to apply negative margins in order to get rid of the unwanted blank space in Blink; but as Gecko had a properly-fitting box in the first place, the negative margin then results in overlap.