"Rainbow flag" + other emojis do not appear as a single image but as two separate emojis

[Cwpute]

Describe the bug

Several emoji combinations (emojis made from several combined with an invisible space character) like the rainbow flag, keycap emojis, the eye-speech bubbles, heart-fire, and probably some more appear in the app as two different emojis instead of one.

Pasted in my web-browser, here for example, they do appear as the expected emoji : 🏳️‍🌈#️⃣👁️‍🗨️❤️‍🔥

Expected behavior They appearance in the app should look like what they end looping when you paste them.

Versions OS: Linux Mint 22.1 Qt: i do not know how to find this EFCK: not sure how to see the version number ?

[kernc]

I suspect this is due to the emoji font that ends up being used by the app. In that font the emoji sequence ends up as two (or several) glyphs.

Default font is platform-dependent; for you likely 'Noto Color Emoji'. https://github.com/efck-chat-keyboard/efck/blob/05066d81f3d2f91da00bc539eba2cb2bde22c0ba/efck/tabs/emoji.py#L112-L126

See the FAQ entry about other known fonts: https://efck-chat-keyboard.github.io/faq/#fonts And how to try out / pick a custom font by declaring and exporting ICON_FONT= environment variable: https://efck-chat-keyboard.github.io/faq/#custom-font E.g. Firefox web browser uses a built-in font 'Twemoji Mozilla'.

Does any font look good for you (i.e. rainbow flag one single glyph)?

FYI, version is reported when run from the terminal with efck-chat-keyboard --debug.

[Cwpute]

Ah, this is a bit hard for me i think, i'm not fluent in "english coding" 🙃 i'll try anyway and report back. Some way to do that from inside your app would be welcome.

[Cwpute]

Okay i've tried out stuff but i definitely don't know what i'm doing or if anything i'm doing works. The environment variable seems to be set but everytime i open up efck it's still the same emoji font that is used... the ./efck-chat-keyboard command doesn't work either so i don't know :(

[kernc]

• Locate your installation with locate efck-chat-keyboard or find ~ -type f -executable -name efck-chat-keyboard | head -n 1 or similar.
• cd into that directory so you can use ./efck-chat-keyboard, or simply use the full absolute path.
• You can install new user font files into ~/.fonts/.
• ICON_FONT= must be set to the font family name, such as export ICON_FONT='Twemoji Mozilla'.
• The variable needs to be exported in the app's environment.

HTH

[Cwpute]

Thanks for the step by step ! i'll try that tomorrow

[Cwpute]

The link to Twemojis you provide on your website is outdated, here is a link to a maintained version of them, bundled as a font: https://github.com/13rac1/twemoji-color-font

I tried to follow your step by step guide... i realize i should have told you i'm on Linux, but i don't think it changes much ? The command you provided couldn't find any executable. The previous command locate efck-chat-keyboard did find several paths, some in /var/lib/dpkg/info/, in /usr/share/doc/, in /home/myusername/.config/ and several others... i didn't know which to choose so i opted for this last one, then decided to set that variable everywhere for this user with export ICON_FONT='Twitter Color Emoji'. Now, wherever i'm cd-ed in, echo $ICON_FONT gives me Twitter Color Emoji. I also set it as a persistent variable for this user just to be sure using a bash file (i don't even know what this is). The font i want is rightly installed as evidenced by the fc-list command: /home/myusername/.local/share/fonts/Unknown Vendor/TrueType/Twitter Color Emoji/Twitter_Color_Emoji_Regular.ttf: Twitter Color Emoji:style=Regular Then, you say i should export that variable in the app's environment... i'm not sure i did that as i don't understand what an environment is 😬

I'm sorry if this is taking you lots of time, i'm trying to follow these steps with my limited knowledge but it's pretty hard.

[kernc]

You're doing fine. The environment, consisting of all exported variables (as output by command env), is one of the things passed to every spawned child process. If you exported the var, it should be available to all programs you spawn from the same shell / terminal.

The executable efck-chat-keyboard is a file (not directory) in the downloaded project root folder.

