Example code on FAQ is wrong / -FE0F ignored in URL

[Joshix-1]

Python-Code from https://openmoji.org/faq/

emoji_code = "-".join(f"{ord(c):x}" for c in emoji).upper()
url = f"https://raw.githubusercontent.com/hfg-gmuend/openmoji/master/color/72x72/{emoji_code}.png"

generates for https://emojipedia.org/emoji/%E2%80%BC/ (‼️) 203C-FE0F.
That is correct. (see the emojipedia link)

But https://raw.githubusercontent.com/hfg-gmuend/openmoji/master/color/72x72/203C-FE0F.png is not found.
The image instead is on https://raw.githubusercontent.com/hfg-gmuend/openmoji/master/color/72x72/203C.png

The -FE0F is missing from the URL.
https://emojipedia.org/variation-selector-16/ seems to state that it is mandatory for the Emoji representation.

[b-g]

@Joshix-1 Many thanks for reporting!
@kolibril13 could you have a look and fix the example?

[Joshix-1]

The same is the case for ⁉️
https://raw.githubusercontent.com/hfg-gmuend/openmoji/master/color/72x72/2049-FE0F.png doesn't work, but https://raw.githubusercontent.com/hfg-gmuend/openmoji/master/color/72x72/2049.png works.

I would say the issue is with the names of these files and not with the example code.

[Joshix-1]

I used the following python script to check for more emojis with the same issue:
The python script needs the following library: https://pypi.org/project/emoji/
I ran it in a folder where I downloaded all the svgs from the 14.0 release

#!/user/bin/env python3

from emoji import EMOJI_DATA
from pathlib import Path

for emoji in EMOJI_DATA:
    emoji_code = "-".join(f"{ord(c):x}" for c in emoji).upper()
    path = Path(f"{emoji_code}.svg")
    if not path.is_file():
        if emoji_code.endswith("-FE0F"):
            path2 = Path(f"{emoji_code.removesuffix('-FE0F')}.svg")
            if path2.is_file():
                print(f"{emoji}: ", path2, "exists instead of", path)
                continue
        # print(f"{emoji}: ", path, "doesn't exist")

I found more files with the same issue:

