1568603 - Degraded text quality due to full pixel alignment of glyphs on Linux

Status: RESOLVED INVALID

(Core :: Graphics: WebRender, enhancement, P3)

Description

[gh5681]

Attachment: font-test.html

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:68.0) Gecko/20100101 Firefox/68.0

Steps to reproduce:

Open the attached HTML file.

On Linux, WebRender generates glyphs that use subpixel anti-aliasing. However, when selecting which glyph should be used next, WebRender apparently does not take subpixel advances into account but instead always chooses the same glyph, aligned to full pixel increments. This leads to degraded text quality, as can be seen in the attached images.

This effect is most apparent on websites that use the letter-spacing CSS property (first image). Note that such websites can be found in the wild, for example here:
https://trailofbits.github.io/ctf/

If you want to replicate the attached results, use the current Firefox, activate WebRender and use the attached HTML file. (I installed the Microsoft Arial font on my Linux machine to get comparable results on Linux and Windows.)

System Details:
Firefox Nightly 70.0a1 (2019-07-24) and Firefox 68.0.1, both 64-bit
Arch Linux (up-to-date at the time of writing)
gfx.webrender.all = true

Actual results:

For "letter-spacing": See letter-spacing.png
For "margin-left": See margin-left.png

This leads to letters "dancing around", as can be seen in the first image. Shifting text by a sub-pixel amount using the margin-left CSS property (second image) also suggests that the glyphs are always aligned to full pixel increments. The text starts at the next pixel as soon as it is shifted by >0.5 px;

Expected results:

Apparently Direct2D chooses from glyphs quantized to 1/4 subpixel increments, and WebRender also seems to quantize to 1/4 subpixel increments when building the atlas:
https://github.com/servo/webrender/blob/77ff7ab32728b864dc85500ad476ca52f929a339/webrender/src/glyph_rasterizer/mod.rs#L560-L581

Somehow this does not end up on the screen when rendering a text run. I have been looking over the WebRender source over the last couple of days, however, new to this code base, I was not able to find the exact reason that is causing this.

I also tried changing the FreeType "hintstyle", "lcdfilter" and "rgba" mode on my system, to no avail, there are of course visible changes with regard to the hinting and anti-aliasing but the horizontal glyph placement is the same in all cases.

Comment 1

[gh5681]

Attachment: letter-spacing.png

Comment 2

[gh5681]

Attachment: margin-left.png

Comment 3

[Lee Salzman [:lsalzman]]

Subpixel positioning is currently not supported on Linux due to limitations of the interaction between Cairo and FreeType until bug 1547063 is completed.

Comment 4

[gh5681]

I tested this again on Nightly and it seems to be fixed. Quality is on a par with Direct2D.

Comment 5

[gh5681]

Attachment: letter-spacing-fixed.png

Comment 6

[gh5681]

Attachment: margin-left-fixed.png

Comment 7

[gh5681]

The fix of bug 1585931 reintroduced the bad inter-glyph spacing for me, as I am using hintstyle=hintfull.
https://hg.mozilla.org/releases/mozilla-beta/rev/c8ab20957ee7

Therefore I proposed a config variable in 1592293 to control the sub-pixel positioning (regardless of which hintstyle is used).

Comment 8

[gh5681]

*Therefore I proposed a config variable in bug 1592293 to control the sub-pixel positioning (regardless of which hintstyle is used).

Comment 9

[Andrew Osmond [:aosmond] (he/him)]

It sounds like the actual bug got fixed, then we introduced a patch to better honour the requested font configuration, and then we introduced another patch to allow the old behaviour for users this is undesirable. Nothing left to do otherwise. Please reopen if I'm missing something :).