If you installed the DEB package, the correct executable is the one installed in /usr/bin/ (which due to standard PATH= you can also run without any path prefix, simply efck-chat-keyboard—use which efck-chat-keyboard to confirm)!

[Cwpute]

Ok, right so. which efck-chat-keyboard does indeed confirm the app is located in /usr/bin/.

BUT.

1. If i use the shortcut i had set up to a key on my keyboard, which uses the command efck-chat-keyboard, the app starts with the default emojis:

2. If i use the very same command in a new terminal, the new emoji font is used (in monochrome... why?):

This reminds me of a similar bug i had with another shortcut i had set up for taking screenshots, so the problem may be on my side: https://github.com/flameshot-org/flameshot/issues/3889

[Cwpute]

Funnily enough with the new emoji-set set up, when i hover my mouse above the rainbow flag emoji (now rendered as expected, if you don't take the monochrome aspect into account), the help window that pops-up still shows that emoji as two separate icons...

[kernc]

1. If i use the shortcut i had set up to a key on my keyboard, the app starts with the default emojis:

This is because ICON_FONT= is only set in the terminal shell environment where you set it. If you wanted it to be set system-wide, you can put it in /etc/environment or similar and reboot.

2. If i use the very same command in a new terminal

If you mean a new terminal, not the one you exported the variable in, then case 1. might work too, but you at a minimum need to relogin. Other reasons 2. is working are you put export ICON_FONT=... in ~/.bashrc, which is an init script strictly for terminal shell (bash).

... new emoji font is used (in monochrome... why?)

Appears to me that Twemoji SVGinOT, like its website says, only works in Firefox (...). The linked example at the bottom of the page confirms no font color e.g. in Chromium: https://xerographer.github.io/reinebow/ In particular, "SVGinOT" font tech is not built in and thus doesn't work in Qt widget toolkit our app is written in ...

Do you, by chance, find more success with "Twemoji Mozilla" (COLR) font as published a few years ago by Mozilla? https://github.com/mozilla/twemoji-colr/releases

Funnily enough, when i hover my mouse above the rainbow flag emoji, the help window that pops-up still shows that emoji as two separate icons...

Font pointed to by ICON_FONT= is only set on the QStyledItemDelegate for emojis on Emoji tab: https://github.com/efck-chat-keyboard/efck/blob/05066d81f3d2f91da00bc539eba2cb2bde22c0ba/efck/tabs/emoji.py#L192 The rest of the app, including all tooltips, uses the default desktop font ...

[kernc]

Do you find more success with "Twemoji Mozilla" (COLR) font as published a few years ago by Mozilla?

Note:

In Qt 6.9, our support on Windows and Freetype has also been extended, so that bitmap color fonts, COLRv0 and COLRv1 are now supported across all platforms. Note that OpenType-SVG fonts are still not supported by Qt and there is currently no plan to implement this, given the current cross-platform traction of the COLRv1 format.

https://www.qt.io/blog/emoji-in-qt-6.9#:~:text=lot%20of%20work.-,In%20Qt%206.9%2C%20our,of%20the%20COLRv1%20format.,-In%20addition%2C%20new

[Cwpute]

I suppose i do find more succes, as now the app running from the terminal and called by my shortcut both show the same thing :

☺🙃🥴🤪💀

[kernc]

Did you set and export ICON_FONT='Twemoji Mozilla'? Above-quoted blog snippet is about Qt 6.9+. LMDE 22 (featuring Debian "Bookworm" 12) only has Qt 6.4 ... Maybe that has something to do with it. 🤷

[Cwpute]

Hopefully i reverted all previous tries i had made... i'm not sure i did this correctly as the some of the syntax was previously highlighted in my terminal while now it's not.

As you suggested, i went to /etc/environment and set and exported the variable there by appending that file with ICON_FONT='Twemoji Mozilla' and then export ICON_FONT='Twemoji Mozilla'. I cd-ed into /usr/bin and executed the same commands there as well just to be sure. Executing f-list i can't see Twemoji Mozilla as being installed... i thought it was rightly installed, as it's recognized in the font manager as so. The last font was installed using a script, and i uninstalled it using another script that was also provided.

Installing script:

#!/bin/sh
#https://github.com/13rac1/twemoji-color-font
echo -e "Twitter Color Emoji font installer for Linux\n"

# Check for Bitstream Vera
fc-list | grep "Bitstream Vera" > /dev/null
RETURN=$?
if [ $RETURN -ne 0 ];then
  echo "Bitstream Vera font family not found. Please install it:"
  echo "sudo apt-get install ttf-bitstream-vera"
  exit 1
fi
echo "NOTE: Changing default font family to Bitstream Vera"

# Stop on errors
set -e
# Set XDG_DATA_HOME to default if empty.
if [ -z "$XDG_DATA_HOME" ];then
  XDG_DATA_HOME=$HOME/.local/share
fi

# Remove font from old directory if exists (temporary backwards compat)
if [ -f $HOME/.fonts/TwitterColorEmoji-SVGinOT.ttf ];then
  echo "Removing the font from $HOME/.fonts"
  rm $HOME/.fonts/TwitterColorEmoji-SVGinOT.ttf
fi

# Create a user font directory
mkdir -p $XDG_DATA_HOME/fonts
echo "Installing the font in: $XDG_DATA_HOME/fonts/"
cp TwitterColorEmoji-SVGinOT.ttf $XDG_DATA_HOME/fonts/

# Create a font config directory
FONTCONFIG=$HOME/.config/fontconfig
mkdir -p $FONTCONFIG/conf.d/
# Check for an existing font config
if [ -f $FONTCONFIG/fonts.conf ];then
  # (temporary backwards compat)
  echo "Existing fonts.conf backed up to fonts.bak"
  cp $FONTCONFIG/fonts.conf $FONTCONFIG/fonts.bak
fi
# Install fonts.conf
cp fontconfig/46-twemoji-color.conf $FONTCONFIG/conf.d/

echo "Clearing font cache"
fc-cache -f

echo "Done!"

Uninstalling script:

#!/bin/sh
#https://github.com/13rac1/twemoji-color-font
echo "Twitter Color Emoji font uninstaller for Linux\n"

set -v

# Set XDG_DATA_HOME to default if empty.
if [ -z "$XDG_DATA_HOME" ];then
  XDG_DATA_HOME=$HOME/.local/share
fi
FONTCONFIG=$HOME/.config/fontconfig

rm $XDG_DATA_HOME/fonts/TwitterColorEmoji-SVGinOT.ttf
rm $FONTCONFIG/conf.d/46-twemoji-color.conf

echo "Clearing font cache"
fc-cache -f

echo "Done!"

Lastly i really don't know about Qt, it seems it's not even installed on my computer but as i understand it usually gets bundled in apps directly...

[kernc]

I'm quite confident that on a Debian, the package depends on Qt (PyQt) provided by the distribution! https://github.com/efck-chat-keyboard/efck/blob/05066d81f3d2f91da00bc539eba2cb2bde22c0ba/packaging/debian/control#L20-L26

I've been able to confirm the rainbow flag emoji renders as two-glyphs on these fonts:

NotoColorEmoji.ttf: Noto Color Emoji:style=Regular
OpenMoji_Color.ttf: OpenMoji:style=Color
AppleColorEmoji.ttf: Apple Color Emoji:style=Regular
TwemojiMozilla.ttf: Twemoji Mozilla:style=Regular
joypixels-android.ttf: JoyPixels:style=Regular
TwitterColorEmoji-SVGinOT.ttf: Twitter Color Emoji:style=Regular

And also confirm that while this was an issue on Qt 6.4, it seems to work on Qt 6.9!

The right migration path for this issue is to upgrade Qt. In case of your LMDE 22, this might mean installing EF*CK in custom Python environment with PyQt6>=6.9 pre-installed, at least until a version-bumped Linux-x64.tar.gz build (or a new Debian) is available.

Thanks for reporting!

[Cwpute]

So this wasn't in vein 😅 thanks a lot for your patience and walking me through this. Since Qt 6.9 is a really recent update I'll just wait it out ! I don't install each and every update my update manager gives me, what package/app should i look for ?