Embedded emojis within text

[avisra]

Here's a fun one :)

The text is accept comes from end-users. Occasionally, they like to slap an emoji along with some text. The text itself might be Font A - but when SixLabors attempts to render it - the emoji is missing because its trying to render everything with Font A. Is there a way to update it so it can use two fonts within a single TextOptions? Or what is the best way to handle this?

[tocsoft]

you need to specify textOptions.FallbackFontFamilies to emojii font with ttf outlines.

We don't have a great sample of this but this line

Fonts/samples/DrawWithImageSharp/Program.cs

Line 89 in fec131d

RenderText(uiFont, "The quick👩🏽‍🚒 brown fox jumps over the lazy dog", pointSize: 72, textRuns: textRuns, fallbackFonts: new[] { emojiFont });

is doing just that (the helper RenderText) is just creating the text options and then rendering it out.

[tocsoft]

in fact it looks like our docs have a rough example too https://docs.sixlabors.com/articles/fonts/gettingstarted.html#expanded-example

[avisra]

Thanks a bunch for sharing all of this! I have tried it, but it is still not rendering anything for me - which is strange. I am primarily using DrawText and GenerateGlyphs. Will keep digging a bit.

The font is this one: https://fonts.google.com/noto/specimen/Noto+Color+Emoji

[avisra]

I switched over to Twemoji.Mozilla and it started working immediately. There must be something with the Noto Color Emoji that causes things to fail...

However, my code is still failing under one scenario with Twemoji.Mozilla -

                        PathBuilder pathBuilder = new PathBuilder();
                        pathBuilder.SetOrigin(new PointF(xPos, 0));

                        pathBuilder.AddCubicBezier(new PointF(0, squareSize * (float).10), new PointF((int)(squareSize * .25), 0), new PointF((int)(squareSize * .75), 0), new PointF(squareSize, squareSize * (float).10));

                        IPath path = pathBuilder.Build();
                        var textOptions = new TextOptions(playerNameFont)
                        {
                            WrappingLength = path.ComputeLength(),
                            VerticalAlignment = VerticalAlignment.Top,
                            HorizontalAlignment = HorizontalAlignment.Left,
                            TextAlignment = TextAlignment.Center,
                            KerningMode = KerningMode.Auto,
                            Origin = new Point(0, 0),
                            FeatureTags = new List<Tag>() { FeatureTags.Kerning },
                            FallbackFontFamilies = new[] { emojiFamily.Value }
                        };

                        var glyphs = TextBuilder.GenerateGlyphs(playerName.Value, path, textOptions);

                        image.Mutate(ctx => ctx.Fill(new DrawingOptions() { ShapeOptions = new ShapeOptions { IntersectionRule = IntersectionRule.NonZero } }, playerNameColor.Color, glyphs));

This causes the emojis to be colored in solid black like the rest of the text. How can I prevent the emojis from being painted black?

[tocsoft]

You will want to move over to our updated RichTextOptions type in place of the base TextOptions which adds support for a Path property to render along used while rendering the text along with providing per span overrides often brush/pen used for part of the text. (RichTextRun)

I've just opened a PR to update our samples to cover your use case. SixLabors/Samples#37 which produces an output like this

A direct link to the raw code is https://github.com/SixLabors/Samples/blob/6168903c095f16afe5816c52c34b103f2fba6e77/ImageSharp/DrawingTextAlongAPath/Program.cs

[avisra]

This worked wonderfully. Thank you!!