1451345 - The distance between letters is higher on some fonts

Status: RESOLVED WORKSFORME

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

Description

[roxleitan]

User Agent  Mozilla/5.0 (X11; Linux x86_64; rv:61.0) Gecko/20100101 Firefox/61.0
Build ID: 20180404100127

[Affected versions]:
Nightly 61.0a1

[Affected platforms]:
Ubuntu 16.04 x64, Windows 10 x64

[Prerequisites]:
Set pref gfx.downloadable_fonts.otl_validation = false

[Steps to reproduce]:
1.Launch Nightly 61.0a1 with a new profile
2.Open https://codepen.io/MSEdgeDev/pen/mxeOGW

[Expected result]:
The distance between letters should be smaller((as in Chrome) 

[Actual result]:
The distance between letters is large (please see the attached screenshot)

Comment 1

[Jonathan Kew [:jfkthame]]

Please re-test this with current Nightly, and confirm whether there is still an issue here. Note that variable fonts will NOT be supported (they'll render with default settings only) on standard Ubuntu 16.04, due to the old version of FreeType on that distro; full testing of variation fonts on Linux requires a distro with a newer (2.7.1+) FreeType, or manually updating the version on 16.04.

Comment 2

[roxleitan]

The issue is reproducible on the latest Nightly 61.0a1(2018-04-11) on Ubuntu 16.04 x64 with FreeType 2.8.1 version

Comment 3

[roxleitan]

Attachment: font.png

Comment 4

[Jonathan Kew [:jfkthame]]

I think what we're seeing here is the result of Firefox applying synthetic-bolding (which increases glyph width slightly) because the testcase animates font-weight up to 900; we don't yet implement the mapping of font-weight to the variation axis, and so instead it leads to fake-bold.

Once bug 1436048 is fixed, we'll connect those properties to variation axes, which should resolve the issue here.

Comment 5

[Jonathan Kew [:jfkthame]]

Could you please re-test this with latest Nightly, and confirm whether there is still an issue?

Note that it would be helpful to compare with both Chrome and MSEdge rendering, particularly for the Microsoft examples. There are some cases where Chrome does not fully implement the spec, or implements a slightly older version than we're targeting, so it is not always a reliable reference.

Comment 6

[roxleitan]

Attachment: Firefox vs Edge.png

Retested on Windows 10 x64 using the latest Nightly 62.0a1(2018-05-09) vs MSEdge.

Comment 7

[Jonathan Kew [:jfkthame]]

The screenshot in comment 6 looks like it captured the animation in MSEdge before it was complete (or did it fail?) -- the font has not yet transitioned to its bold rendering.

Comment 8

[Jonathan Kew [:jfkthame]]

Attachment: Firefox Nightly (top) vs MSEdge (below) rendering of the headline example

Here's how they look for me when the animations have finished.

Comment 9

[Jonathan Kew [:jfkthame]]

Please see comment 7 and 8, and confirm whether there is still a problem here. Testing with Nightly and Edge on my Win10 machine, it appears to be fine now.

Comment 10

[roxleitan]

Attachment: Firefox vs Edge vs Chrome.png

Retested on Windows 10 x64 using the latest Nightly 62.0a1(2018-05-13) vs MSEdge (the page is completely loaded) vs Chrome.

In my opinion, it looks better on Firefox but it's your decision if this is the expected behaviour.

Thanks

Comment 11

[Jonathan Kew [:jfkthame]]

Thanks. It's strange, I don't know why MSEdge seems to be giving you such a bad result (it looks much better on my machine, as shown in the comment 8 screenshot), but that's not really our problem. The Firefox rendering (and Chrome, which is quite similar -- slightly different scaling that might be related to how resolution is handled) looks correct.

I think we can close this as WORKSFORME, now that bug 1436048 and related fixes is done.