Vertical Text Alignment

[robloo]

Describe the bug

I've seen this a few different places now with vertically aligned text. I'm just going to throw in some screen captures below.

What it looks like to me is text is vertically centered by calculating the height as (ascent - descent). However, this visually doesn't look quite right as the vast majority of text follows the baseline and doesn't go all the way to the descent. Therefore, I think vertical centering probably should be (ascent - baseline) for height.

Interestingly, TextBox looks correct to me. So this might unfortunately be a more general issue. TextBox is aware of how to calculate text vertical position using baseline instead of descent. However, other controls just use bounds and are not aware of more text-specific considerations... that opens up a can of worms if it's what is actually happening.

I have not noticed this before in WPF/UWP so I think they also calculate using the baseline in all controls; I could be wrong though and just wanted to point this out for those that know more than me in this area.

Expected behavior

Text should be vertically centered "visually" instead of "mathematically". Avalonia is currently accurate but doesn't quite look right to the eye.

Screenshots

DatePicker:

ColorPicker > Components:

12px above, 14/15px below

ComboBox

Desktop (please complete the following information):

• OS: Windows 10 Pro
• Version: 11.0-preview5+ at cbe0bb8

Additional context
Add any other context about the problem here.

[robloo]

This seems to be font related. Perhaps the font metrics aren't being processed correctly in all cases?

vid.mp4

[kulikov-dev]

I got the same problem with the Segoe UI font...

[Gillibald]

There is no issue with text, in general, this is an issue with the TextBox template.

[chylex]

Consolas is very off-center since updating to Avalonia 11, is there something I can do to fix it?

I cannot use Padding because it will affect fallback fonts that don't have this problem.

[timunie]

@chylex looks like it can be solved by adding VerticalContentAlignment="Center" into a style: https://github.com/AvaloniaUI/Avalonia/blob/97f2d8e74e0a64f98f855a5dc92ac30d03440d7f/src/Avalonia.Themes.Fluent/Controls/TextBox.xaml#L167C73-L167C97

Can you double-check it on your end?

[robloo]

VerticalTextAlignment to center is non ideal especially for TextBox. This is because is cannot work for multi-line text.

FluentUI upstream hardcodes some internal margins to make the first line of text appear as center even though it is actually top aligned. I need to check the actual control templates to validate this though.

If true, we are going to have to pull out a lightweight styling resource to adjust this based on font. Ideally, it could be calculated with measurements of the text controls though.

[timunie]

@robloo if you know you have a single line TB, it's probably a valid "workaround" but in general, I think there is no easy solution for it. A dynamic padding can be a way, but it's not that easy probably. Many things to consider here...

[robloo]

@timunie Yea, it's tricky for sure and there are case-by-case workarounds (incliding shipping a standard font).

However a general solution is going to be needed for this. On my end it is even more severe in appearance using FluentAvalonia with default macOS fonts. This all needs to work out of the box in a cross-platform, generalized way. It should be possible now that we have full text measuring too.

[timunie]

@robloo my concerns are:

• what do we do with density styles?
• what do we do with overridden height? center text anyway?

[robloo]

@timunie I think the first step is narrowing down exactly which controls have the issue. I think ComboBox can be fixed with center vertical alimentment in a general way. TextBox and TextBlock need something more complex or at least different like a margin resource.

what do we do with density styles?

TextDensity would have to just redefine the lightweight styling resource that controls the left/top text padding in certain controls.

what do we do with overridden height? center text anyway?

If a dev customizes a height they are then responsible to control alignment. So we ignore this case in text heavy controls as always.

---

There are three solutions and each control may need a different one.

1. Just vertical align to center i.e. ComboBox
2. add a lightweight styling resource for text left/top margin to make text appear center when actually top aligned. This resource could also be special and defaults calculated and injected in the resource dictionary at startup.
3. Another crazy idea is to add a new property for TextMargin and that can be automatically calculated per control and then used or ignored in templates.

Keep in mind if this is really all driven just due to different fonts we inherit the issue from WinUI. They didn't need to solve it and just hard-coded padding and margins for the windows font. So something new is needed for sure.

That said, I'm still not 100% convinced there isn't something else going on as in WPF this kind of stuff just seems to work.

[robloo]

I thought of another solitution here too. Have a special converter that calculates a thickness to be used as left/top margin based on given font pproperties. The control itself could be passed as a parameter to get the attached font properties and then run the calculations. Not sure how ugly this would look in practice but it should be possible.

[chylex]

@chylex looks like it can be solved by adding VerticalContentAlignment="Center" into a style: https://github.com/AvaloniaUI/Avalonia/blob/97f2d8e74e0a64f98f855a5dc92ac30d03440d7f/src/Avalonia.Themes.Fluent/Controls/TextBox.xaml#L167C73-L167C97

Can you double-check it on your end?

@timunie These textboxes already have VerticalContentAlignment set to Center. None of the other values work either, they make the text even more off-center than it already is.