search

johnfactotum / foliate

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

font aliasing #1227

Open crypt47 opened 10 months ago

crypt47 commented 10 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 10 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 10 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 10 months ago

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

johnfactotum commented 10 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 10 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 10 months ago

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

johnfactotum commented 10 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 10 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 10 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.

Sunspark-007 commented 1 week ago

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 commented 6 days ago

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

Sunspark-007 commented 6 days ago

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