text VerticalAlignment does not work correctly

[matyasforian]

Description

VerticalAlignment.Top places the text a bit below the top, VerticalAlignment.CENTER places it a bit above the top, VerticalAlignment.BOTTOM does not render anything.

Steps to Reproduce

var _fontRobotoMono = Fonts.Install(PerlinUtils.LoadEmbeddedResourceAsString("RobotoMono-Regular.ttf"));
var _font = _fontRobotoMono .CreateFont(20);
var _image = new Image<Rgba32>(50,60);
_image.Mutate(ctx =>
{
                ctx.BackgroundColor(Color.Brown);
                var to = new TextOptions();
                to.VerticalAlignment = VerticalAlignment.Top;
                var opt = new TextGraphicsOptions(new GraphicsOptions(), to);
                ctx.DrawText(opt, "TOP" ,_font, Color.White, new PointF(0, 0));
                to.VerticalAlignment = VerticalAlignment.Center;
                ctx.DrawText(opt, "CEN" ,_font, Color.White, new PointF(0, 0));
                to.VerticalAlignment = VerticalAlignment.Bottom;
                ctx.DrawText(opt, "BOT" ,_font, Color.White, new PointF(0, 0));
});
_image.SaveAsPng("eerrff.png");

the resulting image:

System Configuration

• ImageSharp.Drawing version: 1.0.0-beta0010
• Other ImageSharp packages and versions: ImageSharp 1.0.1
• Environment (Operating system, version and so on):
• .NET Framework version: .NET Core 3.0
• Additional information: latest Windows 10

[tocsoft]

You are rendering them relative the the top left corner so what your code is saying is, align the text so the bottom is at the bottom most point I have told you about and wrap going upwards from the bottom to the top, which being ends up positioning you off the top of the canvas. so for bottom to work as you expect correctly you need to position at (0, image.Height).
As for center it moves up and down from the point you provide, so half up and half down.

As you will be able to see from this version where I've moved the drawing origin for each or your calls then you will see it renders correctly.

var _fontRobotoMono = Fonts.Install(PerlinUtils.LoadEmbeddedResourceAsString("RobotoMono-Regular.ttf"));
var _font = _fontRobotoMono .CreateFont(20);
var _image = new Image<Rgba32>(50,60);
_image.Mutate(ctx =>
{
                ctx.BackgroundColor(Color.Brown);
                var to = new TextOptions();
                to.VerticalAlignment = VerticalAlignment.Top;
                var opt = new TextGraphicsOptions(new GraphicsOptions(), to);
                ctx.DrawText(opt, "TOP" ,_font, Color.White, new PointF(0, 0)); // top of image
                to.VerticalAlignment = VerticalAlignment.Center;
                ctx.DrawText(opt, "CEN" ,_font, Color.White, new PointF(0, 30)); // half way down the image
                to.VerticalAlignment = VerticalAlignment.Bottom;
                ctx.DrawText(opt, "BOT" ,_font, Color.White, new PointF(0, 60)); // bottom of the image
});
_image.SaveAsPng("eerrff.png");

[matyasforian]

oh I see, so the VerticalAlignment property is more like setting the pivot's vertical coordinates. Perhaps it'd be good to rename it to something like PivotVerticalAlignment.