🅰️:  1F170.svg exists instead of 1F170-FE0F.svg
🅱️:  1F171.svg exists instead of 1F171-FE0F.svg
㊗️:  3297.svg exists instead of 3297-FE0F.svg
🈷️:  1F237.svg exists instead of 1F237-FE0F.svg
㊙️:  3299.svg exists instead of 3299-FE0F.svg
🈂️:  1F202.svg exists instead of 1F202-FE0F.svg
🅾️:  1F17E.svg exists instead of 1F17E-FE0F.svg
🅿️:  1F17F.svg exists instead of 1F17F-FE0F.svg
🎟️:  1F39F.svg exists instead of 1F39F-FE0F.svg
✈️:  2708.svg exists instead of 2708-FE0F.svg
⚗️:  2697.svg exists instead of 2697-FE0F.svg
⚛️:  269B.svg exists instead of 269B-FE0F.svg
⚖️:  2696.svg exists instead of 2696-FE0F.svg
🗳️:  1F5F3.svg exists instead of 1F5F3-FE0F.svg
🏖️:  1F3D6.svg exists instead of 1F3D6-FE0F.svg
🛏️:  1F6CF.svg exists instead of 1F6CF-FE0F.svg
🛎️:  1F6CE.svg exists instead of 1F6CE-FE0F.svg
☣️:  2623.svg exists instead of 2623-FE0F.svg
◼️:  25FC.svg exists instead of 25FC-FE0F.svg
✒️:  2712.svg exists instead of 2712-FE0F.svg
▪️:  25AA.svg exists instead of 25AA-FE0F.svg
🏗️:  1F3D7.svg exists instead of 1F3D7-FE0F.svg
🏕️:  1F3D5.svg exists instead of 1F3D5-FE0F.svg
🕯️:  1F56F.svg exists instead of 1F56F-FE0F.svg
🗃️:  1F5C3.svg exists instead of 1F5C3-FE0F.svg
🗂️:  1F5C2.svg exists instead of 1F5C2-FE0F.svg
⛓️:  26D3.svg exists instead of 26D3-FE0F.svg
☑️:  2611.svg exists instead of 2611-FE0F.svg
✔️:  2714.svg exists instead of 2714-FE0F.svg
♟️:  265F.svg exists instead of 265F-FE0F.svg
🐿️:  1F43F.svg exists instead of 1F43F-FE0F.svg
Ⓜ️:  24C2.svg exists instead of 24C2-FE0F.svg
🏙️:  1F3D9.svg exists instead of 1F3D9-FE0F.svg
🗜️:  1F5DC.svg exists instead of 1F5DC-FE0F.svg
🏛️:  1F3DB.svg exists instead of 1F3DB-FE0F.svg
☁️:  2601.svg exists instead of 2601-FE0F.svg
🌩️:  1F329.svg exists instead of 1F329-FE0F.svg
⛈️:  26C8.svg exists instead of 26C8-FE0F.svg
🌧️:  1F327.svg exists instead of 1F327-FE0F.svg
🌨️:  1F328.svg exists instead of 1F328-FE0F.svg
♣️:  2663.svg exists instead of 2663-FE0F.svg
⚰️:  26B0.svg exists instead of 26B0-FE0F.svg
☄️:  2604.svg exists instead of 2604-FE0F.svg
🖱️:  1F5B1.svg exists instead of 1F5B1-FE0F.svg
🎛️:  1F39B.svg exists instead of 1F39B-FE0F.svg
🛋️:  1F6CB.svg exists instead of 1F6CB-FE0F.svg
🖍️:  1F58D.svg exists instead of 1F58D-FE0F.svg
⚔️:  2694.svg exists instead of 2694-FE0F.svg
🗡️:  1F5E1.svg exists instead of 1F5E1-FE0F.svg
🏚️:  1F3DA.svg exists instead of 1F3DA-FE0F.svg
🏜️:  1F3DC.svg exists instead of 1F3DC-FE0F.svg
🏝️:  1F3DD.svg exists instead of 1F3DD-FE0F.svg
🖥️:  1F5A5.svg exists instead of 1F5A5-FE0F.svg
🕵️:  1F575.svg exists instead of 1F575-FE0F.svg
♦️:  2666.svg exists instead of 2666-FE0F.svg
‼️:  203C.svg exists instead of 203C-FE0F.svg
🕊️:  1F54A.svg exists instead of 1F54A-FE0F.svg
↙️:  2199.svg exists instead of 2199-FE0F.svg
↘️:  2198.svg exists instead of 2198-FE0F.svg
⬇️:  2B07.svg exists instead of 2B07-FE0F.svg
✴️:  2734.svg exists instead of 2734-FE0F.svg
✳️:  2733.svg exists instead of 2733-FE0F.svg
⏏️:  23CF.svg exists instead of 23CF-FE0F.svg
✉️:  2709.svg exists instead of 2709-FE0F.svg
⁉️:  2049.svg exists instead of 2049-FE0F.svg
👁️:  1F441.svg exists instead of 1F441-FE0F.svg
♀️:  2640.svg exists instead of 2640-FE0F.svg
⛴️:  26F4.svg exists instead of 26F4-FE0F.svg
🗄️:  1F5C4.svg exists instead of 1F5C4-FE0F.svg
🎞️:  1F39E.svg exists instead of 1F39E-FE0F.svg
📽️:  1F4FD.svg exists instead of 1F4FD-FE0F.svg
⚜️:  269C.svg exists instead of 269C-FE0F.svg
🌫️:  1F32B.svg exists instead of 1F32B-FE0F.svg
🍽️:  1F37D.svg exists instead of 1F37D-FE0F.svg
🖋️:  1F58B.svg exists instead of 1F58B-FE0F.svg
🖼️:  1F5BC.svg exists instead of 1F5BC-FE0F.svg
☹️:  2639.svg exists instead of 2639-FE0F.svg
⚱️:  26B1.svg exists instead of 26B1-FE0F.svg
⚙️:  2699.svg exists instead of 2699-FE0F.svg
⚒️:  2692.svg exists instead of 2692-FE0F.svg
🛠️:  1F6E0.svg exists instead of 1F6E0-FE0F.svg
🖐️:  1F590.svg exists instead of 1F590-FE0F.svg
❣️:  2763.svg exists instead of 2763-FE0F.svg
♥️:  2665.svg exists instead of 2665-FE0F.svg
🕳️:  1F573.svg exists instead of 1F573-FE0F.svg
🌶️:  1F336.svg exists instead of 1F336-FE0F.svg
♨️:  2668.svg exists instead of 2668-FE0F.svg
🏘️:  1F3D8.svg exists instead of 1F3D8-FE0F.svg
⛸️:  26F8.svg exists instead of 26F8-FE0F.svg
☝️:  261D.svg exists instead of 261D-FE0F.svg
♾️:  267E.svg exists instead of 267E-FE0F.svg
ℹ️:  2139.svg exists instead of 2139-FE0F.svg
🕹️:  1F579.svg exists instead of 1F579-FE0F.svg
⌨️:  2328.svg exists instead of 2328-FE0F.svg
🏷️:  1F3F7.svg exists instead of 1F3F7-FE0F.svg
⏮️:  23EE.svg exists instead of 23EE-FE0F.svg
✝️:  271D.svg exists instead of 271D-FE0F.svg
↔️:  2194.svg exists instead of 2194-FE0F.svg
⬅️:  2B05.svg exists instead of 2B05-FE0F.svg
↪️:  21AA.svg exists instead of 21AA-FE0F.svg
🗨️:  1F5E8.svg exists instead of 1F5E8-FE0F.svg
🎚️:  1F39A.svg exists instead of 1F39A-FE0F.svg
🖇️:  1F587.svg exists instead of 1F587-FE0F.svg
♂️:  2642.svg exists instead of 2642-FE0F.svg
🕰️:  1F570.svg exists instead of 1F570-FE0F.svg
⚕️:  2695.svg exists instead of 2695-FE0F.svg
🎖️:  1F396.svg exists instead of 1F396-FE0F.svg
🛥️:  1F6E5.svg exists instead of 1F6E5-FE0F.svg
🏍️:  1F3CD.svg exists instead of 1F3CD-FE0F.svg
🛣️:  1F6E3.svg exists instead of 1F6E3-FE0F.svg
⛰️:  26F0.svg exists instead of 26F0-FE0F.svg
✖️:  2716.svg exists instead of 2716-FE0F.svg
🏞️:  1F3DE.svg exists instead of 1F3DE-FE0F.svg
⏭️:  23ED.svg exists instead of 23ED-FE0F.svg
🛢️:  1F6E2.svg exists instead of 1F6E2-FE0F.svg
🗝️:  1F5DD.svg exists instead of 1F5DD-FE0F.svg
🕉️:  1F549.svg exists instead of 1F549-FE0F.svg
☦️:  2626.svg exists instead of 2626-FE0F.svg
🖌️:  1F58C.svg exists instead of 1F58C-FE0F.svg
〽️:  303D.svg exists instead of 303D-FE0F.svg
🛳️:  1F6F3.svg exists instead of 1F6F3-FE0F.svg
⏸️:  23F8.svg exists instead of 23F8-FE0F.svg
☮️:  262E.svg exists instead of 262E-FE0F.svg
🖊️:  1F58A.svg exists instead of 1F58A-FE0F.svg
✏️:  270F.svg exists instead of 270F-FE0F.svg
⛹️:  26F9.svg exists instead of 26F9-FE0F.svg
🏌️:  1F3CC.svg exists instead of 1F3CC-FE0F.svg
🕴️:  1F574.svg exists instead of 1F574-FE0F.svg
🏋️:  1F3CB.svg exists instead of 1F3CB-FE0F.svg
⛏️:  26CF.svg exists instead of 26CF-FE0F.svg
▶️:  25B6.svg exists instead of 25B6-FE0F.svg
⏯️:  23EF.svg exists instead of 23EF-FE0F.svg
🖨️:  1F5A8.svg exists instead of 1F5A8-FE0F.svg
🏎️:  1F3CE.svg exists instead of 1F3CE-FE0F.svg
☢️:  2622.svg exists instead of 2622-FE0F.svg
🛤️:  1F6E4.svg exists instead of 1F6E4-FE0F.svg
⏺️:  23FA.svg exists instead of 23FA-FE0F.svg
♻️:  267B.svg exists instead of 267B-FE0F.svg
❤️:  2764.svg exists instead of 2764-FE0F.svg
🎗️:  1F397.svg exists instead of 1F397-FE0F.svg
⛑️:  26D1.svg exists instead of 26D1-FE0F.svg
◀️:  25C0.svg exists instead of 25C0-FE0F.svg
🗯️:  1F5EF.svg exists instead of 1F5EF-FE0F.svg
➡️:  27A1.svg exists instead of 27A1-FE0F.svg
⤵️:  2935.svg exists instead of 2935-FE0F.svg
↩️:  21A9.svg exists instead of 21A9-FE0F.svg
⤴️:  2934.svg exists instead of 2934-FE0F.svg
🗞️:  1F5DE.svg exists instead of 1F5DE-FE0F.svg
🏵️:  1F3F5.svg exists instead of 1F3F5-FE0F.svg
🛰️:  1F6F0.svg exists instead of 1F6F0-FE0F.svg
✂️:  2702.svg exists instead of 2702-FE0F.svg
☘️:  2618.svg exists instead of 2618-FE0F.svg
🛡️:  1F6E1.svg exists instead of 1F6E1-FE0F.svg
⛩️:  26E9.svg exists instead of 26E9-FE0F.svg
🛍️:  1F6CD.svg exists instead of 1F6CD-FE0F.svg
⛷️:  26F7.svg exists instead of 26F7-FE0F.svg
☠️:  2620.svg exists instead of 2620-FE0F.svg
🛩️:  1F6E9.svg exists instead of 1F6E9-FE0F.svg
☺️:  263A.svg exists instead of 263A-FE0F.svg
🏔️:  1F3D4.svg exists instead of 1F3D4-FE0F.svg
❄️:  2744.svg exists instead of 2744-FE0F.svg
☃️:  2603.svg exists instead of 2603-FE0F.svg
♠️:  2660.svg exists instead of 2660-FE0F.svg
❇️:  2747.svg exists instead of 2747-FE0F.svg
🗣️:  1F5E3.svg exists instead of 1F5E3-FE0F.svg
🕷️:  1F577.svg exists instead of 1F577-FE0F.svg
🕸️:  1F578.svg exists instead of 1F578-FE0F.svg
🗓️:  1F5D3.svg exists instead of 1F5D3-FE0F.svg
🗒️:  1F5D2.svg exists instead of 1F5D2-FE0F.svg
🏟️:  1F3DF.svg exists instead of 1F3DF-FE0F.svg
☪️:  262A.svg exists instead of 262A-FE0F.svg
✡️:  2721.svg exists instead of 2721-FE0F.svg
⏹️:  23F9.svg exists instead of 23F9-FE0F.svg
⏱️:  23F1.svg exists instead of 23F1-FE0F.svg
🎙️:  1F399.svg exists instead of 1F399-FE0F.svg
☀️:  2600.svg exists instead of 2600-FE0F.svg
🌥️:  1F325.svg exists instead of 1F325-FE0F.svg
🌦️:  1F326.svg exists instead of 1F326-FE0F.svg
🌤️:  1F324.svg exists instead of 1F324-FE0F.svg
🕶️:  1F576.svg exists instead of 1F576-FE0F.svg
☎️:  260E.svg exists instead of 260E-FE0F.svg
🌡️:  1F321.svg exists instead of 1F321-FE0F.svg
⏲️:  23F2.svg exists instead of 23F2-FE0F.svg
🌪️:  1F32A.svg exists instead of 1F32A-FE0F.svg
🖲️:  1F5B2.svg exists instead of 1F5B2-FE0F.svg
™️:  2122.svg exists instead of 2122-FE0F.svg
⚧️:  26A7.svg exists instead of 26A7-FE0F.svg
☂️:  2602.svg exists instead of 2602-FE0F.svg
⛱️:  26F1.svg exists instead of 26F1-FE0F.svg
↕️:  2195.svg exists instead of 2195-FE0F.svg
↖️:  2196.svg exists instead of 2196-FE0F.svg
↗️:  2197.svg exists instead of 2197-FE0F.svg
⬆️:  2B06.svg exists instead of 2B06-FE0F.svg
✌️:  270C.svg exists instead of 270C-FE0F.svg
⚠️:  26A0.svg exists instead of 26A0-FE0F.svg
🗑️:  1F5D1.svg exists instead of 1F5D1-FE0F.svg
〰️:  3030.svg exists instead of 3030-FE0F.svg
☸️:  2638.svg exists instead of 2638-FE0F.svg
◻️:  25FB.svg exists instead of 25FB-FE0F.svg
▫️:  25AB.svg exists instead of 25AB-FE0F.svg
🌬️:  1F32C.svg exists instead of 1F32C-FE0F.svg
🗺️:  1F5FA.svg exists instead of 1F5FA-FE0F.svg
✍️:  270D.svg exists instead of 270D-FE0F.svg
☯️:  262F.svg exists instead of 262F-FE0F.svg

