Proposal: Add an option to pass custom browser arguments to Playwright when launching the browser

[nielthiart]

I had the need to pass command line arguments to Playwright when launching a browser.

Chromium has a long List of Chromium Command Line Switches that users might find useful.

Why I use browser arguments: font render hinting

Font rendering in headless chrome is inconsistent between different platforms. When testing on a mac, font rendering is good, but on GitHub's action runners (Linux) the kerning is off, which affects line lengths. Some fonts at smaller sizes also appear a few pixels too high or low.

One solution to fix this, is to pass the --font-render-hinting=none argument when calling chromium.launch().

This solution comes up when users ask for help with font rendering in headless chrome, puppeteer, etc.

• Inconsistent text rendering in headless mode puppeteer/puppeteer#2410
• Try to fix fonts rendering issues (bad kerning)
• How to fix Puppeteer font issues
• Font hinting on Wikipedia

Examples

Here's an example of a page captured in a GitHub action with and without font render hinting:

Default font render hinting

shot-scraper "https://www.bellingcat.com/resources/2016/12/06/vacuuming-image-metadata-wayback-machine/" \
  -w 1200 -h 800 \
  -o examples/1-bellingcat-default.png

The kerning is incorrect on small font sizes and lines wrap earlier.

With font-render-hinting=none

shot-scraper "https://www.bellingcat.com/resources/2016/12/06/vacuuming-image-metadata-wayback-machine/" \
  -w 1200 -h 800 \
  -o examples/2-bellingcat-font-render-hinting-none.png \
  --browser-args "--font-render-hinting=none"

The kerning looks much better here.

Alternative solution: Unrelated to browser arguments

As a workaround, we can achieve similar font rendering results by using CSS to add text-rendering: geometricPrecision to all elements:

shot-scraper "https://www.bellingcat.com/resources/2016/12/06/vacuuming-image-metadata-wayback-machine/" \
  -w 1200 -h 800 \
  -o examples/3-bellingcat-default-geomp.png \
  --javascript "(document.head || document.documentElement).appendChild(Object.assign(document.createElement('style'), {textContent: '*, ::before, ::after { text-rendering: geometricPrecision !important; }'}));"

I'd prefer not to add CSS if we can launch the browser with an argument that fixes font rendering instead.

[simonw]

Thanks for this, it's a really neat (and cleanly implemented) new feature.

[simonw]

Documentation is here: https://shot-scraper.datasette.io/en/latest/screenshots.html#browser-arguments

[simonw]

My bad, I messed up my change in cc199c4. Will fix that now.

[simonw]

Here are the examples files that were created by the last GitHub Action CI run:

font-hinting-default:

font-hinting-none: