Text aligned to top instead of center when changing LineHeight on TextBlock.

[Al12rs]

Describe the bug

When changing the LineHeight or Height properties of a TextBlock, the text stays at a fixed distance from the top of the control, rather than being centered.

This causes both vertical text alignment problems as well as text clipping problems at lower line heights.

To Reproduce

Steps to reproduce the behavior:

Code sample:

<ResourceDictionary xmlns="https://github.com/avaloniaui"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Design.PreviewWith>
        <Border Padding="20">
            <StackPanel Spacing="10">
                <Border BorderThickness="1" BorderBrush="White" Padding="0" Margin="10">
                    <TextBlock Theme="{StaticResource WithLineHeightExample}"
                               Text="The quick brown fox jumps over the lazy dog (LH=50)" />
                </Border>
                <Border BorderThickness="1" BorderBrush="White" Padding="0" Margin="10">
                    <TextBlock Theme="{StaticResource WithoutLineHeightExample}"
                               Text="The quick brown fox jumps over the lazy dog (LH=NaN)" />
                </Border>
                <Border BorderThickness="1" BorderBrush="White" Padding="0" Margin="10">
                    <TextBlock Theme="{StaticResource WithNegativeLineHeightExample}"
                               Text="The quick brown fox jumps over the lazy dog (LN=18)" />
                </Border>
            </StackPanel>
        </Border>
    </Design.PreviewWith>

    <ControlTheme x:Key="WithLineHeightExample" TargetType="TextBlock" >
        <Setter Property="FontWeight" Value="SemiBold" />
        <Setter Property="FontSize" Value="18" />
        <Setter Property="LineHeight" Value="50" />
    </ControlTheme>

    <ControlTheme x:Key="WithoutLineHeightExample" TargetType="TextBlock">
        <Setter Property="FontWeight" Value="SemiBold" />
        <Setter Property="FontSize" Value="18" />
        <Setter Property="LineHeight" Value="NaN" />
    </ControlTheme>

    <ControlTheme x:Key="WithNegativeLineHeightExample" TargetType="TextBlock">
        <Setter Property="FontWeight" Value="SemiBold" />
        <Setter Property="FontSize" Value="18" />
        <Setter Property="Height" Value="18"/>
    </ControlTheme>
</ResourceDictionary>

Expected Behaviour

The text should be placed in the center of the available height, not at a fixed distance from the top.
This is to avoid alignment issues as well as potential clipping issues at lower LineHeight values (e.g. 120%)

This is how the line-height behaves for normal CSS, and how I would expect Avalonia to work as well:

Environment

• OS: Windows
• Avalonia-Version: 11.0.5

[halgari]

What can I do to help with this ticket? It's a pretty glaring issue in our application and I'd rather not do some sort of hack (like manual offsets of the text)

[timunie]

You can reach out to the team in case you have a support agreement.

[Gillibald]

LineHeight should be distributed evenly now. Are you sure this is still an issue?

[halgari]

@Gillibald When was this fixed? I don't see a PR attached to this ticket and I wasn't able to find anything in the changelog about it. We're using the latest version of Avalonia and haven't seen any change to the line height

[halgari]

This is still broken on 11.1.0-beta and 11.0.10

[Al12rs]

Thanks for the fix! Really appreciate it!