[kolibril13]

I just saw at stackoverflow: The unicode value U+FE0F is called a variation selector
It defines if the emoji is defined as image, with colour and possible animation, or as text.
Therefore, the "-FE0F" sequence can simply be removed.
Here is the new code string:

emoji_code = "-".join(f"{ord(c):x}" for c in emoji).upper().replace("-FE0F", "")

[Joshix-1]

https://emojipedia.org/variation-selector-16/

An invisible codepoint which specifies that the preceding character should be displayed with emoji presentation. Only required if the preceding character defaults to text presentation.

If I interpret that correctly -FE0F is required. Without it it is just a character and not an emoji.

☯ (character)
☯️ (emoji, with FE0F)

On https://emojipedia.org/emoji/%E2%98%AF/ it says the emoji needs both chars

So I don't think that the "FE0F" can be removed

[Joshix-1]

Same representation after posted (GitHub embedding an image https://github.githubassets.com/images/icons/emoji/unicode/262f.png):

Different representation while editing (Noto Color Emoji):

GitHub doesn't care about the FE0F, but I don't think that is correct.

[Joshix-1]

Github even removes the fe0f for longer emoji sequences:
Works: https://github.githubassets.com/images/icons/emoji/unicode/1f64b-1f3fb-200d-2642.png
404: https://github.githubassets.com/images/icons/emoji/unicode/1f64b-1f3fb-200d-2642-fe0f.png

OpenMoji has it with -FE0F: https://raw.githubusercontent.com/hfg-gmuend/openmoji/master/color/72x72/1F64B-1F3FB-200D-2642-FE0F.png

The emoji on emojipedia: https://emojipedia.org/man-raising-hand-light-skin-tone/

(just chose a random longer emoji that ends with FE0F)

[kolibril13]

@Joshix-1 : you can have a look at #405.
Note, that this FE0F problem also exists with emojis from twitter, like this:
url = f"https://raw.githubusercontent.com/twitter/twemoji/master/assets/72x72/{emoji_code.lower()}.png"

If I interpret that correctly -FE0F is required. Without it it is just a character and not an emoji.

yep, it is required for local emoji usage, but it's not required for the two sequence string when downloading from https://raw.githubusercontent.com/hfg-gmuend/openmoji/master/color/72x72/{emoji_code}.png

[Joshix-1]

If I look at https://github.com/hfg-gmuend/openmoji/releases/download/14.0.0/openmoji-font.zip
In the demo.html ☮ and ☮️ are displayed the same way if I type them in the textarea. (first without FE0F).

That seems like another bug.