Child Span does not inherit TextColor or FontAttributes from parent Label

[BlueRaja]

Description

In Xamarin, child <Span> would inherit font properties from the parent <Label>. In Maui, the child inconsistently inherits TextDecorations, but not FontColor or FontAttributes (not sure about other attributes).

Steps to Reproduce

<Label TextColor="Blue" TextDecorations="Underline" FontAttributes="Bold" BackgroundColor="Gray">
  <Label.FormattedText>
    <FormattedString>
      <Span Text="Blue" />
      <Span Text="Green"
            TextColor="Green"
            TextDecorations="None"
            FontAttributes="None"/>
    </FormattedString>
  </Label.FormattedText>
</Label>

Expected output:
Text that is blue, bold, and underlined; then text that is green and none of those things

Actual output:

Link to public reproduction project repository

No response

Version with bug

8.0.3 GA

Is this a regression from previous behavior?

Yes, this used to work in Xamarin.Forms

Last version that worked well

Unknown/Other

Affected platforms

Android, I was not able test on other platforms

Affected platform versions

No response

Did you find any workaround?

Copy+paste all label attributes to all of its child spans

Relevant log output

No response

[pjcollins]

For projects that were created from the net8.0 project template, there is a new <Style TargetType="Span"> style that sets a default TextColor for all Span elements. If you remove this entry from Resources/Styles/Styles.xaml then Span.TextColor should inherit from the parent Label.TextColor as you are expecting on both Android and iOS.

There are some behavior differences with TextDecorations on iOS that I am looking at, it looks like we have at least one case where we could improve style inheritance consistency with Android there. I can also see a case where we may want to inherit font attributes if none are set on both platforms and will see about getting a PR up with these changes.

[jaosnz-rep]

Can repro on 17.10 Preview 2.0 with .net8.0 Windows/Android platform, and the solution provided by pjcollins can be solved.

[hansmbakker]

@pjcollins that looks good - is there a low-key way we can try this solution from your PR e.g. using a handler or would we need to build MAUI ourselves for that?

[pjcollins]

I still need to get a test added to the PR, but if you wanted to quickly test the PR build on a machine with a recent .NET 8 MAUI install I think you could do the following:

1. Download and unzip the nuget artifact from https://dev.azure.com/xamarin/public/_build/results?buildId=111019&view=artifacts&pathAsName=false&type=publishedArtifacts
2. Add a nuget.config file to your test project with contents along the lines of:

   <?xml version="1.0" encoding="utf-8"?>
   <configuration>
     <packageSources>
       <add key="local" value="/Users/peter/Downloads/nuget" />
       <add key="nuget" value="https://api.nuget.org/v3/index.json" />
     </packageSources>
   </configuration>

3. Build a .NET 8 project overriding MauiVersion to point to the PR build packages (and run on a connected Android device) with:

   dotnet build -v:n mauprtest.csproj -p:MauiVersion=8.0.20-ci.net8.27026 -t:Run -f net8.0-android

[hansmbakker]

@pjcollins I tried it, but it does not seem to fix the FontFamily inheritance issue I had

Issue

In this image you see several attempts where the FontFamily setter value of the Heading style class is not properly inherited in the spans. The font family should be PoppinsSemiBold - you can see that the cases using spans are not bold:

Test cases (corresponding to the labels in the Code section)

1. converts a string containing sections marked with * to a FormattedString with Spans - the ConverterParameter sets the TextColor of marked Spans
2. manual creation of FormattedString containing multiple Spans
3. string is converted to FormattedString containing one Span using implicit operator of FormattedString
4. only a Label with Text (not FormattedText) gets the correct FontFamily

Actual behavior

Only the Label not using Spans will have the the correct FontFamily

Expected behavior

Spans not having FontFamily set, inherit the FontFamily from the parent Label.

Code

Typography.xaml

<Style Class="Heading" TargetType="Label">
    <Setter Property="FontFamily" Value="PoppinsSemiBold" />
