"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'.

efck/efck/tabs/emoji.py

Lines 112 to 126 in 05066d8

	if IS_MACOS:
	ICON_FONT_FAMILY = 'Apple Color Emoji'
	_ICON_OFFSET = -5
	# Avoid: "qt.qpa.fonts: Populating font family aliases took 802ms.
	# Replace uses of missing font "X" with one that exists to avoid this cost."
	ALL_FONT_FAMILIES = ()
	elif IS_WIDOWS:
	ICON_FONT_FAMILY = 'Segoe UI Emoji'
	TEXT_FONT.setFamily('Arial')
	ICON_FONT_SIZE -= 3
	_TEXT_OFFSET = 5
	_ICON_OFFSET = -7
	TEXT_FONT_SIZE_PX = 9
	else:
	ICON_FONT_FAMILY = 'Noto Color Emoji'

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: flameshot-org/flameshot#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:

efck/efck/tabs/emoji.py

Line 192 in 05066d8

painter.setFont(self.ICON_FONT)

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. 🤷