search

johnfactotum / foliate

Read e-books in style
https://johnfactotum.github.io/foliate/
GNU General Public License v3.0
5.28k stars 259 forks source link

font aliasing #1227

Open crypt47 opened 6 months ago

crypt47 commented 6 months ago

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:

johnfactotum commented 6 months ago

If you're using the invert mode, it would set -webkit-font-smoothing: antialiased; to fix chromatic abberation. See https://github.com/johnfactotum/foliate/pull/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 commented 6 months ago

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. 2024-01-16-172558_1920x1200_scrot Note some words are pink.

crypt47 commented 6 months ago

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

johnfactotum commented 6 months ago

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 commented 5 months ago

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 commented 5 months ago

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

johnfactotum commented 5 months ago

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 commented 5 months ago

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 commented 5 months ago

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.

Whereas all of the above are handled correctly by Firefox.