Text in screenshot is fuzzy

[mhanberg]

I am attempting to use Chrome to take some screenshots.

Here is a screenshot taken on Alpine docker container run -it --rm -v $(pwd):/usr/src/app --security-opt seccomp=$(pwd)/chrome.json zenika/alpine-chrome --screenshot --no-sandbox --hide-scrollbars --window-size=1200,630 https://github.com/Zenika/alpine-chrome

and a screenshot taken on macOS chromium --headless --use-gl=swiftshader --disable-software-rasterizer --disable-dev-shm-usage --screenshot --no-sandbox --hide-scrollbars --window-size=1200,630 https://github.com/Zenika/alpine-chrome

You can see in the Alpine screenshot, that all of the text appears super pixelated.

Any ideas?

Note: The Alpine screenshot looks much fuzzier in macOS finder than it does in the GitHub upload.

[jlandure]

Hi @mhanberg 👋

First, thanks for using this image and thanks for the report! 👍

I've reproduced the problem. 🐛

I've seen a similar answer on StackOverFlow:

• https://stackoverflow.com/questions/56937689/alpine-linux-fonts
• https://stackoverflow.com/questions/49732554/puppeteer-headless-chromium-on-alpine-font-issues

I've linked to these problems (from Puppeteer) without good results.

• https://github.com/puppeteer/puppeteer/issues/661#issuecomment-545757822
• https://github.com/puppeteer/puppeteer/issues/2410

I've tested with:

• --virtual-time-budget=10000to wait the page to load
• --font-render-hinting=none
• --enable-font-antialiasing

But the result is not here. 👎 I will investigate more deeply soon.

[jlandure]

Hi @mhanberg 👋

Did you succeed with your problem? 👍

I still got the problem with:

docker container run -it --rm -v $(pwd):/usr/src/app --security-opt seccomp=$(pwd)/chrome.json zenika/alpine-chrome --screenshot --no-sandbox --hide-scrollbars --virtual-time-budget=10000 --window-size=1200,630 https://github.com/Zenika/alpine-chrome

And on my laptop

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --headless --use-gl=swiftshader --disable-software-rasterizer --disable-dev-shm-usage --screenshot --no-sandbox --hide-scrollbars --window-size=1200,630 https://github.com/Zenika/alpine-chrome

Using this fix here, I got a better result.

RUN wget https://github.com/google/fonts/archive/main.tar.gz -O gf.tar.gz && \
  tar -xf gf.tar.gz && \
  mkdir -p /usr/share/fonts/truetype/google-fonts && \
  find $PWD/fonts-main/ -name "*.ttf" -exec install -m644 {} /usr/share/fonts/truetype/google-fonts/ \; || return 1 && \
  rm -f gf.tar.gz && \
  # Remove the extracted fonts directory
  rm -rf $PWD/fonts-main && \
  # Remove the following line if you're installing more applications after this RUN command and you have errors while installing them
  rm -rf /var/cache/* && \
  fc-cache -f

[jlandure]

Note: This page could be useful to determine which font the image is missing. https://wiki.alpinelinux.org/wiki/Fonts

[mhanberg]

@jlandure I was not, I ended using something different, but I have since switched jobs and don't remember the exact details.

[Kikobeats]

Hello, I'm trying to debug this, so I created https://font-rendering.vercel.app/

fonts rendered in that website have weights from 100 to 900.

Here a screenshot was taken using the Docker image

Note that the real issue here is that font weight is too light even the weight is specified with a high value.

that could be checked from using fc-pattern command:

/usr/src/app # fc-pattern "Roboto: normal"
Pattern has 2 elts (size 16)
	family: "Roboto"(s)
	width: 100(i)(s)

/usr/src/app #
/usr/src/app # fc-pattern "Roboto: regular"
Pattern has 2 elts (size 16)
	family: "Roboto"(s)
	weight: 80(i)(s)

/usr/src/app # fc-pattern "Roboto: medium"
Pattern has 2 elts (size 16)
	family: "Roboto"(s)
	weight: 100(i)(s)

/usr/src/app #
/usr/src/app # fc-pattern "Roboto: bold"
Pattern has 2 elts (size 16)
	family: "Roboto"(s)
	weight: 200(i)(s)

Probably could be a thing that can be addressed at font.conf