1337456 - First letter of paragraph at theverge.com overlaps later text (with large floated :first-letter)

Status: RESOLVED DUPLICATE of bug 290125

(Core :: Layout: Floats, defect)

Description

[Andrew Overholt [:overholt]]

Attachment: illustrative screenshot

Using the 2017-02-01 64 bit nightly on Windows 10, the first letters in some of the paragraphs overlap the text below them:

http://www.theverge.com/2017/2/7/14531510/buzzfeed-news-trump-dossier-defamation-lawsuit-jonah-peretti-interview

Look for the text "welve days after the dossier published" and you'll see what I mean. Screenshot attached.

Comment 1

[Andrew Overholt [:overholt]]

Attachment: saved page

Comment 2

[Daniel Holbert [:dholbert]]

Attachment: (woff font resource for testcase)

Comment 3

[Daniel Holbert [:dholbert]]

Attachment: testcase 1 (using remote webfont)

Here's a reduced testcase, which reproduces the issue for me.

(Note that it's using a remote webfont -- I tried to make it use the previously-attached bugzilla-hosted one, but that fails for some reason. Hopefully the remote webfont doesn't disappear -- and if it does, we've got it saved here for further prodding if needed.)

Comment 4

[Daniel Holbert [:dholbert]]

Attachment: screenshot of testcase 1 in Nightly (left) vs Chrome (right)

Comment 5

[Daniel Holbert [:dholbert]]

The problem seems to come from this declaration for the initial letter:
> margin: 0 .1em -.2em 0;

The "-.2em" is them explicitly cutting into the bottom edge of the letter. If I substitute in "0" there, then it works nicely in Firefox (but then it looks like there's awkward extra space, in Chrome).

So this seems to be us disagreeing with Chrome on whether there's spacing below the letter. We also seem to disagree with ourself, depending on whether the letter is floating -- testcase coming up to demonstrate that.

Comment 6

[Daniel Holbert [:dholbert]]

Attachment: testcase 2

In Firefox, we render the floated first-letter block (the first one here) *without* any extra space above or below it. Whereas we render the non-floated one *with* space above and below it.

In contrast, Chrome renders the two letters pretty much the same.

Comment 7

[Daniel Holbert [:dholbert]]

Attachment: screenshot of testcase 2 in Nightly (left) vs Chrome (right)

Comment 8

[Daniel Holbert [:dholbert]]

Edge matches Chrome on testcase 1 & testcase 2, BTW. So (assuming WebKit is chrome-like as well), we're the odd ones out here.

Comment 9

[Daniel Holbert [:dholbert]]

jfkthame, this seems like it's in your area of expertise - mind having a look?

Comment 10

[Jeremy Chen ([e-mail])]

Sounds like a dupe of Bug 290125.

Comment 11

[Jonathan Kew [:jfkthame]]

Yes, the basic difference here is whether the browser considers the "ink" of the first-letter glyph, or just uses the fixed font bounding metrics. The spec leaves this pretty vague, AFAIR.

The Blink behavior results in a fixed-size "box", regardless of the presence (or absence) of ascenders, descenders, etc., whereas Gecko will give different results according to the actual shape of the letter:

  data:text/html,<style>p::first-letter{float:left;font-size:4em;margin:3px}</style>
    <p>abcde<br>one<br>two<br>three<br>four<br>five<br>six
    <p>dbcde<br>one<br>two<br>three<br>four<br>five<br>six
    <p>qbcde<br>one<br>two<br>three<br>four<br>five<br>six

Given that nobody else has implemented the Gecko-style behavior here, as :dbaron points out in https://bugzilla.mozilla.org/show_bug.cgi?id=290125#c17 and elsewhere, we may want to just abandon this (and point people towards initial-letter instead anyway).

Comment 12

[Daniel Holbert [:dholbert]]

Thanks for the clarification, jfkthame (& for recognizing this as a dupe, jeremychen!)