Baseline font offset calculation changed between versions?

[gpatrut-matica]

Hello everyone,

We've been using ImageSharp for quite a while now, we even bought the commercial license and we've had no isseus so far, but recently we've had to update all the packages (previous versions were Fonts 1.0.0-beta19, Drawing 1.0.0-beta15 and ImageSharp 3.0.1). In our use case we had to draw some text at a specified x and y position with its baseline as the vertical position. In the old version, we did this by simply calculating a small offest to apply to the text options like this:

var yVariation = (float)(-font.FontMetrics.Descender + font.FontMetrics.LineGap) / font.FontMetrics.UnitsPerEm * font.Size; adjustedTextOrigin.Y += yVariation;

which worked fine when doing

canvas.Mutate(x => { x .SetDrawingTransform(rotationMatrix) .DrawText(drawingOptions, textOptions, Content, brush, new Pen(Color.Transparent, 1)); });
which produced the following result, the green cross signs the desired origin, after the offest is applied.

But after updating to the latests versions (Fonts 2.1.2, ImageSharp 3.1.6, Drawing 2.1.5) all the offsets are now wrong and the text is no longer correctly aligned.

This is how we do it in the latest version and the result

var yVariation = (double)(-font.FontMetrics.VerticalMetrics.Descender + font.FontMetrics.VerticalMetrics.LineGap) / font.FontMetrics.UnitsPerEm * font.Size; adjustedTextOrigin.Y += (float)yVariation;

Now, my first guess is that perhaps there have been some API changes that I've missed, in which case I would love if anyone could point me on what I'm doing wrong. Thanks.

[JimBobSquarePants]

Vertical metrics are used for laying out vertical text and are often different to the horizontal ones. Could you try the Horizontal metrics and report back? They should be unchanged.

[gpatrut-matica]

Hey, any input on this? We've had to roll back to the old versions which is not idea as some of these versions are also subject to some security vulnerabilities...

[JimBobSquarePants]

OK.

The old versions used to incorrectly align text by the baseline instead of the top.

If you want to offset by the baseline you need to offset the text as in this example:

void Main()
{
    using var image = new Image<Rgba32>(400, 400, Color.White);

    Font font = SystemFonts.CreateFont("Arial", 50, FontStyle.Bold);

    float ascender = (float)(font.FontMetrics.HorizontalMetrics.Ascender) / font.FontMetrics.UnitsPerEm * font.Size;
    float lineHeight = (float)(font.FontMetrics.HorizontalMetrics.LineHeight) / font.FontMetrics.UnitsPerEm * font.Size;

    // The baseline should be at the ascender.
    image.Mutate(x => x.DrawLine(Color.Red, 1, new PointF(0, ascender), new PointF(400, ascender)));

    // Draw the line-height
    image.Mutate(x => x.DrawLine(Color.Blue, 1, new PointF(0, lineHeight), new PointF(400, lineHeight)));

    // Adjust the position so that the baseline aligns with the ascender.
    // Without this, the text is drawn with the top-left of the bounding box at (0,0),
    // which causes the baseline to be too low.
    image.Mutate(x => x.DrawText("Arialg Bold", font, Color.Black, new PointF(0, font.Size - ascender)));

    image.SaveAsPng(@"C:\Users\james\Downloads\2888.png");
}

[gpatrut-matica]

Sorry to necro this discussion!
In the end we ended up using a workaround, but now we are still looking to update to the latest version and went back to this answer to specify that indeed it does not work with certain fonts.

I'm running right now with these versions:
ImageSharp 3.1.12
Fonts 2.1.3
Drawing 2.1.7

I tried that exact sample you pasted and some fonts, such as OCRB, Constantia and Cambria have way off baselines.

This is using OCRB, FontDrop displays correct baseline but ascender does not match the baseline.

This is Constantia

This is Cambria.

Am I missing something or are there other metrics to add/subratct?

Thank you!

[JimBobSquarePants]

Can you provide the fonts? It's unreasonable to expect me to go hunting for them

[gpatrut-matica]

I'm sorry, aside from OCRB I thought they came default with windows, but these were just examples.
Anyways, here's the font files
TesttFonts.zip

[JimBobSquarePants]

Thanks for the follow-up.

There's actually more to this than meets the eye so I'm adding per-line measured metrics so callers can retrieve the line Ascender, Baseline, Descender, LineHeight, and flow-position/extent (Start/Extent) directly from TextMeasurer.

