1648852 - Bad text kerning with subpixel letter-spacing

Status: NEW

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

Description

[Daniel Lo Nigro (daniel15)]

Attachment: nextdoor-firefox.png

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.

Comment 1

[Daniel Lo Nigro (daniel15)]

Attachment: nextdoor-chrome.png

Comment 2

[Rares Doghi, Desktop QA]

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/

Comment 3

[Daniel Lo Nigro (daniel15)]

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

[Rares Doghi, Desktop QA]

Thank you Daniel for the test page, I was able to reproduce this issue as well.

Comment 5

[Ting-Yu Lin [:TYLin] (PDT, UTC-7)]

Attachment: reporter_testcase.html

Captured the testcase in comment 3 as a standalone html in case the link is down.

Comment 6

[Ting-Yu Lin [:TYLin] (PDT, UTC-7)]

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.

Comment 7

[ariasuni]

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

[Jonathan Kew [:jfkthame]]

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?

Comment 9

[ariasuni]

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

[ariasuni]

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

[ariasuni]

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.

Comment 12

[Daniel Lo Nigro (daniel15)]

My initial report and screenshot were from a Windows system so I don't think this is exclusively a GTK issue.

Comment 13

[Vijay Marupudi]

Attachment: nytimes_with_spacing

Comment 14

[Vijay Marupudi]

Attachment: nytimes_without_spacing

Comment 15

[Vijay Marupudi]

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

[j.github]

Attachment: Screenshot on 2023-08-12 at 20:18:35.png

Font-family: Verdana

Comment 17

[j.github]

(In reply to j.github from comment #16)

Created attachment 9348740 [details]
Screenshot on 2023-08-12 at 20:18:35.png

Font-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

[j.github]

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)