Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Span LineHeight Wrong on Android #19592

Closed
bradencohen opened this issue Dec 26, 2023 · 3 comments · Fixed by #20352
Closed

Span LineHeight Wrong on Android #19592

bradencohen opened this issue Dec 26, 2023 · 3 comments · Fixed by #20352
Labels
area-controls-label Label, Span fixed-in-8.0.20 fixed-in-8.0.40 platform/android 🤖 s/triaged Issue has been reviewed s/verified Verified / Reproducible Issue ready for Engineering Triage t/bug Something isn't working
Milestone

Comments

@bradencohen
Copy link
Contributor

Description

When using a generic Label with a Span, the LineHeight seems to be exponentially applied or something on Android.

I understand that there are platform differences, but this behavior simply doesn't work and isn't usable. Is there something I'm misunderstanding or missing?

<?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="MauiApp1.MainPage">
    <Grid x:Name="contentGrid">
        <Label LineBreakMode="WordWrap">
            <Label.FormattedText>
                <FormattedString>
                    <Span LineHeight="1.15">Outside, the church's garden was a haven of tranquility, where nature and spirituality intertwined harmoniously. Flowers bloomed in vibrant hues, each petal seemingly capturing a prayer or hope of the visitors who walked among them. The garden, lovingly tended by members of the congregation, reflected the church's commitment to nurturing not just the soul, but also the beauty of the world around it. It was a place where people of all walks of life could find solace, inspiration, and a sense of belonging within the embrace of the church's community.</Span>
                </FormattedString>
            </Label.FormattedText>
        </Label>
    </Grid>
</ContentPage>

image

When the LineHeight is removed:
image

Xamarin

In Xamarin, this works as intended:
image

Steps to Reproduce

  1. Pull the reproduction project
  2. Run and see

Or

  1. Paste the following XAML into a new MAUI project:
<?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="MauiApp1.MainPage">
    <Grid x:Name="contentGrid">
        <Label LineBreakMode="WordWrap">
            <Label.FormattedText>
                <FormattedString>
                    <Span LineHeight="1.15">Outside, the church's garden was a haven of tranquility, where nature and spirituality intertwined harmoniously. Flowers bloomed in vibrant hues, each petal seemingly capturing a prayer or hope of the visitors who walked among them. The garden, lovingly tended by members of the congregation, reflected the church's commitment to nurturing not just the soul, but also the beauty of the world around it. It was a place where people of all walks of life could find solace, inspiration, and a sense of belonging within the embrace of the church's community.</Span>
                </FormattedString>
            </Label.FormattedText>
        </Label>
    </Grid>
</ContentPage>

Link to public reproduction project repository

https://github.com/bradencohen/MauiRepros

Version with bug

8.0.3

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

Unknown/Other

Affected platforms

Android

Affected platform versions

No response

Did you find any workaround?

Nope, but any ideas would be super appreciated.

Relevant log output

No response

@bradencohen bradencohen added the t/bug Something isn't working label Dec 26, 2023
@bradencohen
Copy link
Contributor Author

bradencohen commented Dec 26, 2023

This only seems to apply to Android 33+

The ChooseHeight method seems to be getting called with a different "Top" value, which doesn't happen on Android 31.

image

@bradencohen
Copy link
Contributor Author

Pretty ugly workaround to remove the LineHeight from the Span and put it on the outer Label:

private static void ConfigureLabelSpanLineHeightFix()
{
    //
    // This is a fix for labels that have spans with a LineHeight > 0.
    // This tracks issue: https://github.com/dotnet/maui/issues/19592
    //
    Microsoft.Maui.Handlers.LabelHandler.Mapper.AppendToMapping( "FixFirstLevelSpans", ( handler, label ) =>
    {
        if ( label is Label rockLabel )
        {
            var spansWithLineHeight = rockLabel.FormattedText?.Spans?.Where( s => s.LineHeight > 0 );
            var lineHeightBacking = 1d;

            if ( spansWithLineHeight == null )
            {
                return;
            }

            foreach ( var span in spansWithLineHeight )
            {
                if ( span.LineHeight > lineHeightBacking )
                {
                    lineHeightBacking = span.LineHeight;
                }

                span.LineHeight = 1;
            }

            rockLabel.LineHeight = lineHeightBacking;
        }
    } );
}

@Eilon Eilon added legacy-area-controls Label, Button, CheckBox, Slider, Stepper, Switch, Picker, Entry, Editor area-controls-label Label, Span labels Dec 29, 2023
@XamlTest XamlTest added s/verified Verified / Reproducible Issue ready for Engineering Triage s/triaged Issue has been reviewed labels Jan 23, 2024
@XamlTest
Copy link
Collaborator

Verified this on Visual Studio Enterprise 17.9.0 Preview 3(8.0.3 and 7.0.101). Repro on Android 14.0-API34, not repro on Windows 11, iOS 17.0 and MacCatalyst with below Project:
MauiRepros.zip

kubaflo added a commit to kubaflo/maui that referenced this issue Feb 4, 2024
kubaflo added a commit to kubaflo/maui that referenced this issue Feb 4, 2024
kubaflo added a commit to kubaflo/maui that referenced this issue Feb 5, 2024
kubaflo added a commit to kubaflo/maui that referenced this issue Feb 5, 2024
@PureWeen PureWeen added this to the .NET 8 SR4 milestone Mar 19, 2024
github-actions bot pushed a commit to kubaflo/maui that referenced this issue Mar 19, 2024
github-actions bot pushed a commit to kubaflo/maui that referenced this issue Mar 19, 2024
github-actions bot pushed a commit to kubaflo/maui that referenced this issue Mar 19, 2024
github-actions bot pushed a commit to kubaflo/maui that referenced this issue Mar 19, 2024
PureWeen pushed a commit that referenced this issue Apr 1, 2024
* [Android] Fixed Wrong Span LineHeight (#19592)

* Added a UI Test (#19592)

* Added a null checking (#19592)

* Updated the UiTest (#19592)

* Added snapshot

* Added Java native code

* Improve Java code

* call `context.getResources().getDisplayMetrics()` once
* build `maui.aar`

---------

Co-authored-by: Javier Suárez <javiersuarezruiz@hotmail.com>
Co-authored-by: Jonathan Peppers <jonathan.peppers@microsoft.com>
@github-actions github-actions bot locked and limited conversation to collaborators May 2, 2024
@Eilon Eilon removed the legacy-area-controls Label, Button, CheckBox, Slider, Stepper, Switch, Picker, Entry, Editor label May 10, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
area-controls-label Label, Span fixed-in-8.0.20 fixed-in-8.0.40 platform/android 🤖 s/triaged Issue has been reviewed s/verified Verified / Reproducible Issue ready for Engineering Triage t/bug Something isn't working
Projects
Status: Done
Development

Successfully merging a pull request may close this issue.

5 participants