The signature will be

public static LineMetrics[] GetLineMetrics(ReadOnlySpan<char> text, TextOptions options)

A few important points:

1. Layout behavior is intentional and browser-aligned
   The current line-box/baseline behavior follows the same model browsers use (font metrics + line-height/leading distribution). So the measured baseline and line metrics are expected to match that model rather than a glyph-ink-tight box model.
2. Adding Baseline to TextAlignment is not a good fit
   TextAlignment is about inline progression alignment (Start/Center(in FontRectangle)/end) within the flow direction. Baseline alignment is a different concern (typographic line metric anchoring), not an inline text-alignment mode. Mixing those concepts in one enum would make API semantics confusing.
3. Why glyph ink may still look “off” even with correct metrics
   Even when baseline/ascender/descender metrics are correct, visible glyph pixels may not sit exactly where expected because:
   • descenders/overshoots can extend beyond nominal font metrics,
   • hinting/rasterization shifts outlines at render time,
   • fallback fonts may contribute different vertical metrics on a line,
   • combining marks/complex shaping can produce ink extents that don’t map 1:1 to nominal ascender/descender lines.

So in short: metrics are correct from a typographic/layout perspective, but rendered ink can still visually diverge slightly (especially near descenders), which is normal.

[JimBobSquarePants]

Cambria

Constantia

OCRB

This font demonstrates how glyphs do not always line up with metrics. I've checked the values we parse from the font with other tools (fontdrop) and they are correct, but the p stem is short and does not reach the descent line.

[JimBobSquarePants]

Example code from my new tests which demonstrates how to loop and read the metrics

[Fact]
public void Test_Issue_353()
{
    FontCollection fontCollection = new();
    string name = fontCollection.Add(TestFonts.EbGaramond).Name;
    FontFamily family = fontCollection.Get(name);
    Font font = family.CreateFont(30, FontStyle.Regular);

    string text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris.";
    TextOptions options = new(font)
    {
        WrappingLength = 400,
        LineSpacing = 1.4f
    };

    LineMetrics[] l = TextMeasurer.GetLineMetrics(text, options);

    void DrawLines(Image<Rgba32> image)
    {
        // Draw three separate lines for baseline (red), descender (blue),
        // and line bottom (green).
        //
        // `offset` represents the Y coordinate of the top of the current line box.
        // It is advanced by `m.LineHeight` after each iteration.
        float offset = 0;
        for (int i = 0; i < l.Length; i++)
        {
            LineMetrics m = l[i];

            float baseline = offset + m.Baseline;
            float descender = offset + m.Descender;
            float lineBottom = offset + m.LineHeight;

            image.Mutate(x => x.DrawLine(Color.Red, 1, new(m.Start, baseline), new(m.Extent, baseline)));
            image.Mutate(x => x.DrawLine(Color.Blue, 1, new(m.Start, descender), new(m.Extent, descender)));
            image.Mutate(x => x.DrawLine(Color.Green, 1, new(m.Start, lineBottom), new(m.Extent, lineBottom)));

            // Advance to the next line's top-of-line-box.
            offset += m.LineHeight;
        }
    }

    TextLayoutTestUtilities.TestLayout(
        text,
        options,
        includeGeometry: false,
        beforeAction: DrawLines);
}

[gpatrut-matica]

Thank you for detailed explanation, this is more than I could have asked for.

I like the idea of adding per-line metrics, defintely simplifies laying down finely controlled text. Regarding your second point, in hindsight I also agree that a "baseline" vertical alignment option does not make more sense when you're working with different lines of text your explanation just made it clearer.
When do you think this could hit a new release? Right now I could test this by manually building the repo, but our CI/CD workflow is set up for nuget packages.

Thank you!

[JimBobSquarePants]

No worries!

Without using prebuilt metrics this all gets complicated fast because we can have mixed fonts with mixed sizes in a single line. The metrics use the maximum values (which is how the line layout actually works) so all the tricky stuff is abstracted away.

You can grab the prebuilt nightly package from our custom Feedz.io feed. https://github.com/SixLabors/Fonts?tab=readme-ov-file#installation

I'm working night and day just now to get a proper V3 release out (It's 11:11pm here!) I'm desperate to get it done 😄 !!

[gpatrut-matica]

Sounds good, we can work with a different nuget source for now, thank you for your effort!