1387206 - Underlines are being rendered directly on the BBC Reith Sans bold font baseline without a gap

Status: UNCONFIRMED

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

Description

[Josh Tumath]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:57.0) Gecko/20100101 Firefox/57.0
Build ID: 20170803134456

Steps to reproduce:

We have just gone live today with our new typeface called 'BBC Reith Sans' on the BBC Sport website. There seems to be an bug with how underlines are rendered on the bold font.

Go to the BBC Sport frontpage and hover over a hyperlink with the headline of an article:
http://www.bbc.co.uk/sport


Actual results:

The underline on the hyperlink is being rendered directly on the baseline of the font.


Expected results:

There should be a gap between the font's baseline and the underline. Other browsers do not experience this bug.

Comment 1

[Josh Tumath]

Attachment: Screenshot of bug

Comment 2

[Josh Tumath]

Actually, it doesn't appear to be an issue with the font itself. The links that are having the issue look like this:

<a href="/sport/football/40762417">
  <span class="lakeside__title-text">PSG sign Neymar for world record £200m</span>
</a>

A `vertical-align: middle` is being applied to that <span>. If I remove that so that it reverts back to the default value, the bug no longer occurs.

Comment 3

[Jonathan Kew [:jfkthame]]

And how about the underline: is it being applied to the <span> that has the vertical-align, or is it applied to a parent element?

Comment 4

[Jonathan Kew [:jfkthame]]

So, it appears that when there are inline children of an underlined element that are shifted by vertical-align, Firefox does *not* adjust the underline (of the parent element) across those children, while Safari and Chrome do.

Testcase:
    data:text/html,<div style="text-decoration:underline">Hello <span style="vertical-align:5px">world

The Firefox behavior seems to be correct per https://www.w3.org/TR/css-text-decor-3/#text-underline-position-property; in particular, see "Figure 6: Correct and incorrect rendering of <u>A<sup>B</sup><big>C</big>D</u>" in that document.

Comment 5

[Josh Tumath]

(In reply to Jonathan Kew (:jfkthame) from comment #4)
> The Firefox behavior seems to be correct per
> https://www.w3.org/TR/css-text-decor-3/#text-underline-position-property; in
> particular, see "Figure 6: Correct and incorrect rendering of
> <u>A<sup>B</sup><big>C</big>D</u>" in that document.

That would explain it. Blink/WebKit clearly render the your test case very differently to Firefox. However, what I don't understand is that EdgeHTML seems to render your test case correctly and yet does not experience the bug on BBC Sport.

Comment 6

[Jonathan Kew [:jfkthame]]

My guess -- not being on a Windows machine at the moment to test further -- is that Edge and Gecko may be handling the vertical-align:middle somewhat differently. It is known that font/line-spacing metrics tend to be an area where there are differences between browsers, so I can readily believe that the vertical-align property is giving significantly different results.

If you try

  data:text/html,<div style="font: bold 36px 'BBC Reith Sans'">hello<span style="text-align:middle">world

(adjust the font property as necessary, that's a guess) in Edge and Firefox, how does the alignment of the two words compare?

Comment 7

[Josh Tumath]

(In reply to Jonathan Kew (:jfkthame) from comment #6)
> My guess -- not being on a Windows machine at the moment to test further --
> is that Edge and Gecko may be handling the vertical-align:middle somewhat
> differently. It is known that font/line-spacing metrics tend to be an area
> where there are differences between browsers, so I can readily believe that
> the vertical-align property is giving significantly different results.
> 
> If you try
> 
>   data:text/html,<div style="font: bold 36px 'BBC Reith Sans'">hello<span
> style="text-align:middle">world
> 
> (adjust the font property as necessary, that's a guess) in Edge and Firefox,
> how does the alignment of the two words compare?

Your guess with the font family name was spot on, haha.

So with the BBC Reith font applied, the test case rendered the same in both Gecko and Edge.

 data:text/html,<div style="font: bold 36px 'BBC Reith Sans'; text-decoration: underline">hello<span style="vertical-align: middle;">world

The vertical alignment change was only by one pixel, but even when changing the value to 16px, I get the same output. I'm still not able to reproduce the non-spec-compliant rendering that occurs in Edge on the BBC Sport frontpage.

Comment 8

[Koji Ishii]

It looks like EdgeHTML takes the max block offset of the text run and the decoration box:
https://jsbin.com/tewugik/edit?html,output