Bad text kerning with subpixel letter-spacing
Categories
(Core :: Layout: Text and Fonts, defect)
Tracking
()
People
(Reporter: sites+mozilla, Unassigned)
Details
Attachments
(6 files)
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:77.0) Gecko/20100101 Firefox/77.0
Steps to reproduce:
Load any post on Nextdoor.com
Actual results:
Notice that the text kerning is bad (see attached 'nextdoor-firefox.png'). This appears to be due to the "letter-spacing: -0.32px" CSS property. When I remove that, it looks better.
Expected results:
Text should render clearly. See attached 'nextdoor-chrome.png' screenshot to see how Chrome renders it.
Reporter | ||
Comment 1•4 years ago
|
||
Comment 2•4 years ago
|
||
Hi Daniel, thanks for taking the time to report this issue, unfortunately I do not have an account in order to see the posts, is there a testing account you might have? or a link I could access to one of the posts where I could reproduce the issue on our end ?
I tried to create an account but it needs a phone number verification from the US.
In the mean time I will set the component for this issue and maybe one of our developers might be able to reproduce it.
Daniel does this issue occur in our latest Nightly build ?? can you please take a look ? you can find the build here :
https://nightly.mozilla.org/
Updated•4 years ago
|
Reporter | ||
Comment 3•4 years ago
|
||
Unfortunately I don't have a testing account, but https://jsfiddle.net/Daniel15/frz8q2uh/2/ should reproduce the same issue. View the page in Firefox on Windows, then compare the rendering to Chrome on Windows. In Firefox, letters are not spaced properly - for example The "hi" in "this" and "at" in "watched" are too close together compared to other characters.
Comment 4•4 years ago
|
||
Thank you Daniel for the test page, I was able to reproduce this issue as well.
Comment 5•4 years ago
|
||
Captured the testcase in comment 3 as a standalone html in case the link is down.
Comment 6•4 years ago
|
||
I guess this depends on the font installed on the system. On my MacOS and Linux, the space between the letters looks normal to me.
Assign S4 because this is a cosmetic issue and the text is still readable.
I have this problem on Linux with Noto Sans with this fontconfig configuration:
<?xml version='1.0'?>
<!DOCTYPE fontconfig SYSTEM 'fonts.dtd'>
<fontconfig>
<match target="font">
<edit name="lcdfilter" mode="assign">
<const>lcddefault</const>
</edit>
</match>
<match target="font">
<edit name="hinting" mode="assign">
<bool>true</bool>
</edit>
</match>
<match target="font">
<edit name="hintstyle" mode="assign">
<const>hintfull</const>
</edit>
</match>
<match target="font">
<edit name="rgba" mode="assign">
<const>rgb</const>
</edit>
</match>
</fontconfig>
I think it’s an accessibility issue though, it can make text hard to read for a lot of disabled people.
Comment 8•4 years ago
|
||
I wonder if this may be connected to the use of the "hintfull" setting ... could you try changing this e.g. to "hintslight" and see if it makes a difference?
hintslight
works much better but then I can’t see the difference between õ (o + ~) and ō (o + ¯) with Noto Sans.
Here is the FreeType bug: https://savannah.nongnu.org/bugs/?23537
Comment 10•4 years ago
|
||
Hi, I disagree that this is simply a cosmetic issue, because when it comes to long texts it can become quite hard to read, especially since letters can be mashed with each other.
Anyway after a bit of searching I think I identified the issue:
https://gitlab.freedesktop.org/freetype/freetype/-/issues/845#note_761743
I’m not sure if I understand correctly but the issue is closed on GTK’s side:
https://gitlab.gnome.org/GNOME/gtk/-/issues/7
So it may be an issue of waiting for GTK4 or using the right option for text rendering in Cairo? I’m not really qualified to understand the discussions on these bug reports…
Comment 11•4 years ago
|
||
OK so the problem is that GTK should enable subpixel positioning for glyphs, but they’re waiting for a new release of Pango:
https://gitlab.gnome.org/GNOME/gtk/-/merge_requests/2058
Not sure if this should be closed since it’s an upstream bug.
Reporter | ||
Comment 12•4 years ago
|
||
My initial report and screenshot were from a Windows system so I don't think this is exclusively a GTK issue.
Comment 13•2 years ago
|
||
Comment 14•2 years ago
|
||
Comment 15•2 years ago
|
||
I just want to update this issue and state that it is still a problem, see attached screenshots from nytimes.com with and without the letter-spacing property. Focus on the pairs "Pr" and "ow". In Chrome, the kerning is not an issue.
I am on Linux, with the freetype hinting setting of hintmedium.
Comment 16•1 year ago
|
||
Font-family: Verdana
Comment 17•1 year ago
|
||
(In reply to j.github from comment #16)
Created attachment 9348740 [details]
Screenshot on 2023-08-12 at 20:18:35.pngFont-family: Verdana
I'm so sorry, I fricked it, but the bug persists for me too, the screenshot tool opened it in Chrome i'm sorry for cluttering ahhh, i can't delete it either
Comment 18•1 year ago
|
||
Oh I can add that it prevents hyperlinks from functioning correctly (unclickable and the CSS boxes shown do not align with where the text is, browser seems to get confused at what content is placed where on the page)
Description
•