Label with TextType="Html" looks completely different on iOS and Android

[rogersm-uwosh]

Description

I have some html (which I am reading in from Resources/Raw):

<h1>About this App</h1>

<p>This app is designed to let pilots record what airports they have visited (currently, only for the state of Wisconsin). It has the following tabs:</p>

<ul>
<li>Airports - a list of currently visited airports. Click on the pencil to edit, the trashcan to delete, and the + in the toolbar to record visiting a new airport</li>
<li>Map - a map depicting all WI airports, visited WI airports, and unvisited Wi airports</li>
<li>Utilities - self explanatory</li>
<li>Resources - a list of useful airport resources</li>
</ul>

<p>
This app was created as part of a software engineering class. A total of 7 teams worked on different aspects of the app, making pull requests that were then merged into the main branch. Special thanks go out to xxxx xxxx, who may or may not want their name to appear here, and we have no intention of violating FERPA! :-). This currently anonymous student helped add features, squash bugs and get this app into shape for publication.</p>

I am displaying it in a Label, part of this XAML:

<toolkit:Popup xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
    x:Class="Something.InformationPopup" Color="Transparent">
    <Frame x:Name="WholeShebang" CornerRadius="10" BackgroundColor="White">

            <Grid RowDefinitions="12*,*">
                <ScrollView Grid.Row="0" Grid.Column="0" VerticalScrollBarVisibility="Always">
                    <Label x:Name="InformationLBL" VerticalOptions="Start"  HorizontalOptions="Start" TextType="Html" />
                </ScrollView>
                <Button Grid.Row="1" Grid.Column="0" Text="OK" Clicked="OKButtonClicked" WidthRequest="200" />
            </Grid>
    </Frame>
</toolkit:Popup>

But as you can see, it looks completely different on iOS and Android. iOS seems to be ignoring the <h1>, and botching the CSS for the <ul>. There's also a problem with blank lines, iOS is picking them up, and Android is not. If I put <p></p> that has no effect, I have to put in <p>&nbsp;</p> to get a blank line, but then iOS gives me two.

I thought about using WebViews, but I've spent 2 hours on this and I never did understand the concept of "sunk costs" 😀 . [Also, sorry about the size of the images, that's just how they uploaded.]

Help

Steps to Reproduce

1. Make a popup (see code above)
2. Open it
3. Gaze in wonder at how it looks completely different on different platforms, using the exact same html

Link to public reproduction project repository

No response

Version with bug

7.0.101

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

Unknown/Other

Affected platforms

iOS, Android

Affected platform versions

iOS 17.2, Android 33

Did you find any workaround?

I could create 2 different html files, but that is such an ugly kludge and it's html, it ought to be rendered the same regardless of program.

Relevant log output

No response

[drasticactions]

In the documentation there's an important block

Important

Displaying HTML in a Label is limited to the HTML tags that are supported by the underlying platform.

