Flags emoji not rendering correctly on Godot 4.2.1

[rcjoel2019]

Tested versions

v4.2.1.stable.official [b09f793f5] v4.2.2.stable.official [15073afe3]

System information

Ubuntu 22.04 - Vulkan API 1.3.232 - Forward+ - Using Vulkan Device #0: AMD - AMD Radeon RX 6600M

Issue description

I would like to use emojis on label/richtextlabel, I followed the docs and used Noto Color Emoji in the labels that I want to use emojis, some of them works, but the ones that I needed the most don't. Some flags are missing parts (ex. Brazil, Japan), other don't even show up (ex. US), already checked this font and the flags do work normally on the web

Steps to reproduce

Create a Label or RichTextLabel, use the Noto Color Emoji font on it, and try to use any flag related emoji. I'm linking the MRP, the scene emoji-example.tscn contains both already configured and filled with examples. The max upload size is 10MB and the font is 22MB+, so you have to download the font Noto Color Emoji and place it on Theme overrides > Fonts

Minimal reproduction project (MRP)

mini-rep-emoji.zip

[AThousandShips]

Please try in 4.2.2 to make sure this bug hasn't already been solved

[rcjoel2019]

Please try in 4.2.2 to make sure this bug hasn't already been solved

Tested now, and it looks the same

[GioSDA]

Interestingly, it works fine with other emoji fonts (such as Twemoji, which I used here)

[rcjoel2019]

Interestingly, it works fine with other emoji fonts (such as Twemoji, which I used here)

That is really strange, should not all fonts behave the same? Thank you for recommending a font that works, for now this solves the issue for me.

I'm assuming that the flags on Noto uses some king of SVG path/effect that is not supported by Godot, since parts of the flag that is not wavy does show up, only the wavy part is invisible.

[GioSDA]

Here's what the Noto svg looks like for the Japanese flag:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
  <defs/>
  <path fill="#fff" d="M8,195.25 C178.83,110.03 349.03,140.83 521.26,167.28 C676.47,191.12 833.42,211.85 992,132.75 L992,804.75 C821.17,889.97 650.97,859.17 478.74,832.72 C323.53,808.88 166.58,788.15 8,867.25 L8,195.25"/>
  <path fill="#bc002d" d="M696.8,523.59 C696.51,637 609.02,718.19 500,701.6 C391.02,684.44 303.48,586.11 303.2,476.41 C303.49,363 390.98,281.81 500,298.4 C608.98,315.56 696.52,413.89 696.8,523.59"/>
  <path fill="#1A1A1A" opacity="0.2" d="M8,195.25 C178.83,110.03 349.03,140.83 521.26,167.28 C676.47,191.12 833.42,211.85 992,132.75 L992,804.75 C821.17,889.97 650.97,859.17 478.74,832.72 C323.53,808.88 166.58,788.15 8,867.25 L8,195.25 M39.25,214.64 L39.25,819.14 C345.81,690.88 650.43,915.18 960.75,785.36 L960.75,180.86 C654.19,309.12 349.57,84.82 39.25,214.64"/>
</svg>

First path is for the white of the flag (is not rendered) Second path is for the red dot (is rendered) Third path is for the outline of the flag (is not rendered)

[bruvzg]

Most likely thorvg related issue (library used to render SVGs). There are 3 common types of color fonts: CBDT/PNG (should always work), SVG (usually works, but depends on thorvg), and COLRv1/CPAL (currently not supported).

[Anixias]

Interestingly, for me, using Noto Color Emoji appears very broken in Godot 4.3.beta2.mono with most emojis (with few exceptions). 😃😄😁😆 appear as:

Edit: It works perfectly fine with other emoji fonts, only Noto Color Emoji renders like this. Edit: I eventually found a NotoColorEmoji_WindowsCompatible.ttf file which does work correctly. Flags appear correctly with this font as well.