How I can generate Emoji path correctly?

[mes51]

Hi.
While trying to generate paths for emoji glyphs using IGlyphRenderer, I ran into a few issues.

Misaligned 👨‍👩‍👧‍👦

With 👨‍👩‍👧‍👦, the path for the person at the back left is generated at a misaligned position.

Rendered image

Actual:

Expected(Render by browser):

Steps to Reproduce

using SixLabors.Fonts;
using SixLabors.ImageSharp;
using SixLabors.ImageSharp.Drawing.Processing;
using SixLabors.ImageSharp.PixelFormats;
using SixLabors.ImageSharp.Processing;
using System.Numerics;

void CreateTextImage(string text, string filePath)
{
    var fontFamily = SystemFonts.Get("游ゴシック"); //SystemFonts.Get("Yu Gothic");
    var font = fontFamily.CreateFont(120.0F);
    var textOption = new RichTextOptions(font)
    {
        FallbackFontFamilies = [SystemFonts.Get("Segoe UI Emoji")]
    };

    var bounds = TextMeasurer.MeasureBounds(text, textOption);
    using var image = new Image<Bgra32>(
        (int)Math.Ceiling(bounds.Width),
        (int)Math.Ceiling(bounds.Height),
        new Bgra32(255, 255, 255)
    );
    image.Mutate(x =>
    {
        x.Transform(new AffineTransformBuilder().AppendTranslation(new PointF(bounds.Left, bounds.Top)));
        x.Paint(canvas =>
        {
            canvas.DrawText(textOption, text, new SolidBrush(Color.Black), null);
        });
    });

    image.SaveAsPng(filePath);
}

CreateTextImage("👨‍👩‍👧‍👦", "family.png");

An emoji different from the entered text is displayed

🤷🏽‍♀️ and 🤷🏽, as well as ☀︎ and ☀️, seem to identical.
Since there is almost no difference between 🤷🏽‍♀️ and 🤷🏽 at the IGlyphRenderer level, I checked their appearance when rendered with SixLabors.ImageSharp.Drawing.

It is currently unknown whether the issues where the appropriate glyphs for 🤷🏽‍♀️ and ☀︎ fail to render are the same issue.

Since 🤷🏽‍♀️ and 🤷🏽 likely have the same path in most fonts, I don't think they can be distinguished in the paths generated by IGlyphRenderer; however, while ☀︎ should have a Yu Gothic path, ☀️ appears to generate a path as a Segoe UI Emoji character.

Rendered image

🤷🏽‍♀️ and 🤷🏽
Actual:

Expected(Browser):

☀︎ and ☀️
Actual:

Expected(Browser):

Steps to Reproduce

using SixLabors.Fonts;
using SixLabors.ImageSharp;
using SixLabors.ImageSharp.Drawing.Processing;
using SixLabors.ImageSharp.PixelFormats;
using SixLabors.ImageSharp.Processing;
using System.Numerics;

const string Shrugging = "🤷🏽‍♀️🤷🏽";

const string Sun = "☀︎☀️";

// This method is same as Misaligned `👨‍👩‍👧‍👦` reproduce code
void CreateTextImage(string text, string filePath)
{
    var fontFamily = SystemFonts.Get("游ゴシック"); //SystemFonts.Get("Yu Gothic");
    var font = fontFamily.CreateFont(120.0F);
    var textOption = new RichTextOptions(font)
    {
        FallbackFontFamilies = [SystemFonts.Get("Segoe UI Emoji")]
    };

    var bounds = TextMeasurer.MeasureBounds(text, textOption);
    using var image = new Image<Bgra32>(
        (int)Math.Ceiling(bounds.Width),
        (int)Math.Ceiling(bounds.Height),
        new Bgra32(255, 255, 255)
    );
    image.Mutate(x =>
    {
        x.Transform(new AffineTransformBuilder().AppendTranslation(new PointF(bounds.Left, bounds.Top)));
        x.Paint(canvas =>
        {
            canvas.DrawText(textOption, text, new SolidBrush(Color.Black), null);
        });
    });

    image.SaveAsPng(filePath);
}

CreateTextImage(Shrugging, "shrugging.png");
CreateTextImage(Sun, "sun.png");

Environment

Windows 11 Pro 25H2
.NET 10
SixLabors.Fonts v3.1.1
(SixLabors.ImageSharp.Drawing v3.1.0)
SixLabors.ImageSharp v4.1.1)

How can I successfully generate the paths for these emojis?

[JimBobSquarePants]

I’m afraid I can’t follow the question as currently written.

There seem to be several separate issues mixed together, and it’s not clear which output was produced by which code path or what result you expected in each case.

Could you please rewrite the question and separate each issue into:

• the input text,
• the code used,
• the actual output,
• the expected output.

A minimal reproduction for each issue would also help.

[mes51]

My apologies. I’ve revised the question to break it down into two separate issues.
If you need any additional information, please let me know, and I’ll look into it.

[JimBobSquarePants]

Actually this is an issue with shaping. I’ll get it fixed asap.