googlefonts/noto-emoji

Horizontal Spacing Issue

arielnmz opened this issue · 1 comments

arielnmz commented

I added Noto Color Emoji in my fontconfig file as a fallback font for all "default" font families, i.e. sans, sans-serif, serif and monospace, as well as for emoji:

Example ~/.config/fontconfig/conf.d/01-emoji.conf:

<!-- Add generic family. -->
<match target="pattern">
    <test qual="any" name="family"><string>emoji</string></test>
    <edit name="family" mode="assign" binding="same"><string>Noto Color Emoji</string></edit>
</match>

<!-- This adds Noto Color Emoji as a final fallback font for the default font families. -->
<match target="pattern">
    <test name="family"><string>sans</string></test>
    <edit name="family" mode="append"><string>Noto Color Emoji</string></edit>
</match>

<match target="pattern">
    <test name="family"><string>serif</string></test>
    <edit name="family" mode="append"><string>Noto Color Emoji</string></edit>
</match>

<match target="pattern">
    <test name="family"><string>sans-serif</string></test>
    <edit name="family" mode="append"><string>Noto Color Emoji</string></edit>
</match>

<match target="pattern">
    <test name="family"><string>monospace</string></test>
    <edit name="family" mode="append"><string>Noto Color Emoji</string></edit>
</match>

There are similar entries to replace (mode="assign") common fonts as well, namely: Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, etc.

With that setup, we can use the following HTML snippet to test:

<html lang="en">
<head>
    <style>
        body {
            font-family: emoji, sans-serif;
        }
    </style>
    <title>Emoji Fonts Test</title>
</head>
<body>
<h1>Emoji Fonts Test</h1>
<p>
    Lorem Ipsum is simply dummy text 😂
</p>
<p>
    The quick brown fox jumps over a lazy dog
</p>
<p>
    😂 Face With Tears of Joy ❤️ Red Heart 😍 Smiling Face With Heart-Eyes 🤣 Rolling on the Floor Laughing 😊 Smiling
    Face With Smiling Eyes 🙏 Folded Hands 💕 Two Hearts 😭 Loudly Crying Face 😘 Face Blowing a Kiss 👍 Thumbs Up
</p>
</body>
</html>

The text is way too spaced out!

image

We can see under Elements > Computed the following rendered fonts:

image

Now, if I remove emoji from the font-family list and let fontconfig do its magic, it all works fine:

image

The rendered fonts list still shows the same two:

image

So what could be the problem with the Noto Color Emoji font when it's specifically chosen? This doesn't happen with Symbola:

font-family: Symbola,sans-serif;

image

Using the Noto Color Emoji family in pango doesn't have this problem either:

<span face="sans" size="x-large">Lorem Ipsum is simply dummy text 😂</span>

image

<span face="emoji,sans" size="x-large">Lorem Ipsum is simply dummy text 😂</span>

image

This breaks some sites, example:

image

image