Span text-decoration is incorrect whereas the Label behaves properly

egvijayanand commented 2 months ago

Description

Span text-decoration is incorrect whereas the Label behaves properly.

Have created a Label with and without FormattedText.

And applied similar text decorations on both of them.

The Label styled the text and its underlining using the color defined whereas the underlying Span of the FormattedText didn't adapt the color defined for underlining.

Steps to Reproduce

Create a new .NET MAUI App
Replace the MainPage content with the below snippet
Build and run the app to see the difference in text formatting

<StackLayout
    HorizontalOptions="Center"
    VerticalOptions="Center">
    <Label
        Text="hyperlink"
        TextColor="Blue"
        TextDecorations="Underline" />
    <Label>
        <Label.FormattedText>
            <FormattedString>
                <Span
                    Text="hyperlink"
                    TextColor="Blue"
                    TextDecorations="Underline" />
            </FormattedString>
        </Label.FormattedText>
    </Label>
</StackLayout>

Link to public reproduction project repository

Plain control definition, default template is sufficient

Version with bug

8.0.61 SR6.1

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

Unknown/Other

Affected platforms

Windows, I was not able test on other platforms

Affected platform versions

Windows SDK 10.0.19041

Did you find any workaround?

None.

Relevant log output

No response

github-actions[bot] commented 2 months ago

Hi I'm an AI powered bot that finds similar issues based off the issue title.

Please view the issues below to see if they solve your problem, and if the issue describes your problem please consider closing this one and thumbs upping the other issue to help us prioritize it. Thank you!

Open similar issues:

Child Span does not inherit TextColor or FontAttributes from parent Label (#21034), similarity score: 0.82
Span does not inherit text styling from Label if that styling is applied using Style (#21326), similarity score: 0.78
[regression/8.0.3] Setting a style on a label causes spans with FontAttributes to be ignored on Android (#19190), similarity score: 0.77

Closed similar issues:

Label FormattedString Span on Windows Bleeds Color Between Span Tag Text (#21789), similarity score: 0.80
FormattedText: Span BackgroundColor does not work (#4788), similarity score: 0.78

Note: You can give me feedback by thumbs upping or thumbs downing this comment.

ninachen03 commented 1 month ago

This issue has been verified using Visual Studio 17.11.0 Preview 2.1(8.0.61 &8.0.80-ci.net8.24357.1&8.0.40). Can repro it.

kiddailey commented 1 month ago

I ran into this issue today and I think it isn't related to XAML, but rather programmatic creation of Labels with FormattedStrings. In my tests, TextDecorations with XAML created Lables with FormattedStrings work fine, but when swapped with matching code-based Labels, they don't display at all.

It turns out, TextDecorations are displayed with the TextColor context of the Label and NOT the color assigned to each Span in a FormattedString. When definining labels via XAML, the Label's TextColor appears to default to a valid value. When creating Labels by code however, the TextColor is null unless specified.

For example, given the following FormattedString:

var formatted = new FormattedString();

formatted.Spans.Add(
    new Span()
    {
        Text = "Underline",
        TextDecorations = TextDecorations.Underline,
        TextColor = Color.FromArgb("#ff000000")
    }
);

formatted.Spans.Add(
    new Span() { 
        Text = "StrikeThrough", 
        TextDecorations = TextDecorations.Strikethrough, 
        TextColor = Color.FromArgb("#ff000000") }
 );

This Label will NOT display the TextDecorations:

var label = new Label
{
    FormattedText = formatted
};

This Label on the other hand WILL display the TextDecorations. However, they will be in the color Red rather than the color defined on the Span.

var label = new Label
{
    FormattedText = formatted,
    TextColor = Color.FromArgb("#ff000000")
};

This also means that in a multi-colored FormattedString situation, your strikethrough can only ever be a single color -- although you could create multiple Labels to work around the issue.

Unless there's a valid reason not to, I think the fix is to use the same TextColor on the Span for the TextDecorations associated with the Span. Hope this is helpful!

egvijayanand commented 1 month ago

@kiddailey, how would you represent a hyperlink within a text? It should be of a different color and the formatting should be uniform, which means the underline should also use the same color. And the XAML is to simulate the issue.

If multiple labels can be the solution, then Span is unnecessary.

kiddailey commented 1 month ago

Apologies, I was just giving that as a crazy example :)

Perhaps this is a better example: If you have a strikethrough and a hyperlink in the same FormattedString label generated by code, the strikethrough line color and the hyperlink underline will be the same color.

In other words, if your links are blue but you want strikethrough to be red, your links will be blue text with red underlines. Or, you'll have to settle for blue strikethroughs.

dotnet / maui