Some fonts are not rendered with the correct baseline

[appel1]

Describe the bug

On Windows, compared to WPF and browsers like Edge and Chrome, some fonts are rendered with the wrong baseline. Some also gets the wrong bounds.

For example:

• Bahnschrift
• Baskerville Old Face
• Bauhaus 93
• Britannic
• Cambria Math
• Footlight MT

To Reproduce

Run the attached project, it draws the system fonts using Avalonia and WPF side by side using the same font size and with layout rounding turned off in Avalonia to get similar results as WPF. WPF pixel aligns each row so we'll never get a pixel perfect result, but it shouldn't diff more than one screen px and the bounding boxes should be equal.

The Avalonia control NoLayoutRoundingTextBlock is just a TextBlock but the always on layout rounding is ignored to get more similar bounding boxes to WPF.

I've tried to draw a line where the baseline is and in Avalonia the ascent and descent.

Comparing bounds to results in browser, Edge in this case.

AvaloniaWpfFontComparison.zip

Expected behavior

Avalonia should render text at the same baseline and with the same bounds as WPF and web browsers.

Avalonia version

11.3.4

OS

Windows

Additional context

No response

[Gillibald]

Why aren't you using TextDecorations?
The LineGap is properly applied differently

[appel1]

Didn't think of it, those lines are just something I did while trying to understand the difference between Avalonia and WPF. That's not the important part.

Looks like the baseline text decoration implementation is in sync with where Avalonia draws text. Both are at the wrong location for some fonts.

[Gillibald]

var top = Bounds.Height - TextLayout.Height;

var baseline = top + TextLayout.Baseline;

if (FontManager.Current.TryGetGlyphTypeface(new Typeface(FontFamily), out var gt))
{
    var metrics = gt.Metrics;
    double num = FontSize / (double)metrics.DesignEmHeight;

    var ascent = metrics.Ascent * num;
    var descent = metrics.Descent * num;
    var lineSpacing = metrics.LineSpacing * num;

    base.RenderTextLayout(context, origin + new Point(0, -((metrics.LineGap * num) / 2)));

    context.DrawLine(new Pen(Brushes.Orange), new Point(0, baseline + descent), new Point(Bounds.Width, baseline + descent));
    context.DrawLine(new Pen(Brushes.Blue), new Point(0, baseline + ascent), new Point(Bounds.Width, baseline + ascent));

    context.DrawLine(new Pen(Brushes.Green, 1, DashStyle.Dash), new Point(0, Bounds.Height - lineSpacing), new Point(Bounds.Width, Bounds.Height - lineSpacing));
}

This aligns the rendering. So, as I mentioned, half the line gap is applied at the top and bottom.

[appel1]

Is this difference intentional in Avalonia? Or is it worthwhile to submit a PR that takes LineGap into account?

[appel1]

Possibly there's something more going on than the LineGap.

It also doesn't solve the issue with the incorrect bounds.

[Gillibald]

The current implementation adds the whole gap to the bottom instead of distributing the gap evenly between the top and the bottom. Bounds are fine, you are just seeing some part clipped.

[appel1]

How can I avoid this clipping? To be able to position and size elements around the text blocks I need the correct bounds.

[Gillibald]

We apply the lineGap differently. Changes to that behavior can be discussed.

[appel1]

Ok. It would be helpful if you could at least optionally choose to render as close as possible to how it works in WPF and web browsers.

[Gillibald]

For reference: https://glyphsapp.com/learn/vertical-metrics

[appel1]

Just making a note of something that confused me. There seem to be two different ways to implement baseline.

In TextlineImpl baseline is TextBaseline = -ascent.
But in GlyphRun it is Baseline = (-GlyphTypeface.Metrics.Ascent + GlyphTypeface.Metrics.LineGap) * Scale,

Not sure if that changes anything other than you cannot use TextBlock.TextLayout.Baseline since it doesn't take LineGap into account.

[Gillibald]

The linked PR aligns the baseline calculation for all primitives, so a defined line gap is distributed evenly to the top and bottom of a layouted line.