1377912 - drop caps overlaps later text in Vox article

Status: RESOLVED DUPLICATE of bug 1376061

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

Description

[Daniel Holbert [:dholbert]]

STR:
 1. Visit https://www.vox.com/science-and-health/2017/6/29/15830970/women-health-care-maternal-mortality-rate
 2. Scroll down to the first paragraph of the article, and look at the bottom of the drop-caps "K".

ACTUAL RESULTS:
The last line of that paragraph overlaps the drop-caps "K".

EXPECTED RESULTS:
No overlap.

Edge 15, Chrome 55, and Safari 10.1 have no overlap. (The first four lines are all indented to the right of the drop cap character.)


Not sure if this is a float bug or a text bug. Starting this out in Layout:Text.

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: screenshot

Comment 2

[Daniel Holbert [:dholbert]]

I've seen this in Firefox Nightly on Linux (56.0a1 (2017-07-03) (64-bit)) as well as Firefox 54 release on Windows, so I think it affects all supported Firefox versions on all platforms.

Comment 3

[Jonathan Kew [:jfkthame]]

The relevant drop-cap style in chorus.css includes a margin-bottom of -0.2em:

  .p-dropcap.has-dropcap:first-letter,
  .p-dropcap.has-dropcap p:first-child:first-letter {
    font-family: Helvetica, sans-serif;
    font-style: normal;
    font-weight: 700;
    line-height: 1;
    font-size: 5.9em;
    color: #4f7177;
    display: block;
    float: left;
    margin: 0 .1em -.2em 0
  }

(reformatted for readability). If the negative margin is removed, the overlap no longer happens.

Comment 4

[Jonathan Kew [:jfkthame]]

The style here is using a negative margin-bottom to remove blank space below the letter that occurs in browsers that don't fit a floating :first-letter box to its content. This aspect of :first-letter layout is known to be non-interoperable. See bug 1376061 comment 1.

Comment 5

[Daniel Holbert [:dholbert]]

Attachment: screenshot as of May 2019

This is no longer reproducible at Vox -- they seem to have done a visual redesign which removed the dropcaps styling entirely.

Here's a screenshot of what the original article looks like now (in both Firefox and Chrome).

Comment 6

[Daniel Holbert [:dholbert]]

Attachment: screenshot as of Jan 2020

Update: in the Vox article, the drop-cap is back, but now it works correctly -- they've reimplemented it using an explicit <span> to wrap the first letter, rather than using the :first-letter selector. (And I guess that means it's not affected by the issue hinted at in comment 4 -- or perhaps they changed something else which addressed the issue.)

So it seems maybe Vox isn't affected by this anymore. But other publishers are -- e.g. some New York Times articles are, as noted in bug 1376061 comment 7.