canvas icon indicating copy to clipboard operation
canvas copied to clipboard

Published 20 hours ago β€’ verified publisher icon Brooooooklyn

Docker - Linux font rendering issue.

Open Kuroosh opened this issue 2 years ago β€’ 7 comments

Hi, if i try to render custom strings like π’±π‘’π“ƒπ‘œπ’³ π’°π“ˆπ‘’π“‡ π’«π“‡π‘’π“‹π’Ύπ‘’π“Œ - it won't be rendered on Linux. On Windows it works perfectly. Code to reproduce :

        ctx.font = `22px 'Cardo', 'SF Pro', BlinkMacSystemFont, Roboto, Helvetica, Arial,'AppleColorEmoji', 'Segoe UI', 'Segoe UI Emoji', 'Open Sans';`
        ctx.fillStyle = "#FFFFFF";
        ctx.textAlign = "center";
        ctx.fillText('π’±π‘’π“ƒπ‘œπ’³ π’°π“ˆπ‘’π“‡ π’«π“‡π‘’π“‹π’Ύπ‘’π“Œ', canvas.width / 2, 27);

How the result should look like ( works perfectly on Windows ) : https://media.discordapp.net/attachments/1057368561527566397/1059758881775038464/78390a3f-ea4c-46b2-a88c-9c4f886a6d36.png

How the result looks like on Linux - Docker : https://media.discordapp.net/attachments/1057368561527566397/1059758942219145256/d3acea17-c9aa-4a04-9c3c-57d14598ef99.png

And yes... i already added these to my dockerfile... :

RUN apt-get -y install locales
RUN echo "LC_ALL=en_US.UTF-8" >> /etc/environment
RUN echo "en_US.UTF-8 UTF-8" >> /etc/locale.gen
RUN echo "LANG=en_US.UTF-8" > /etc/locale.conf
RUN locale-gen en_US.UTF-8

And yes.. i already tried to load the fonts:

console.log('Loaded Font : ' + Canvas.GlobalFonts.registerFromPath(config.globalPath + 'fonts/ArialUnicode.ttf', 'ArialUnicode'));
console.log('Loaded Font : ' + Canvas.GlobalFonts.registerFromPath(config.globalPath + 'fonts/Cardo-Regular.ttf', 'Cardo'));
console.log('Loaded Font : ' + Canvas.GlobalFonts.registerFromPath(config.globalPath + 'fonts/segoeui.ttf', 'Segoe UI'));
console.log('Loaded Font : ' + Canvas.GlobalFonts.registerFromPath(config.globalPath + 'fonts/seguiemj.ttf', 'Segoe UI Emoji'));
console.log('Loaded Font : ' + Canvas.GlobalFonts.registerFromPath(config.globalPath + 'fonts/AppleColorEmoji.ttf', 'AppleColorEmoji'));

console.log('Loaded Font : ' + Canvas.GlobalFonts.registerFromPath(config.globalPath + 'fonts/arial.ttf', 'Arial'));
console.log('Loaded Font : ' + Canvas.GlobalFonts.registerFromPath(config.globalPath + 'fonts/SF-Pro.ttf', 'SF Pro'));
console.log('Loaded Font : ' + Canvas.GlobalFonts.registerFromPath(config.globalPath + 'fonts/Helvetica.ttf', 'Helvetica'));
console.log('Loaded Font : ' + Canvas.GlobalFonts.registerFromPath(config.globalPath + 'fonts/OpenSans-Regular.ttf', 'Open Sans'));
console.log('Loaded Font : ' + Canvas.GlobalFonts.registerFromPath(config.globalPath + 'fonts/ROBOTO-REGULAR.ttf', 'Roboto'));

Does someone have any idea why it makes so many problems with Docker / Linux ?

I hope someone can help me with that issue... thank you :) β™₯

Kuroosh avatar Jan 03 '23 09:01 Kuroosh

@Kuroosh could you share your full Dockerfile?

Brooooooklyn avatar Jan 03 '23 11:01 Brooooooklyn

