Fix WebKit font rendering in 20.04

Question

I use cutycapt to make screenshots of web pages. When I switched from Kubuntu 16.04 to Kubuntu 20.04 I noticed that font rendering quality degraded significantly. I made several screenshots of the same page and enlarged the same fragment on both screenshots for comparison. Command which was used:

cutycapt --out=screenshot.png --url=http://www.debianadmin.com/how-to-disable-ipv6-in-debian.html

Here's the one made in Kubuntu 16.04 (cutycapt version 0.0~svn6-3.1, depends on libqtwebkit4 version 2.3.2-0ubuntu11):

My system is set to full hinting. Letter stems on this screenshot are sharp and their hinting is obviously set to "full".
Now the screenshot made in Kubuntu 20.04 (cutycapt version 0.0~svn10-0.1build1, depends on libqt5webkit5 version 5.212.0~alpha4-1ubuntu2):

All letters are surrounded by gray fringe. Take a look at the word "comment" — all stems in letter "m" have different thickness. It looks like "slight" hinting to me or even no hinting at all.
I'm quite confident that both systems are properly configured to use full hinting (in System Settings > Fonts and in /etc/fonts/conf.d/) and all other fonts obey these settings.

I tried adding .config/fontconfig/fonts.conf with contents:

<?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>rgb</const></edit>
        <edit name="autohint" mode="assign"><bool>false</bool></edit>
        <edit name="lcdfilter" mode="assign"><const>lcddefault</const></edit>
    </match>
</fontconfig>

But these settings were ignored.
As far as I know cutycapt uses QtWebKit library. I don't know whether these rendering settings are controlled by Qt or WebKit engine directly. I also tried PhantomJS and wkhtmltoimage to capture screenshots in 20.04 but they produce the same blurred text. Any advices regarding tuning hinting or alternative software are welcome.

P.S. If someone knows how I can also enable subpixel antialiasing on these screenshots it would be nice.

Answer 1

Vector format

While I recommended any vector format (svg, ps, pdf,..) if bitmap is not a must. I expect svg and pdf to have good rendering tool support.

Fix resolution

Anyway I give it another try. Found one that works very good using a combination of --min-width and --zoom-factor.

cutycapt --min-width=3200 --zoom-factor=4 --out=screenshot.png --url=http://www.debianadmin.com/how-to-disable-ipv6-in-debian.html

I used min-width (default width 800px x zoom-factor 4 in my case).

Advanced font settings using fontconfig

Also I was able to control font properties using this fontconfig rule as example. If required like to enabling full hinting.

~/.config/fontconfig/conf.d/00-custom.conf

<?xml version="1.0"?>
<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
<fontconfig>

  <match>
    <test name="prgname"><string>cutycapt</string></test>

    <edit name="dpi" mode="assign"><double>96</double></edit>
    <edit name="antialias" mode="assign"><bool>false</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>
  </match>

</fontconfig>

and may debug it using:

FC_DEBUG=1 cutycapt --min-width=3200 --zoom-factor=4 --out=screenshot-mod.png --url=http://www.debianadmin.com/how-to-disable-ipv6-in-debian.html > cutycapt.fontconfig.log

check result log cutycapt.fontconfig.log

Example of cutycapt result with above fontconfig, this settings are just for testing because it is easy to notice effects.