Missing some emojis

[Iceberry-qdd]

Hi 👋, I found this repository which is very useful for me. I am using this font to replace the system default emoji font in my web development, but when I replace it, I found that some of the emojis are not showing up. My question is, is this the reason for the font, or something else?

Which os are you using?

• Windows10 Professional Version 22H2
• Chrome browser 119.0.6045.200(64bit)

What did you do?

step 1

I downloaded this font to my asset folder and referenced it in css using @font-face like this:

@font-face {
    font-family: 'My Apple Color Emoji';
    src: url('./AppleColorEmoji.ttf');
}

html,body {
    margin: 0;
    font-family: system-ui,'Apple Color Emoji','My Apple Color Emoji', -apple-system, BlinkMacSystemFont, sans-serif, 'Segoe UI' !important;
}

I then typed windows keyboard emoji in the input box and found it worked as expected.

step 2

I'm making an emoji panel using Vue. So I referenced https://cdn.jsdelivr.net/npm/emoji-datasource-apple@15.0.0/+esm as the list of emoji metadata that the emoji panel needs to contain.

The structure of this file is a json list with unified fields for each item:

[
    {
        "name": "HASH KEY",
        "unified": "0023-FE0F-20E3",
        "non_qualified": "0023-20E3",
        "docomo": "E6E0",
        "au": "EB84",
        "softbank": "E210",
        "google": "FE82C",
        "image": "0023-fe0f-20e3.png",
        "sheet_x": 0,
        "sheet_y": 0,
        "short_name": "hash",
        "short_names": [
            "hash"
        ],
        "text": null,
        "texts": null,
        "category": "Symbols",
        "subcategory": "keycap",
        "sort_order": 1521,
        "added_in": "0.6",
        "has_img_apple": true,
        "has_img_google": true,
        "has_img_twitter": true,
        "has_img_facebook": false
    },
    ...
]

step 3

I use the following code to generate emoji unicode from javascript:

String.fromCodePoint(emoji.unified.split('-').map(it => `0x${it}`))

When I use v-for to display all the items, I found that some of the emoji slots are empty (empty because I use try-catch syntax to do the processing, otherwise it will have an error), and more of them are missing, even the 👁 emoji is not there, I am very puzzled, and I would like to ask if there is something wrong with my code or the Apple coloe emoji.ttf file?

I would be very grateful if you could answer!

Here is my emoji panel code (simplified with some logic):

<template>
    <div>
        <div v-for="(emojis, category) in state.emojiMap" :key="category">
            <div class="grid p-2 gap-2 grid-cols-6">
                <button
                    v-for="(emoji) in emojis"
                    :key="emoji.unified"
                    :title="emoji.name">
                    <span>{{ emojiCode(emoji) }}</span>
                </button>
            </div>
        </div>
    </div>
<template>

<script setup>
    import emojiPack from 'https://cdn.jsdelivr.net/npm/emoji-datasource-apple@15.0.0/+esm'

    const emojis = sortByCategory(emojiPack)
    const state = reactive({
        emojiMap: emojis
    })

    function emojiCode({ unified }){
        try{
            return String.fromCodePoint(unified.split('-').map(it => `0x${it}`))
        }catch(e){
            return ''
        }
    }
</script>

The rendering is below, with a lot of emoji missing because they report errors:

When an error is reported (with the try-catch protection removed), the console output is as follows:

Uncaught (in promise) RangeError: Invalid code point NaN
    at Function.fromCodePoint (<anonymous>)
    at Proxy.emojiCode (EmojiPanel.vue:104:19)
    at EmojiPanel.vue:9:26
    at renderList (runtime-core.esm-bundler.js:2755:16)
    at Proxy._sfc_render (EmojiPanel.vue:12:22)
    at renderComponentRoot (runtime-core.esm-bundler.js:816:16)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5701:46)
    at ReactiveEffect.run (reactivity.esm-bundler.js:178:19)
    at instance.update (runtime-core.esm-bundler.js:5814:51)
    at setupRenderEffect (runtime-core.esm-bundler.js:5822:5)

Here are some missing emoji unifieds that I used the try-catch statement and printed in the catch:

1F3F3-FE0F
1F3F3-FE0F-200D-1F308
1F3F3-FE0F-200D-26A7-FE0F
1F3F4-200D-2620-FE0F
1F1E6-1F1E8
1F1E6-1F1E9
1F1F8-1F1EA
1F1F8-1F1EC
1F1F8-1F1ED

[dmlls]

Hi @Iceberry-qdd, this is potentially caused by the variation selector U+FE0F. In order to correctly compile the emoji following the Noto Emoji font scripts, the code point U+FE0F is removed from the filenames.

As for the flag emojis (e.g., 1F1E6-1F1E8), I'm not entirely sure why they are failing.

I'm wondering if perhaps the project https://github.com/meyer/emoji-db fits your use case better... :)

[Iceberry-qdd]

Ok, i'll try another repository, thanks for reply. I'm really like apple color emojis.