Combined emoji's are not properly rendered on Android

[Michel de Boer]

I have an Android app (QML) with Roboto as primary font and Google Noto Color Emoji is fallback font.
With this many emoji's are properly rendered, except for the emoji's that are a combination of two other emoji's, i.e. the ones build with the Zero Width Joiner unicode symbol.
Examples are the rainbow flag 🏳️‍🌈 (= 🏳️ + 🌈 ) , the transgender flag 🏳️‍⚧️ (= 🏳️ + ⚧️) and the mended heart ❤️‍🩹 ( = ❤️ + 🩹 )
Instead of the combined emoji, the two underlying emoji's are rendered!
In static text I can fix this by surrounding the emoji by a html tag <font family="Noto Color Emoji">. For dynamic user provided content this does not work however.
I think the problem is that the Roboto font contains the underlying emoji's and has no notion of the Zero Width Joiner.
Is there a way to force the emoji's to be always rendered with the fallback font?
I have tried to set Noto Color Emoji is primary (thinking it does not have anything else but emoji's), but that does not work. Text becomes very ugly then with weird spacing.
A fix for this issue would be much appreciated.

[Diackne]

Hi,

some workaround is Converting UTF (including emoji) to HTML

Label {
           id: name
           font.family: "Roboto"
           text: "&#127752"
           textFormat: Text.RichText
       }

https://dev.to/nikkimk/converting-utf-including-emoji-to-html-x1f92f-4951

[Michel de Boer]

Thanks for your reply.

That is what I kind of did in the end. I scan the text to detect the troublesome emoji's and surround the emoji-sequence with "<font family="Noto Color Emoji">...</font>"

This works. but it is CPU intensive. I am doing this in a social media app. For every post I now do this, but it's a waste of cycles.

Also it gives other problems, as I now have to set the textFormat to RichText things like eliding do not work anymore.