Label LineHeight not working and multiline issues

[EPS-Lac]

Description

There are three issues I currently have with labels:

1. LineHeight has no effect. I can set either 12 or 30, it still looks the same.
2. When using multiline in a label, either by using newline unicode character or by adding the Text inside <Label.Text> ... </Label.Text>, the spacing acts strange. I noticed that this only happens when it's inside a StackLayout (inside a ScrollView) inside a StackLayout.
3. The FontWeight doesn't yet work, although I'm not sure if that's already supposed to work or still a feature to come.

I've only tested on Android (SDK 26).

Steps to Reproduce

1. Create a new .NET MAUI App using the VS2022 template
2. Replace the content of the MainPage.xaml with the following code
3. Run the app

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="LabelIssues.MainPage">
    <StackLayout>
        <Label
            Padding="20"
            Text="My Header"
            FontSize="36"
            BackgroundColor="Yellow"
            />
        <StackLayout
            Padding="20">

            <Label
                FontSize="16"
                LineHeight="18">
                <Label.Text>
                    Some multiline
                    Text with
                    3 lines
                </Label.Text>
            </Label>

            <Label
                Text="Some Text 1"
                FontSize="16"
                LineHeight="30"/>
            <Label
                Text="Some Text 2"
                FontSize="16"
                LineHeight="30"/>
            <Label
                Text="Some Text 3"
                FontSize="16"
                LineHeight="18"/>
            <Label
                Text="Some Text 4"
                FontSize="16"
                LineHeight="18"/>
            <Label
                Text="Some Text 5"
                FontSize="16"
                LineHeight="16"/>
            <Label
                Text="Some Text 6"
                FontSize="16"
                LineHeight="16"/>

        </StackLayout>
    </StackLayout>
</ContentPage>

Version with bug

6.0 Release Candidate 3

Last version that worked well

Unknown/Other

Affected platforms

Android, I was not able test on other platforms

Affected platform versions

Android SDK 26

Did you find any workaround?

For the multiline issue I used separate Labels for each line (for now).

Relevant log output

No response

[VincentBu]

repro with vs main build 32530.96.main

[jsuarezruiz]

Testing using the latest changes in net6.0 branch cannot reproduce the issue:

Could you try again with the latest version?. Thanks.

[ghost]

Hi @EPS-Lac. We have added the "s/needs-info" label to this issue, which indicates that we have an open question for you before we can take further action. This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[EPS-Lac]

@jsuarezruiz I've tested it with the latest version. From a first, quick look, some worked, most didn't.
I still have a some places where the layout breaks when setting a LineHeight.
I will take another look next week to see if I can further specify what the problem is.

[maiia-kuzmishyna]

Hi @EPS-Lac, you mentioned FontWeight property in your 3rd point, have you found out anything regarding when it is going to be supported if at all?
Currently it doesn't seem like there is a way to set a custom FontWeight for Label, but I might be mistaken.

[EPS-Lac]

Hey @maiia-kuzmishyna,
Sorry, I don't have any updates on this. But to be honest, I completely forgot to check, since I just commented out all FontWeight properties and simply used regular or bold.

[jinxinjuan]

Verified repro on Windows 10 with 17.6.0 Preview 6.0. Repro project.MauiApp1.zip

[widavies]

I can confirm that this behavior is still present on c096b3a for Android. However, I'm not entirely sure that it's actually a bug with MAUI.

To reproduce the issue, modify src/Controls/samples/Controls.Sample/Pages/MainPage.xaml:

<Label
     Text=".NET MAUI"
+    Padding="0"
+    BackgroundColor="Red"
     Style="{StaticResource TitleStyle}">

You can see that there is vertical padding above and below the ".NET MAUI" text even though Padding="0":

Changing LineHeight doesn't have any effect.

Explanation

A MAUI label maps internally (on Android) to a TextView. If you take a look at the internal call from the Label to the Android TextView, the line height is set with textView.SetLineSpacing().

Taking a look at the Android documentation for setLineSpacing:

The first argument "add":

add - float: The value in pixels that should be added to each line other than the last line. This will be applied after the multiplier

