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

RESOLVED DUPLICATE of bug 290125

Status

()

RESOLVED DUPLICATE of bug 290125
2 years ago
2 years ago

People

(Reporter: overholt, Unassigned)

Tracking

Trunk
Points:
---

Firefox Tracking Flags

(firefox54 affected)

Details

(URL)

Attachments

(7 attachments)

(Reporter)

Description

2 years ago
Created attachment 8834513 [details]
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.
(Reporter)

Comment 1

2 years ago
Created attachment 8834514 [details]
saved page
Created attachment 8834664 [details]
(woff font resource for testcase)
Created attachment 8834666 [details]
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.)
Created attachment 8834668 [details]
screenshot of testcase 1 in Nightly (left) vs Chrome (right)
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.
Created attachment 8834676 [details]
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.
Attachment #8834668 - Attachment description: screenshot of testcase in Nightly (left) vs Chrome (right) → screenshot of testcase 1 in Nightly (left) vs Chrome (right)
Created attachment 8834678 [details]
screenshot of testcase 2 in Nightly (left) vs Chrome (right)
Edge matches Chrome on testcase 1 & testcase 2, BTW. So (assuming WebKit is chrome-like as well), we're the odd ones out here.
jfkthame, this seems like it's in your area of expertise - mind having a look?
Flags: needinfo?(jfkthame)
Component: Layout → Layout: Floats
OS: Windows 10 → All
Hardware: x86_64 → All
Summary: First letter of paragraph at theverge.com overlaps later text (related to :first-letter?) → First letter of paragraph at theverge.com overlaps later text (with large floated :first-letter)
Sounds like a dupe of Bug 290125.
Status: NEW → RESOLVED
Last Resolved: 2 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 290125
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).
Flags: needinfo?(jfkthame)
Thanks for the clarification, jfkthame (& for recognizing this as a dupe, jeremychen!)
You need to log in before you can comment on or make changes to this bug.