font rendering issues on different OS

[TimDaub]

I run a visual regression test both locally (Mac OS) and on Ubuntu in a GitHub Action. And using looksSame, I came across font rendering differences (example).

After attempting to solve the problem on my own, I'm now looking at solutions that involve puppeteer.

This issue on the puppeteer repo has ideas. In case any of these parameters fixes the issue, I'd add it to the launch parameter in this library. 👋🏼

[juliangruber]

Hey Tim, thanks for reporting! Did you try whether any of these improved your results?

[TimDaub]

Hey @juliangruber,

I've come very close now:

Ubuntu: https://i.imgur.com/RwhsJ6p.png
Mac OS: https://i.imgur.com/POucwpk.png

Still, looksSame fails on the images. I've come to accept that different operating systems produce different font renderings. But for this library or the one I'm currently building (puppetbox), I'd like to guarantee the users that the outputs are deterministic. And from what I know, that'd only be possible if the screenshot capture is constantly done in one specific operating system.

I've looked at a few alternative solutions now. Using bitmap fonts in browsers (it won't work). And recently, bundling chromium as a binary in a linux container using binctr.

While I'm aware that I could simply solve the problem by e.g. containerizing my test runs (which is where the problem occurs), I'd like to find a simple solution to the problem...

Do you have any other ideas?

PS: Grüße gehen raus nach Kaufbeuren! Bin au von da in dr Nähe :D

[juliangruber]

It could just be that the containerization is the simpler solution, while it involves larger changes to the stack however.

I don't have much experience with cross-OS font rendering. Iiuc there's a lot more to this, like kerning rules, font smoothing, etc. I would personally time box my efforts and if I fail move to a different approach.

:D Servus!