How can I vertical layout correctly?

[mes51]

Hi.
I'm trying vertical layout by looking at the #327 Pull Request.
When I tried it, it seemed that the layout of some characters was off (the characters were not centered like in the pull request, and punctuation marks and long vowels were also significantly misaligned).
I tried several fonts (Windows standard fonts such as MS UI Gothic, Meiryo, YaHei, and fonts installed from Google Fonts and Adobe Fonts), but it seemed that the misalignment occurred with all of them.
Are there any other settings that need to be specified in addition to specifying Vertical* for LayoutMode when layout vertically? Or is there another problem?
In the sample, it is rendered using SixLabors.ImageSharp.Drawing, but in the end, I plan to use the glyph path rather than the rendered image.

Windows 11 Home 23H2
.NET 8
SixLabors.Fonts v2.0.6
(SixLabors.ImageSharp.Drawing v2.1.4)

Without punctuation:

With punctuation (At first glance, the “う”, "こ", “も”, “し” and "日" appear to be centered, but this is only because the punctuation marks is misaligned.)

As a reference, I have attached a layout in Photoshop.

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 WithoutPunctuation = "あいうえお「こんにちはー」もしもし ABCDEFG 日本語";
const string WithPunctuation = "あいうえお、「こんにちはー」。もしもし。ABCDEFG 日本語";

void CreateTextImage(string text, string filePath)
{
    //using var fs = new System.IO.FileStream("NotoSerifJP-Medium.ttf", FileMode.Open);
    //var fontCollection = new FontCollection();
    //var fontFamily = fontCollection.Add(fs);

    var fontFamily = SystemFonts.Get("Yu Gothic");
    var font = fontFamily.CreateFont(30.0F);
    var textOption = new RichTextOptions(font)
    {
        LayoutMode = LayoutMode.VerticalRightLeft,
        Origin = new Vector2(10.0F, 10.0F)
    };

    var bounds = TextMeasurer.MeasureBounds(text, textOption);
    var image = new Image<Bgra32>(
        (int)Math.Ceiling(bounds.Width + Math.Abs(bounds.Left) * 2.0F),
        (int)Math.Ceiling(bounds.Height + Math.Abs(bounds.Top) * 2.0F),
        new Bgra32(255, 255, 255)
    );
    image.Mutate(x =>
    {
        x.DrawText(textOption, text, Color.Black);

        // draw bounding box
        x.DrawPolygon(
            Pens.Solid(Color.Blue),
            new PointF(bounds.Left, bounds.Top),
            new PointF(bounds.Right, bounds.Top),
            new PointF(bounds.Right, bounds.Bottom),
            new PointF(bounds.Left, bounds.Bottom)
        );

        // draw center line
        var centerX = bounds.Left + bounds.Width * 0.5F;
        x.DrawLine(
            Pens.Solid(Color.Red),
            new PointF(centerX, bounds.Top),
            new PointF(centerX, bounds.Bottom)
        );
    });

    image.SaveAsPng(filePath);
}

CreateTextImage(WithoutPunctuation, "without_punctuation.png");
CreateTextImage(WithPunctuation, "with_punctuation.png");

[JimBobSquarePants]

Thanks for providing such great detail! There's definitely something wrong here and I'm investigating now. Can you please add your software versions used to your sample and I'll create an issue. Thanks!

[mes51]

Thank you for your reply!
I'm sorry, I forgot to write about the version I'm using.

• Windows 11 Home 23H2
• .NET 8
• SixLabors.Fonts v2.0.6
• (SixLabors.ImageSharp.Drawing v2.1.4)

[mes51]

I have checked that this has been fixed in version 2.0.7.
Thank you for fixing this issue!

[JimBobSquarePants]

I fixed your issue but inadvertently pushed another where Latin glyphs are not centred for forced vertical layout. 😔

It’s very late here so I’ll push a further fix tomorrow.