</Style>
<!-- .... -->
<Style Class="Heading04" TargetType="Label">
    <Setter Property="FontSize" Value="{x:Static local:Typography.Heading04MobileFontsize}" />
    <Setter Property="LineHeight" Value="{x:Static local:Typography.Heading04MobileLineheight}" />
    <Setter Property="CharacterSpacing" Value="{x:Static local:Typography.Heading04MobileLetterspacing}" />
    <Setter Property="SemanticProperties.HeadingLevel" Value="Level4" />
</Style>

Page.xaml

<VerticalStackLayout Spacing="{x:Static styles:Spacing.Xsm}">
    <Label FormattedText="{Binding Source={x:Static strings:Strings.HeadingPermanentWorkers}, Converter={StaticResource markStringWithColorSpanConverter}, ConverterParameter={x:Static styles:ColorTokens.StaticTextOnBgBrandWeak}}"
           StyleClass="Heading, Heading04" />

    <Label StyleClass="Heading, Heading04">
        <Label.FormattedText>
            <FormattedString>
                <Span TextColor="{x:Static styles:ColorTokens.StaticTextOnBgBrandWeak}">Permanent</Span>
                <Span> workers</Span>
            </FormattedString>
        </Label.FormattedText>
    </Label>

    <Label FormattedText="{x:Static strings:Strings.HeadingPermanentWorkers}" StyleClass="Heading, Heading04" />

    <Label Text="{x:Static strings:Strings.HeadingPermanentWorkers}"
           StyleClass="Heading, Heading04" />
</VerticalStackLayout>

[pjcollins]

@hansmbakker I see, this scenario was not outlined in the original issue description. I'll try to take a look at it in the context of this fix, but we may want to file a separate issue to track it eventually.

[hansmbakker]

Ah, clear. In general I would see Spans as children of a Label, so as a user I would expect all properties mentioned in Use formatted text to be inherited.

FontFamily is just one of them, but I would say it would make sense to also check the other ones.

[pjcollins]

@hansmbakker by my understanding the issue you've described above isn't necessary specific to FontFamily but could affect any property declared in a Style. Unfortunately, Style inheritance is a bit more complicated and as I understand is only supported for types that derive from the TargetType of the style. As Span is not a Label, Spans belonging to a Label will not have the same style applied to them. I think it may be worth filing a separate issue for this where we can continue discussion/investigation.

[hansmbakker]

@pjcollins I stumbled upon this issue because for our app it was the FontFamily property we hoped to have inheritance for.

However, in my opinion it would make sense for a Span to be consistent with the text look&feel of the parent Label by default, unless specified explicitly.

any property declared in a Style

No, I meant only the (text-related) properties in the documentation section Use formatted text:

• BackgroundColor, of type Color, which represents the color of the span background.
• CharacterSpacing, of type double, sets the spacing between characters in the displayed text.
• FontAttributes, of type FontAttributes, determines text style.
• FontAutoScalingEnabled, of type bool, defines whether the text will reflect scaling preferences set in the operating system. The default value of this property is true.
• FontFamily, of type string, defines the font family.
• FontSize, of type double, defines the font size.
• LineHeight, of type double, specifies the multiplier to apply to the default line height when displaying text.
• TextColor, of type Color, defines the color of the displayed text.
• TextDecorations, of type TextDecorations, specifies the text decorations (underline and strikethrough) that can be applied.
• TextTransform, of type TextTransform, specifies the casing of the displayed text.

Please note that I did not include the properties Style and Text in this list - they do not make sense to inherit.

Other properties from Label like WidthRequest would also not make sense to inherit.

[pjcollins]

With the latest changes in #21191, if FontFamily is set on a Label element directly, it should be inherited by any Spans that belong to that label. However, if FontFamily is declared in a Style that is applied to a Label, it will not be applied to child Span elements. The latter is the scenario that would potentially require additional follow up in a new/separate issue.