Label HtmlText should support sub and sup

[fbhp]

Description

It would be really nice if XAML labels supported the HTML tags sub and sup. This is essential in technical apps in particular.

Public API Changes

Intended Use-Case

I am creating an app for complex calculations for a customer and the known names almost always have subscripts.

[michiel-nwa]

I'm looking for something similar. For me personally also having it as part of the FormattedText Span implementation would be preferable, but having it as part of HtmlText would be workable.
My use case is scientific publications. They use sub/sup a lot.

[stephenquan]

Whilst this enhancement proposal/request is easily understood, enhancing Label would almost definitely require a non trivial change. If you read the Label documentation https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/label?view=net-maui-8.0 it describes the HTML limitations and it offers alternatives:

Important

Displaying HTML in a Label is limited to the HTML tags that are supported by the underlying platform. For example, Android supports only a subset of HTML tags, focusing on basic styling and formatting for block level elements such as <span> and <p>. For more complex HTML rendering, consider using a WebView or FormattedText.

Here's a WebView example:

<WebView HeightRequest="50">
    <WebView.Source>
        <HtmlWebViewSource Html="&lt;sup&gt;1&lt;/sup&gt;Almost every developer's favorite molecule is C&lt;sub&gt;8&lt;/sub&gt;H&lt;sub&gt;10&lt;/sub&gt;N&lt;sub&gt;4&lt;/sub&gt;O&lt;sub&gt;2&lt;/sub&gt;, also known as &quot;caffeine.&quot;" />
    </WebView.Source>
</WebView>

Here's a Label with FormattedText (no control over VerticalOptions of each Span):

<Label>
    <Label.FormattedText>
        <FormattedString>
            <Span FontSize="12">1</Span>
            <Span>Almost every developer's favorite molecule is C</Span>
            <Span FontSize="12">8</Span>
            <Span>H</Span>
            <Span FontSize="12">10</Span>
            <Span>N</Span>
            <Span FontSize="12">4</Span>
            <Span>O</Span>
            <Span FontSize="12">2</Span>
            <Span>, also known as "caffeine."</Span>
        </FormattedString>
    </Label.FormattedText>
</Label>

Here's an example of FlexLayout with multiple Label elements.

<FlexLayout>
    <FlexLayout.Resources>
        <ResourceDictionary>
            <Style TargetType="Label">
                <Setter Property="FontSize" Value="12" />
            </Style>
            <Style x:Key="sub" TargetType="Label">
                <Setter Property="FontSize" Value="10" />
                <Setter Property="VerticalOptions" Value="End" />
                <Setter Property="TranslationY" Value="4" />
            </Style>
            <Style x:Key="sup" TargetType="Label">
                <Setter Property="FontSize" Value="10" />
                <Setter Property="VerticalOptions" Value="Start" />
                <Setter Property="TranslationY" Value="-4" />
            </Style>
        </ResourceDictionary>
    </FlexLayout.Resources>
    <Label Style="{StaticResource sup}" Text="1" />
    <Label Text="Almost every developer's favorite molecule is C" />
    <Label Style="{StaticResource sub}" Text="8" />
    <Label Text="H" />
    <Label Style="{StaticResource sub}" Text="10" />
    <Label Text="N" />
    <Label Style="{StaticResource sub}" Text="4" />
    <Label Text="O" />
    <Label Style="{StaticResource sub}" Text="2" />
    <Label Text=", also known as &quot;caffeine.&quot;" />
</FlexLayout>

[michiel-nwa]

For my own purpose it would be nice if the FormattedText Span could have a BaseLineOffset or a property to set sub/super. Your example for FormattedText doesn't really match the intended rendering and also doesn't work for super. (I'm trying to render very simple HTML by parsing it with HtmlAgilityPack and then using the least amount of components possible, without resorting to a WebView, as it adds a very noticeable rendering delay to the screen)

iOS seems to have a baselineOffset for attributed strings. Android only seem to have a SuperscriptSpan and SubscriptSpan, but I might be missing something there.

The FlexLayout suggestion might help to work around it for now. (edit: would require extra work to deal with line wrapping)

[stephenquan]

Unicode has blocks for superscripts and subscripts.
See https://en.wikipedia.org/wiki/Unicode_subscripts_and_superscripts
With it, you can represent the following:

¹Almost every developer's favorite molecule is C₈H₁₀N₄O₂ also known as "caffeine."

with a single Label component:

<Label Text="¹Almost every developer's favorite molecule is C₈H₁₀N₄O₂ also known as &quot;caffeine.&quot;" />

To get an idea of how you may generalize this for maths, is you can write Sup and Sub functions like the following:
It is possible to write functions to

public static char Sup(char ch) => ch switch
{
    '0' => '⁰',
    '1' => '¹',
    '2' => '²',
    '3' => '³',
    '4' => '⁴',
    '5' => '⁵',
    '6' => '⁶',
    '7' => '⁷',
    '8' => '⁸',
    '9' => '⁹',
    _ => ch
};

public static char Sub(char ch) => ch switch
{
    '0' => '₀',
    '1' => '₁',
    '2' => '₂',
    '3' => '₃',
    '4' => '₄',
    '5' => '₅',
    '6' => '₆',
    '7' => '₇',
    '8' => '₈',
    '9' => '₉',
    _ => ch
};

While every digit is covered, as shown above, when it comes to the alphabet there were intentional gaps in the Unicode blocks meaning that you're not guaranteed that every character in the alphabet has a superscript or subscript. Therefore, this strategy may or may not work for you.

[Added/Remove/Added again]

The other idea I had was 3 fonts. One which is the normal font. Another is a font containing the alphanumerics positioned in a superscript way. And lastly a set of alphanumerics position in a subscript way.

[michiel-nwa]

Yep, that was my first idea as well, but we allow user input, so can't have gaps. (Although for now it might provide at least enough coverage for 90% of use cases we have)

I do think your Font idea is interesting, but no idea yet how easy/hard it is to generate a scaled/translated font.

[stephenquan]

If you have screenshots of some sample text, I can get an idea of the text you need and I can mock up a project with font SVGs of the characters and their corresponding fonts.