font aliasing

[crypt47]

Question:
Hello, I've just installed the foliate and it seems like it doesn't respect my fontconfig settings from .fonts.conf. See font rainbow etc. For some reason I don't see any such settings in the app. Maybe it get the settings from some other place?

Version:

• Foliate version: 2.6.4
• OS/Distribution and version: FreeBSD 13.2
• Desktop environment: none
• Installation method: built from ports

[johnfactotum]

If you're using the invert mode, it would set -webkit-font-smoothing: antialiased; to fix chromatic abberation. See #1137. Apart from that, I'm not sure to what extend WebKitGTK respects fontconfig settings. WebKitGTK is known to have various bugs related to font rendering. You can try tweaking it with CSS (see https://github.com/johnfactotum/foliate/blob/gtk4/docs/faq.md#can-i-set-my-own-custom-css-styles). Otherwise there's not much we can do here. You can also try and see if the problem occurs in Epiphany, and if so you can report the bug at https://bugs.webkit.org/.

Edit: you can also try changing the GNOME settings related to fonts (with gsettings, dconf-editor, or GNOME Tweaks), which might override the fontconfig settings.

[crypt47]

If you're using the invert mode, it would set `-webkit-font-smoothing: antialiased

If I just put -webkit-font-smoothing: antialiased; in $HOME/.config/com.github.johnfactotum.Foliate/user-stylesheet.css (is this weird path correct?) it doesn't fix the problem. Please see the shot to clarify what I mean.

Note some words are pink.

[crypt47]

I don't use any of KDE of Gnome, so I'm unsure if these settings are even loaded...

[johnfactotum]

Just tested it and it does respect fontconfig settings. The following disables RGBA subpixel antialiasing for me:

  <match target="font">
    <edit name="rgba" mode="assign">
      <const>none</const>
    </edit>
  </match>

If I just put -webkit-font-smoothing: antialiased; in $HOME/.config/com.github.johnfactotum.Foliate/user-stylesheet.css (is this weird path correct?)

You need something like :root { -webkit-font-smoothing: antialiased; } in the file.

Also note that if antialias is set to none in fontconfig, setting this CSS property will not enable antialiasing.

I don't use any of KDE of Gnome, so I'm unsure if these settings are even loaded...

The settings would probably be loaded for GTK apps if you have gnome-settings-daemon. But it seems that WebKitGTK simply doesn't respect that. If it does it should default to grayscale because the default value of font-antialiasing in org.gnome.desktop.interface is 'grayscale'.

[crypt47]

Just tested it and it does respect fontconfig settings. The following disables RGBA subpixel antialiasing for me:

Try to run some bare X11-session like with startx and twm, so no additional gnome or kde daemons are running. My .fonts.conf is pretty simple but puttying anything to .config/com.github.johnfactotum.Foliate/user-stylesheet.css doesn't change the game.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
<fontconfig>
    <match target="font">
        <edit name="antialias" mode="assign">
            <bool>true</bool>
        </edit>
        <edit name="hinting" mode="assign">
            <bool>true</bool>
        </edit>
        <edit name="hintstyle" mode="assign">
            <const>hintfull</const>
        </edit>
        <edit name="rgba" mode="assign">
            <const>none</const>
        </edit>
        <edit name="autohint" mode="assign">
            <bool>false</bool>
        </edit>
        <edit name="lcdfilter" mode="assign">
            <const>lcdnone</const>
        </edit>
        <edit name="dpi" mode="assign">
            <double>96</double>
        </edit>
    </match>
</fontconfig>

[crypt47]

and I'm still on gtk3 if it matters...

[johnfactotum]

and I'm still on gtk3 if it matters...

Ah, yes, sorry. Missed that. Well, the GTK 3 version doesn't support user styles. So there's no way to add custom styles unless you patch Foliate.

I guess you could ask the WebKitGTK devs about how fontconfig settings are loaded. I wouldn't be surprised if it's an WebKitGTK bug.

[crypt47]

and I'm still on gtk3 if it matters...

Ah, yes, sorry. Missed that. Well, the GTK 3 version doesn't support user styles. So there's no way to add custom styles unless you patch Foliate.

I guess you could ask the WebKitGTK devs about how fontconfig settings are loaded. I wouldn't be surprised if it's an WebKitGTK bug.

Ok, thank you for your time. I've just installed the app cause it looked nice. Actually it's ok to patch a few lines if knew where to look. I've installed it by compiling from FreeBSD port tree anyway. I have that skill, though I'm not a programmer.

p.s.
Btw, you seem kinda unhappy with the tech (webkit gtk) you've chosen yourself for your project.)

[johnfactotum]

You can modify the stylesheet here: https://github.com/johnfactotum/foliate/blob/2.6.4/src/web/epub-viewer.js#L299-L310

Btw, you seem kinda unhappy with the tech (webkit gtk) you've chosen yourself for your project.)

No, I'm happy for what it is. There are other bugs on other browser engines, too. Though it's true that WebKitGTK has a fair share of bugs related to fonts. E.g.

• The system-ui font doesn't respect the system setting; seems to be hardcoded to Cantarell
• The rendering isn't localized (RTL Vertical Chinese epub punctuation rendering question #422 (comment))
• It synthesizes small caps even when the font supports it (Small caps support #100)
• Fallback fonts defined in fonts.conf seem to be ignored

Whereas all of the above are handled correctly by Firefox.

[Sunspark-007]

Hi, I've made a .css file to try out.. but it's not working..

:root { -webkit-font-smoothing: none !important; -moz-osx-font-smoothing: none !important; font-smooth: never !important; }

I've placed the css file in various locations in the flatpak's .var folder hierarchy for foliate.. but I can't get the app to "see" it.. is there a specific folder location it needs to be placed precisely? I'm assuming the filename doesn't matter just that the extension be css.

Is it supposed to be embedded inside a theme json in the themes folder?

[johnfactotum]

See https://github.com/johnfactotum/foliate/blob/gtk4/docs/faq.md#can-i-set-my-own-custom-css-styles

[Sunspark-007]

Thanks! Changing the filename worked and I can see the difference.

Further testing shows me that font hinting doesn't appear to be passed through and I don't think there's a way to set it like you can with the normal freetype interpreter environment variables.

I did find something that seems to have a subtle effect, will have to test further, possibly geometricPrecision for scaling.

https://developer.mozilla.org/en-US/docs/Web/CSS/text-rendering