Unable to draw NotoColorEmoji font

[CptWesley]

Prerequisites

• I have written a descriptive issue title
• I have verified that I am running the latest version of ImageSharp.Drawing
• I have verified if the problem exist in both DEBUG and RELEASE mode
• I have searched open and closed issues to ensure it has not already been reported

ImageSharp.Drawing version

3.1.11

Other ImageSharp packages and versions

SixLabors.ImageSharp.Drawing 2.1.7, SixLabors.Fonts 2.1.3

Environment (Operating system, version and so on)

Windows 11

.NET Framework version

NET 10

Description

I am unable to draw using the NotoColorEmoji font. Other fonts work fine, including other emoji fonts (such as Segoe UI loaded using SystemFonts.Get("Segoe UI Emoji") and NotoEmoji loaded from a .ttf file).

Steps to Reproduce

1. Run the following code:

var text = "a😃a⭐️a🌟a😃a";
var fonts = new FontCollection();
var fontFamily = fonts.Add("NotoColorEmoji-Regular.ttf");
var font = fontFamily.CreateFont(12f);
var color = SixLabors.ImageSharp.Color.Black;
var pos = new PointF(10, 10);
using var img = new Image<Rgba32>(256, 64, new Rgba32(0));
img.Mutate(ctx =>
{
    ctx.Clear(SixLabors.ImageSharp.Color.White);
    ctx.DrawText(text, font, color, pos);
});
img.SaveAsPng("a.png");

2. Observe a.png:

Here the box-like glyphs are to be expected, since NotoColorEmoji doesn't contain any glyphs for the a character.
The advance/bounds of the emoji glyphs seem to be taken into account.

Images

No response

[JimBobSquarePants]

Thanks for the detail. It won’t be the drawing library that’s the issue, it’ll be something unsupported within the font itself. I’ll migrate this issue to the Fonts repo and have a look asap.

[JimBobSquarePants]

Hey @CptWesley I've been doing some investigating and have an update.

NotoColorEmoji includes color glyphs, specifically COLRv1 (with CPAL) and an SVG table. SixLabors.Fonts v2 does not support COLRv1 or SVG color glyphs, and adding them to v2 would require breaking changes, so v2 will not gain this support.

The good news, I’ve made solid progress toward Fonts v3 with a new color-glyph pipeline. COLRv1 and SVG-backed color glyphs are in scope there, so this font should work once that lands.

Workarounds today: use a non-color fallback like NotoEmoji or a platform color font that your stack can already render (for example Segoe UI Emoji on Windows), as you noted.

I’ll update this thread when v3 builds are available for testing.

[CptWesley]

@JimBobSquarePants Thank you for investigating and the update! I have indeed resorted to falling back to Segoe UI in the meantime.

[JimBobSquarePants]

@CptWesley It's taken me a while but it looks like I can now render both the SVG and COLRv1 glyphs from within that font.

I still have a lot of tidy up to do but I think we can safely say that V3 will definitely support it.

SVG

COLRv1

[CptWesley]

@JimBobSquarePants Awesome! 😃