So based on what your HTML tags and styles are, they will look different on different platforms. It depends on what they support. That's expected. It's taking the HTML and rendering it to a native control using the platforms HTML to Label code (As in, AFAIK, MAUI is not influencing the output rendered for the label. It's creating a native platform label and saying "Use HTML").

Although it would probably help if those docs listed what those distinctions are (@jsuarezruiz maybe you know, or know who would?)

In all honesty, it would probably be easier to use an actual webview instead. Then you would have full control to change it and it should render the expected output for every platform.

[ghost]

Hi @rogersm-uwosh. 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.

[rogersm-uwosh]

So, just to follow up, I switched to WebView and am still having problems. If I get the font-sizes just right in iOS, they are comically large in Android. The colors are respected, but the font-size is all wrong. If I can't get this to work, my fallback-fallback is to create 2 different .css files. Can anyone suggest something that has a lower kludge-factor?

Here's my CSS:

p {
    color: pink;
    font-size: 32px;
}

h1 {
    color: red;
    font-size: 64px;
}

ul {
    color: green;
    font-size: 32px;
}

and here's my HTML:

<!DOCTYPE html>

<head>
    <title>About this App</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <h1>About this App</h1>

    <p>This app is designed to let pilots record what airports they have visited (currently, only for the state of
        Wisconsin). It has the following tabs:</p>

    <ul>
        <li>Airports - a list of currently visited airports. Click on the pencil to edit, the trashcan to delete, and
            the + in the toolbar to record visiting a new airport</li>
        <li>Map - a map depicting all WI airports, visited WI airports, and unvisited Wi airports</li>
        <li>Utilities - self explanatory</li>
        <li>Resources - a list of useful airport resources</li>
    </ul>

    <p>
        This app was created as part of a software engineering class. A total of 7 teams worked on different aspects of
        the app, making pull requests that were then merged into the main branch. Special thanks go out to xxxx xxxx,
        who may or may not want their name to appear here, and we have no intention of violating FERPA! :-). This
        currently anonymous student helped add features, squash bugs and get this app into shape for publication.</p>
</body>

[drasticactions]

As far as I'm aware, this isn't a MAUI issue. That's the native webview for the platform and how it renders that CSS and HTML. You would have the same situation you built it straight in native Java or ObjC/Swift for Android and iOS respectively and used that HTML/CSS. Those are just the defaults they use. So, you would need to control the font sizes for the tags you care about. You can do that yourself in your css (Either building different CSS for different platforms or whatever) or pulling in another framework (Like Bootstrap) so handle styling for you.

But this isn't a specific "MAUI" thing with this control, that's just how WebViews work.

[ghost]

So, just to follow up, I switched to WebView and am still having problems. If I get the font-sizes just right in iOS, they are comically large in Android. The colors are respected, but the font-size is all wrong. If I can't get this to work, my fallback-fallback is to create 2 different .css files. Can anyone suggest something that has a lower kludge-factor?

Here's my CSS:

p {
    color: pink;
    font-size: 32px;
}

h1 {
    color: red;
    font-size: 64px;
}

ul {
    color: green;
    font-size: 32px;
}

and here's my HTML:

<!DOCTYPE html>

<head>
    <title>About this App</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <h1>About this App</h1>

    <p>This app is designed to let pilots record what airports they have visited (currently, only for the state of
        Wisconsin). It has the following tabs:</p>

    <ul>
        <li>Airports - a list of currently visited airports. Click on the pencil to edit, the trashcan to delete, and
            the + in the toolbar to record visiting a new airport</li>
        <li>Map - a map depicting all WI airports, visited WI airports, and unvisited Wi airports</li>
        <li>Utilities - self explanatory</li>
        <li>Resources - a list of useful airport resources</li>
    </ul>

    <p>
        This app was created as part of a software engineering class. A total of 7 teams worked on different aspects of
        the app, making pull requests that were then merged into the main branch. Special thanks go out to xxxx xxxx,
        who may or may not want their name to appear here, and we have no intention of violating FERPA! :-). This
        currently anonymous student helped add features, squash bugs and get this app into shape for publication.</p>
</body>

try setting smaller font sizes. 64 and 32 is quite big, usually used for huge headers. IOS might scale everything down, while android doesn't. Try setting it to something closer to 15-20 and check how it works

[gabsamples6]

I have an issue with webview too where the content just flicker in android and setting the height fixes it , however I cannot do something dynamic and use a webviewhandler to set the heightrequest=content as none of the events fire . Has anyone built a webviewHandler below never fiters in webview handler

      public async override void OnPageFinished(Android.Webkit.WebView view, string url)
          {
              if (webView != null)
              {
                  int i = 10;
                  while (view.ContentHeight == 0 && i-- > 0) 
                      await System.Threading.Tasks.Task.Delay(100);
                  webView.HeightRequest = view.ContentHeight;
                   
              }
              base.OnPageFinished(view, url);
          }