Inconsistent location of text with DrawString

[davidghalls]

I am working to migrate a project to ImageSharp from System.Drawing. All has gone well with one exception: the placement of text with certain fonts. When I draw text using Arial, for example, the placement of the text between ImageSharp and System.Drawing are quite close. However, with a number of other fonts I've tested, the vertical placement of the text seems to be lower on the canvas than I would expect, given the parameters provided in DrawString. You can see the difference in the images below.

Since this behavior varies based on the font, it seems there is something about the font that is causing the difference. Is there anything I can do to ensure that the text is drawn at the X,Y positions specified in DrawString regardless of the font? The problem for me is that with ImageSharp, I measure text, get a height, draw a box slightly larger than that measurement, then draw the text in the box, and the text spills over the bottom border of the box, seemingly because ImageSharp places the first line of the text lower than expected.

I have given a short code sample below that I used to create these images that show the behavior with various fonts. Again, Arial seems OK. It seems to be a problem with other fonts (although not all fonts). Thanks for any advice or thoughts.

Arial, System.Drawing. These two look pretty consistent.

Arial, ImageSharp

---

"BadScript-Regular.ttf", System.Drawing. ImageSharp draws quite a bit lower.

"BadScript-Regular.ttf", ImageSharp

---

"Jaldi-Regular.ttf", System.Drawing. ImageSharp draws quite a bit lower.

"Jaldi-Regular.ttf", ImageSharp

using SixLabors.Fonts;
using SixLabors.ImageSharp;
using SixLabors.ImageSharp.Drawing.Processing;
using SixLabors.ImageSharp.Formats.Png;
using SixLabors.ImageSharp.PixelFormats;
using SixLabors.ImageSharp.Processing;
using System;

namespace imagesharp_test
{
    class Program
    {
        static void Main()
        {
            string assetLocation = "C:\\Temp";

            // Draw with arial, from Windows install
            DrawWithImagesharp(assetLocation, "arial.ttf");
            DrawWithSystemDrawing(assetLocation, "arial.ttf");

            // Draw with BadScript-Regular https://fonts.google.com/specimen/Bad+Script
            DrawWithImagesharp(assetLocation, "BadScript-Regular.ttf");
            DrawWithSystemDrawing(assetLocation, "BadScript-Regular.ttf");

            // Draw with Jaldi-Regular https://fonts.google.com/specimen/Jaldi
            DrawWithImagesharp(assetLocation, "Jaldi-Regular.ttf");
            DrawWithSystemDrawing(assetLocation, "Jaldi-Regular.ttf");
        }

        static void DrawWithImagesharp(string assetLocation, string fontFile)
        {
            using var image = new SixLabors.ImageSharp.Image<Rgba32>(1200, 300);
            image.Mutate(imageContext =>
            {
                // Fill the canvas with a background color
                imageContext.Fill(SixLabors.ImageSharp.Color.Gray);

                // Create an area to draw your text.
                var textRectangle = new RectangleF(100, 100, 1000, 100);

                // Load up the font
                FontCollection collection = new FontCollection();
                FontFamily family = collection.Install(assetLocation + "\\" + fontFile);
                Font font = family.CreateFont(55);

                // Define your text
                string text = "Lorem ipsum dolor sit amet.";

                // Fill the text rectangle so we can see the region on the output image.
                imageContext.Fill(Color.Pink, textRectangle);

                // Draw the text onto the canvas.
                var pointF = new PointF(textRectangle.X, textRectangle.Y);
                var textOptions = new TextGraphicsOptions()
                {
                    TextOptions = new TextOptions()
                    {
                        WrapTextWidth = 1000,
                    }
                };
                imageContext.DrawText(textOptions, text, font, Color.Black, pointF);

            });

            // Save the image to disk
            image.Save(assetLocation + "\\" + fontFile + "-imagesharp.png", new PngEncoder());
        }

        static void DrawWithSystemDrawing(string assetLocation, string fontFile)
        {
            // Create a canvas
            System.Drawing.Bitmap canvasBitmap = new System.Drawing.Bitmap(1200, 300);
            using System.Drawing.Graphics canvasImage = System.Drawing.Graphics.FromImage(canvasBitmap);

            // Fill the canvas with a background color
            var grayBrush = new System.Drawing.SolidBrush(System.Drawing.Color.Gray);
            var canvasBackgroundRectangle = new System.Drawing.Rectangle(0, 0, 1200, 1200);
            canvasImage.FillRectangle(grayBrush, canvasBackgroundRectangle);

            // Create an area to draw your text
            var textRectangle = new System.Drawing.Rectangle(100, 100, 1000, 100);

            // Load up the font
            var fonts = new System.Drawing.Text.PrivateFontCollection();
            fonts.AddFontFile(assetLocation + "\\" + fontFile);
            var font = new System.Drawing.Font(fonts.Families[0], 55, System.Drawing.GraphicsUnit.Pixel);

            // Define your text
            string text = "Lorem ipsum dolor sit amet.";

            // Fill the text rectangle so we can see the region on the output image.
            var pinkBrush = new System.Drawing.SolidBrush(System.Drawing.Color.Pink);
            canvasImage.FillRectangle(pinkBrush, textRectangle);

            // Draw the text onto the canvas.
            var blackBrush = new System.Drawing.SolidBrush(System.Drawing.Color.Black);
            canvasImage.DrawString(text, font, blackBrush, textRectangle, new System.Drawing.StringFormat() { Alignment = System.Drawing.StringAlignment.Near });

            // Save the image to disk
            canvasBitmap.Save(assetLocation + "\\" + fontFile + "-sysem-drawing.png", System.Drawing.Imaging.ImageFormat.Png);
        }

    }
}

[davidghalls]

Note: ImageSharp 1.0.3, ImageSharp.Drawing 1.0.0-beta11, Fonts 1.0.0-beta0013

[JimBobSquarePants]

Thanks for adding so much detail. I'm going to have a look at what our Fonts nightly provides and also compare to SkiaSharp. If That and System.Drawing are very similar we can raise an issue.

[JimBobSquarePants]

I've confirmed the inconsistency and raised SixLabors/Fonts#161

[davidghalls]

Awesome - I'll follow the issue you raised. Thanks for your help with this and everything you guys have done with this project. It's a pleasure to work with!

[JimBobSquarePants]

@davidghalls Updating to Fonts 1.0.0-beta13.5.4 should fix your issue.

[JimBobSquarePants]

Updating to Fonts 1.0.0-beta13.5.4 should fix your issue.