samuelngs / apple-emoji-linux

Brings Apple's vibrant emojis to your Linux experience
Apache License 2.0
776 stars 55 forks source link

Emoji appearing properly but in single color (alpine, node-canvas, fabricjs) #52

Closed orenlwsc closed 5 months ago

orenlwsc commented 5 months ago
image

It seems like the emojis are installed and rendered properly, but the color is always the same as the text. I use it to render fabric.js on top of node-canvas, running on docker image with alpine and node 18.

I tried to dig up some sources around with the following information:

Here is my Dockerfile configs:

FROM node:18-alpine

# Download the font file
RUN apk --no-cache add wget \
    && wget -O /tmp/AppleColorEmoji.ttf https://github.com/samuelngs/apple-emoji-linux/releases/latest/download/AppleColorEmoji.ttf

# Create the font directory
RUN mkdir -p /usr/share/fonts/truetype/apple-emoji

# Copy the font file to the directory
RUN cp /tmp/AppleColorEmoji.ttf /usr/share/fonts/truetype/apple-emoji/AppleColorEmoji.ttf

# Set permissions for the font file
RUN chmod 644 /usr/share/fonts/truetype/apple-emoji/AppleColorEmoji.ttf

COPY ./src/canvas-renderer/linux-configs/01-emoji.conf /etc/fonts/conf.d/01-emoji.conf
COPY ./src/canvas-renderer/linux-configs/45-generic.conf /etc/fonts/conf.d/45-generic.conf
COPY ./src/canvas-renderer/linux-configs/60-generic.conf /etc/fonts/conf.d/60-generic.conf

# Rebuild the font cache
RUN apk --no-cache add fontconfig \
    && fc-cache -f -v

# Remove the temporary font file
RUN rm /tmp/AppleColorEmoji.ttf

RUN echo 'kernel.unprivileged_userns_clone=1' >> /etc/sysctl.d/00-alpine.conf \
    && mkdir -p app \
    && apk add --no-cache \
    nss \
    freetype \
    freetype-dev \
    harfbuzz \
    ca-certificates \
    ttf-freefont \
        sudo \
        curl \
        build-base \
        g++ \
        libpng \
        libpng-dev \
        jpeg-dev \
        pango-dev \
        cairo-dev \
        giflib-dev \
        python3 \
        ;  

01-emoji.conf:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
<fontconfig>
  <alias>
    <family>serif</family>
    <prefer>
      <family>Apple Color Emoji</family>
    </prefer>
  </alias>
  <alias>
    <family>sans-serif</family>
    <prefer>
      <family>Apple Color Emoji</family>
    </prefer>
  </alias>
  <alias>
    <family>monospace</family>
    <prefer>
      <family>Apple Color Emoji</family>
    </prefer>
  </alias>
</fontconfig>

45-generic.conf

        <alias binding="same">
                <family>Apple Color Emoji</family> <!-- Apple -->
                <default><family>emoji</family></default>
        </alias>

        <!-- Add language for emoji, to match other emoji fonts. -->
        <match>
                <test name="family">
                        <string>emoji</string>
                </test>
                <edit name="lang" mode="prepend">
                        <string>und-zsye</string>
                </edit>
        </match>

        <match>
                <test name="lang">
                        <string>und-zsye</string>
                </test>
                <test qual="all" name="family" compare="not_eq">
                        <string>emoji</string>
                </test>

                <!-- Add generic family. -->
                <edit name="family" mode="append" binding="strong">
                        <string>emoji</string>
                </edit>
        </match>

60-generic.conf

<!-- Emoji -->

<!-- Prefer to match color emoji font. -->
<match>
        <test name="lang">
                <string>und-zsye</string>
        </test>
        <test qual="all" name="color" compare="not_eq">
                <bool>true</bool>
        </test>
        <test qual="all" name="color" compare="not_eq">
                <bool>false</bool>
        </test>
        <edit name="color" mode="append">
                <bool>true</bool>
        </edit>
</match>

<!-- TODO
    ! Match on "color" and alias B&W ones first if no color is requested.
    ! That's "hard" because <alias> doesn't work in match and needs to be
    ! expanded to its non-sugar form.
    !-->
<alias binding="same">
        <family>emoji</family>
        <prefer>
                <!-- System fonts -->
                <family>Apple Color Emoji</family> <!-- Apple -->
        </prefer>
</alias>
orenlwsc commented 5 months ago

I found the problem. Interestingly, someone else has added to fabric.js payload in the text data the attribute objectCaching: true, which made the font rendering break. Just remove it from the payload and now it renders properly :)

image