How can I vertical layout correctly?

[JimBobSquarePants]

Discussed in #428

^{Originally posted by mes51 December 11, 2024}
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");
```</div>

[JimBobSquarePants]

@mes51 I've made some progress here. I was making some incorrect assumptions plus not taking into considertation glyph substitutions for the vert, vrt2, and vrtr tags.

The only thing left to do is to adjust the baseline for rotated fonts (I originally didn't adjust because System.Drawing doesn't but browsers do so I'll use that approach) and add some tests. (not sure how to test yet)

[JimBobSquarePants]

This appears the best I can do. It looks well centered to me so if you think it's ok, I'll raise a PR.

[mes51]

Thank you for taking the time to fix it!
It looks like the layout is fine for me too.