Awful kerning when using certain fonts under Linux
Categories
(Core :: Graphics: Text, defect, P3)
Tracking
()
People
(Reporter: ch-bugzilla, Unassigned)
Details
Attachments
(3 files)
Defective font rendering sample under Linux (openSUSE Leap 15.1)
User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:78.0) Gecko/20100101 Firefox/78.0
Steps to reproduce:
Firefox under Linux (X11; not tested under Wayland) exhibits extremely bad font kerning when using certain fonts, including Droid Sans. Spacing between some character pairs is so uneven that it is difficult to tell if there is an space in the text or not.
This problem does not manifest on Firefox on Windows 10. Droid Sans renders correctly under Windows.
Actual results:
Text rendered using Droid Sans (and other fonts) has uneven spacing between characters.
The attachment contains a cropped screenshot of a poorly-rendered line of text using Droid Sans. Note the excessive spacing after each 'A', between the 'P' and 'E', between the 'N' and 'T', and between the 'E' and 'R'.
Expected results:
Text rendering with all fonts under Linux should be fully readable and of a similar quality as under Windows.
|
Reporter | |
Updated•4 years ago
|
|
|
Reporter | |
Comment 1•4 years ago
|
||
|
||
Updated•4 years ago
|
|
||
Updated•4 years ago
|
|
|
Reporter | |
Comment 2•4 years ago
|
||
Further investigation reveals that this appears to be an issue with the CSS letter-spacing property not being evenly applied under all circumstances. The impact is more visible at font-specific font-size settings. Inter-character spacing is even if the letter-spacing property is not used. HTML for a simple test case is below.
<html><head>
<link href="https://fonts.googleapis.com/css2?family=Spartan:wght@700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@700&display=swap" rel="stylesheet">
</head><body>
<p>This page demonstrates rendering errors when using the CSS letter-spacing property under Firefox for Linux for certain fonts at certain sizes.</p>
<p><b>Noto Sans 16pt - letter-spacing: 1.5px:</b> <span style="font-family: Noto Sans; font-size: 16px; letter-spacing: 1.5px;">AMANDA CARPENTER</span><br></p>
<p>Excessive spacing between 'D' and 'A', 'P' and 'E', 'N' and 'T'. Insufficient spacing between 'C' amd 'A', 'R' and 'P', 'E' and 'N'.
<p><b>Spartan 10pt - letter-spacing: 1.5px</b>: <span style="font-family: Spartan; font-size: 10px; letter-spacing: 1.5px;">AMANDA CARPENTER</span><br></p>
<p>Insufficient spacing between 'C' and 'A', 'R' and 'P', 'E' and 'N'. Excessive spacing between 'A' and 'R', 'P' and 'E', 'N' and 'T'.
</body></html>
|
|
Reporter | |
Comment 3•4 years ago
|
||
Assuming it's the same bug I'm seeing, it doesn't seem that letter-spacing is necessary to reproduce the bug. I don't know exactly what causes it, but for me it's most noticeable with Roboto Sans, when using the WebRender backend (but happens also without WebRender if layer compositing isn't forcibly enabled), and it decides to render text without subpixel antialiasing.
I can reproduce this on a few different sites that have various complexities to their layouts, but I don't know enough about Firefox's internals to design a bare minimum case where it disables subpixel font antialiasing.
Why I think it's the same bug, is that in cases where I can do something like scroll 1 tick to make it suddenly swap between subpixel and grayscale antialiasing, it appears that certain letters simply shift over slightly without actually affecting the layout of the text. This would also describe the behavior you're seeing. For example, insufficient spacing between 'C' and 'A', but at the same time excessive spacing between 'A' and 'R', could be explained by the 'A' being shifted left slightly.
Er, the font's name is just 'Roboto', but it is a sans serif font.
Wish I could edit posts.
Description
•