@Kuroosh could you share your full Dockerfile?

FROM node:16-bullseye

RUN apt-get update && apt-get -y install

RUN npm install -g [email protected]

RUN apt-get install git

RUN npm install -g typescript

RUN useradd -m -d /home/venox venox

WORKDIR /home/venox

COPY ./ /home/venox

RUN apt-get -y install locales

RUN echo "LC_ALL=en_US.UTF-8" >> /etc/environment
RUN echo "en_US.UTF-8 UTF-8" >> /etc/locale.gen
RUN echo "LANG=en_US.UTF-8" > /etc/locale.conf
RUN locale-gen en_US.UTF-8

RUN chown -R venox:venox /home/venox 

RUN chmod -R 777 /home/venox

USER venox

RUN git config --global url."https://github.com/".insteadOf ssh://git://github.com/

docker-compose.yml :

services:
  testbot:
    build: .
    entrypoint: ["/bin/sh", "/entrypoint.sh"]
    environment:
      - SESSIONID=TEST_BOT
    volumes:
      - ./assets:/home/venox/assets
      - ./docker_node_modules:/home/venox/node_modules
      #- venoxdata:./home/venox/venoxdata
      - ./entrypoint.sh:/entrypoint.sh
    restart: unless-stopped

Kuroosh avatar Jan 03 '23 23:01 Kuroosh

@Kuroosh It seems your registered fonts 'Cardo', 'SF Pro', BlinkMacSystemFont, Roboto, Helvetica, Arial,'AppleColorEmoji', 'Segoe UI', 'Segoe UI Emoji', 'Open Sans' doesn't contain the character π’±π‘’π“ƒπ‘œπ’³ π’°π“ˆπ‘’π“‡ π’«π“‡π‘’π“‹π’Ύπ‘’π“Œ. The reason why Windows works are @napi-rs/canvas loads system fonts and Windows contains hundreds of fonts with the system.

Brooooooklyn avatar Jan 04 '23 07:01 Brooooooklyn

@Kuroosh It seems your registered fonts 'Cardo', 'SF Pro', BlinkMacSystemFont, Roboto, Helvetica, Arial,'AppleColorEmoji', 'Segoe UI', 'Segoe UI Emoji', 'Open Sans' doesn't contain the character π’±π‘’π“ƒπ‘œπ’³ π’°π“ˆπ‘’π“‡ π’«π“‡π‘’π“‹π’Ύπ‘’π“Œ. The reason why Windows works are @napi-rs/canvas loads system fonts and Windows contains hundreds of fonts with the system.

so what you would do in my case? load all system fonts from Windows ? any idea what i should do & how ? :D

Already tried with :

RUN wget http://ftp.de.debian.org/debian/pool/contrib/m/msttcorefonts/ttf-mscorefonts-installer_3.6_all.deb -P ~/Downloads

RUN apt install ~/Downloads/ttf-mscorefonts-installer_3.6_all.deb -y

RUN fc-cache -fv

didn't worked..

Kuroosh avatar Jan 05 '23 01:01 Kuroosh

You need to find a font which thatins π’±π‘’π“ƒπ‘œπ’³ π’°π“ˆπ‘’π“‡ π’«π“‡π‘’π“‹π’Ύπ‘’π“Œ characters and register it

Brooooooklyn avatar Jan 05 '23 06:01 Brooooooklyn

You need to find a font which thatins π’±π‘’π“ƒπ‘œπ’³ π’°π“ˆπ‘’π“‡ π’«π“‡π‘’π“‹π’Ύπ‘’π“Œ characters and register it

Well... i tried it with Arial Unicode MS... It even loads the font.. but it still doesn't display the special-letters...

the font is 100% loaded & works ( i can see the difference between old & new one ) but it still won't render any special characters?

It must work with Arial Unicode MS, but it still doesn't render these letters

Kuroosh avatar Jan 07 '23 14:01 Kuroosh

@Kuroosh Try this font: StixGeneral.

image

Florian-Martinez avatar Feb 06 '23 14:02 Florian-Martinez