The second argument "mult":

mult - float: The value by which each line height other than the last line will be multiplied by

In other words, when the text is only a single line, LineHeight will have no effect.

The other thought I had is to call setIncludeFontPadding(false), however, this only seems to affect ascenders and descenders (for example, a g is a descender). It seem so me that some fonts just include some extra padding on top.

Reading around, it seems like getting absolutely zero padding on a TextView in Android isn't easy. Many folks end up just using negative margin:

• https://stackoverflow.com/a/42127172/4779937
• https://stackoverflow.com/a/7524852/4779937
• https://stackoverflow.com/a/52418909/4779937
• https://stackoverflow.com/a/27692414/4779937

@jsuarezruiz We may be able to resolve this by adding some documentation for LineHeight only applying to multi-line text. We could potentially improve results by using TextViewCompat.SetLineHeight(), but the official solution here may be to just recommend using a font with no built-in padding in scenarios where you need absolutely flush boundaries on Labels.

[hansmbakker]

Hi,
I don't know if this is still an issue for you but I see you used quite large values for the LineHeight like here:

<Label FontSize="16"
            LineHeight="18">
            <Label.Text>
               Some multiline
               Text with
               3 lines
           </Label.Text>
</Label>

It looks like you assumed the LineHeight is an absolute value like the FontSize is. I intuitively did the same, but this is wrong - it is a multiplier to apply to the default line height when displaying text.

The documentation is unclear what the mentioned default line height is supposed to be 🤦🏼‍♂️

Please see #17741 for details on that. What you can do (as a poor-mans workaround) is:

• set the FontSize to the required value
• add a LineHeight starting with a value of 1
• use the XAML Live Preview and fiddle with the LineHeight until your label has the expected height for the amount of lines

[EPS-Lac]

Hi, I don't know if this is still an issue for you but I see you used quite large values for the LineHeight like here:

<Label FontSize="16"
            LineHeight="18">
            <Label.Text>
               Some multiline
               Text with
               3 lines
           </Label.Text>
</Label>

It looks like you assumed the LineHeight is an absolute value like the FontSize is. I intuitively did the same, but this is wrong - it is a multiplier to apply to the default line height when displaying text.

The documentation is unclear what the mentioned default line height is supposed to be 🤦🏼‍♂️

Please see #17741 for details on that. What you can do (as a poor-mans workaround) is:

* set the `FontSize` to the required value

* add a `LineHeight` starting with a value of `1`

* use the XAML Live Preview and fiddle with the `LineHeight` until your label has the expected height for the amount of lines

In that specific project I solved it using other ways like margins, etc.
But still thanks for the reply, since I definitely misunderstood it.
As you assumed, I DID think it was an absolute value.
So this will help me in the future for sure!

[dotnet-policy-service]

Hi @EPS-Lac. We have added the "s/try-latest-version" label to this issue, which indicates that we'd like you to try and reproduce this issue on the latest available public version. This can happen because we think that this issue was fixed in a version that has just been released, or the information provided by you indicates that you might be working with an older version.

You can install the latest version by installing the latest Visual Studio (Preview) with the .NET MAUI workload installed. If the issue still persists, please let us know with any additional details and ideally a reproduction project provided through a GitHub repository.

This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[hansmbakker]

This is still an issue - the scarcely-documented behavior of LineHeight being a scaling factor to an unknown base value has not changed and there is no updated documentation to this.

The only documentation items available are

• https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/label?view=net-maui-8.0#set-line-height
• the API property documentation at https://learn.microsoft.com/en-us/dotnet/api/microsoft.maui.controls.label.lineheight?view=net-maui-8.0#microsoft-maui-controls-label-lineheight.

When reading these items, as a developer you will only understand that you can set it to some value and that it will change the line height of a label. However, it does not answer the question what value is needed to obtain a desired visual result (according to a design).

As a result, for developers it is unclear how to consistently use this property to build apps that follow a typography design where a font size and line height are given.

@jsuarezruiz Can you please reopen this issue and add it to the backlog again?

Please also see #17741.