Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Labels with HTML ignore text styling on IOS but not Android

See original GitHub issue

Description

When setting the TextType in a Label to Html any styling of the label such as Font, FontSize and Color are ignored when rendered on IOS but not on Android.

So the following label when displayed on Android shows in Red with the correct Font and size but in IOS the text is shown in black with incorrect font and size.

<Label Text="Hello, World!" TextType="Html" TextColor="Red"/>

It is possible to work around this by using the WebView but then it is not possible to get the background to appear consistent beneath the text when using multiple HTML fragments.

Steps to Reproduce

Create a Default Maui Application Add TextType=“Html” to one of the existing labels or add the code bellow.

<Label Text="Hello, World!" TextType="Html" TextColor="Red"/>

Run this on an IOS device and observe the text is black. Run the same app on Android and it has the correct colour.

Version with bug

Preview 11

Last version that worked well

Unknown/Other

Affected platforms

iOS

Affected platform versions

iPadIOS 15

Did you find any workaround?

Using WebView with a css file is a poor work around and does not look good due to backgrounds not matching. I could not find a way to make WebView show with a transparent background.

Relevant log output

No response

Issue Analytics

State:
Created 2 years ago
Reactions:1
Comments:14 (5 by maintainers)

Top GitHub Comments

2reactions

hartezcommented, Nov 22, 2022

This is not intentional, and is definitely a bug - setting the text color for an HTML Label on iOS worked in Forms, so for consistency/migration purposes, it should be working in MAUI as well. (Even if it doesn’t really make a lot of sense, as @vhugogarcia points out.)

2reactions

vhugogarciacommented, Nov 10, 2022

I believe this is not a bug and it is by design that the HTML label ignores those properties such as FontFamily, FontSize, FontColor, etc. please find below my thought:

When the Label is set as HTML it allows you to enter any HTML markup on it and for instance it will be rendered. So, if you need the Label to render a specific color to the text or a specific font family, you can certainly do it using CSS as shown on the official documentation.

Text Color:

Label label = new Label
{
    Text = "This is <strong style=\"color:red\">HTML</strong> text.",
    TextType = TextType.Html
};

Font Family, Font Size, Font Attributes:

Label label = new Label
{
    Text = "<html><head><link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=News+Cycle\"/><style>body{font-family:'News Cycle',sans-serif;font-weight: bold;font-size:16px;}</style></head><body>This is <strong style=\"color:red\">HTML</strong> text.</body></html>",
    TextType = TextType.Html
};

How it renders: