DrawText generates text with DFKai-SB or KaiU fonts differently than expected

[LoganChang]

Prerequisites

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

Description

using chinese fonts on DrawText I got the error pic

Steps to Reproduce

System Configuration

• ImageSharp.Drawing version:1.0.0-beta15
• Other ImageSharp packages and versions: 3.0.1

• .NET Framework version: .net 7 `

     var font = SystemFonts.CreateFont(fontName, fontsize);
      var color = new Rgba32((byte)colorR, (byte)colorG, (byte)colorB);
  
      var image = new Image<Rgba32>(1, 1);
      var textSize = TextMeasurer.Measure(txt, new TextOptions(font));
      image.Mutate(x => x.Resize(new Size((int)textSize.Width, (int)textSize.Height)));
      image.Mutate(x => x.DrawText(txt, font, color, PointF.Empty));
  
      using (var stream = new MemoryStream())
      {
          image.Save(stream, new PngEncoder());
          return stream.ToArray();
      }

  `

[JimBobSquarePants]

What’s the expected vs actual output?

[LoganChang]

use ImageSharp.Drawing DrawText i get like this

but this fonts should be like this this is create by System.Drawing

[JimBobSquarePants]

Can you supply the System.Drawing code also please?

[LoganChang]

Use FontName is "DFKai-SB" `

    public static byte[] WritetextJpg(string txt, int fontsize, int colorR, int colorG, int colorB, string fontName = "Arial Narrow Italic",bool outside = false)
    {
       Bitmap b = new Bitmap(10, 10);

        byte[] byteImage = new byte[0];

        try
        {
            int width = 0, height = 0;
            int xpos = 0, ypos = 0;
            Font f = new Font(fontName, fontsize, GraphicsUnit.Pixel);
            ArrayList Text = new ArrayList();
            string myText = "";
            int preindex = 0;
            if (txt.IndexOf("\r\n", preindex) == -1)
            {
                while (preindex < txt.Length && txt.IndexOf("\n", preindex) != -1)
                {
                    string mytemp = "";
                    int endindex = txt.IndexOf("\n", preindex);
                    mytemp = txt.Substring(preindex, endindex - preindex);
                    Text.Add(mytemp);
                    preindex = endindex + 1;
                }
                myText = txt.Substring(preindex, txt.Length - preindex);
                if (myText.Length != 0)
                    Text.Add(myText);
            }
            else
            {
                while (preindex < txt.Length && txt.IndexOf("\r\n", preindex) != -1)
                {
                    string mytemp = "";
                    int endindex = txt.IndexOf("\r\n", preindex);
                    mytemp = txt.Substring(preindex, endindex - preindex);
                    Text.Add(mytemp);
                    preindex = endindex + 2;
                }
                myText = txt.Substring(preindex, txt.Length - preindex);
                Text.Add(myText);
            }
            Color brushcolor = Color.FromArgb(colorR, colorG, colorB);
            height = (int)(Text.Count * f.Height);
            string[] tmp = new string[Text.Count];
            int i = 0;
            Bitmap a = new Bitmap(5, 5);
            Graphics h = Graphics.FromImage(a);
            foreach (string textinfo in Text)
            {
                tmp[i] = textinfo;
                width = ((int)h.MeasureString(tmp[i], f).Width > width) ? (int)h.MeasureString(tmp[i], f).Width : width;
                i++;
            }

            h.Dispose();

            a.Dispose();

            b = new Bitmap(width, height);

            Graphics g = Graphics.FromImage(b);
            g.Clear(Color.Transparent);
            SolidBrush blackBrush = new SolidBrush(Color.Black);
            foreach (string t in tmp)
            {
                g.DrawString(t, f, blackBrush, xpos, ypos);
                ypos = ypos + f.Height;
            }
            int Width = b.Width;
            int Height = b.Height;
            if (outside)
            {
                // Create pen.
                Pen pens = new Pen(brushcolor, 6);
                Rectangle rect = new Rectangle(0, 0, Width, Height);
                g.DrawRectangle(pens, rect);
            }
            double R, G, B = 0;
            B = colorB;
            G = colorG;
            R = colorR;
            if (B > 255) B = 255;
            if (G > 255) G = 255;
            if (R > 255) R = 255;

            for (int y = 0; y < Height; ++y)
            {
                for (int x = 0; x < Width; ++x)
                {
                    if (b.GetPixel(x, y).A != 0)
                    {
                        b.SetPixel(x, y, brushcolor);
                    }
                }
            }
            System.IO.MemoryStream ms = new MemoryStream();
            b.Save(ms, ImageFormat.Png);
            byteImage = ms.ToArray();

        }
        catch (Exception e)
        {
            throw e;
        }
        return byteImage;
    }

`

[JimBobSquarePants]

I need something I can use to debug against.

A reduced compilable sample containing.

1. The text from the images
2. The font call with size and type (regular, italic etc)
3. The Graphics call that does the actual drawing.

Thanks

[LoganChang]

1. word is "標楷體輸出"
2. font size 20pt 3. using System; using System.Collections; using System.Drawing; using System.Drawing.Imaging; using System.IO; AND this project FrameWork is .Net Core 3.1

[JimBobSquarePants]

I'm going to need some help here.

I had a look at the shaping using Crowbar and it appears no GSUB substitutions take place. There's also no GPOS or KERN data in the font.

However, our output matches the colored glyphs on the right which clearly doesn't match the text in the input which matches what System.Drawing produces.

FontKit produces the same output we do and I don't know how to get HarfBuzz running in Visual Studio in order to run a unit test and debug.

I've attached the relevant font kaiu.zip

@behdad Sorry to tag you but is there something obvious I've missed?

[behdad]

@behdad Sorry to tag you but is there something obvious I've missed?

I looked into the font as well. cmap looks sane. GSUB only substitutes two dozen vertical glyphs. I don't see how this font can produce the system-generated output, yet I get the same Crowbar output, including the system rendering, as you do. Investigating more.

[behdad]

Ah. Is it possible that it's one of those fonts that requires bytecode interpretter to be run to render correctly?

[behdad]

Ah. Is it possible that it's one of those fonts that requires bytecode interpretter to be run to render correctly?

Doesn't look like it.

[behdad]

Indeed it's a difference between FreeType vs HarfBuzz outline extraction. Need to investigate more to see why.

[behdad]

Ah. Is it possible that it's one of those fonts that requires bytecode interpretter to be run to render correctly?

If I drop the hinting then the FreeType rendering is broken as well.

[behdad]

I believe FreeType has logic to always enable the bytecode interpretter for fonts like this. Finding.

[behdad]

https://github.com/behdad/freetype/blob/08f66322e32cc882733dfae408e040f5057ee2ac/src/truetype/ttobjs.c#L181

[JimBobSquarePants]

Ah! @behdad you legend!

I'd have never figured that out!

I need to do some work on how we handle composite glyphs and also make some changes to the hinter but local tests are very promising.

[JimBobSquarePants]

Yep. This is working.

[behdad]

Nice! So you have a hinter as well? Me is jealous.

[JimBobSquarePants]

I'm just standing on the shoulders of giants. 🙂