dotnet
Labels with HTML ignore text styling on IOS but not Android
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
Bug repros in 17.2.0 Preview 1. Using iPad emulator iOS 15.2. As you can see below, changing type to HTML lowered the font size and left the text black. Attempting on Android has text change to red as expected with a similar font size.
Repro project can be found at 4230.zip
For those who can't wait for a fix, here is an AppDelegate.cs that will fix the issue. Just add the UpdateHtmlText and CleanseFontName method to your AppDelegate class and add the LabelHandlerMappings to the constructor.
public class AppDelegate : MauiUIApplicationDelegate
{
protected override MauiApp CreateMauiApp() => MauiProgram.CreateMauiApp();
public AppDelegate() : base()
{
// Update the Html attributed string for any of those property changes
LabelHandler.Mapper.AppendToMapping(nameof(Label.Text), UpdateHtmlText);
LabelHandler.Mapper.AppendToMapping(nameof(Label.FontFamily), UpdateHtmlText);
LabelHandler.Mapper.AppendToMapping(nameof(Label.FontSize), UpdateHtmlText);
LabelHandler.Mapper.AppendToMapping(nameof(Label.TextType), UpdateHtmlText);
}
void UpdateHtmlText(ILabelHandler handler, ILabel label)
{
var l = (Label)label;
// Ignore non Html labels
if (l.TextType != TextType.Html)
{
return;
}
var font = l.ToFont();
var registrar = handler.MauiContext.Services.GetService<IFontRegistrar>();
var fontName = CleanseFontName(font.Family, registrar);
var fontSize = l.FontSize != 0 ? l.FontSize : UIFont.SystemFontSize;
var text = l.Text != null ? l.Text : "";
var attr = new NSAttributedStringDocumentAttributes
{
DocumentType = NSDocumentType.HTML,
StringEncoding = NSStringEncoding.UTF8,
};
NSError nsError = null;
// Create a new Attributed string with the HTML wrapped in a span with CSS setting the correct
// font
var r = $"<span style=\"font-family: '{fontName}'; font-size: {fontSize};\">{text}</span>";
handler.PlatformView.AttributedText = new NSAttributedString(r, attr, ref nsError);
}
// Taken straight from src/Core/src/Fonts/FontManager.iOS.cs
string? CleanseFontName(string fontName, IFontRegistrar _fontRegistrar)
{
// First check Alias
if (_fontRegistrar.GetFont(fontName) is string fontPostScriptName)
return fontPostScriptName;
var fontFile = FontFile.FromString(fontName);
if (!string.IsNullOrWhiteSpace(fontFile.Extension))
{
if (_fontRegistrar.GetFont(fontFile.FileNameWithExtension()) is string filePath)
return filePath ?? fontFile.PostScriptName;
}
else
{
foreach (var ext in FontFile.Extensions)
{
var formatted = fontFile.FileNameWithExtension(ext);
if (_fontRegistrar.GetFont(formatted) is string filePath)
return filePath;
}
}
return fontFile.PostScriptName;
}
}
We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.
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:
This works on iOS, Android, Windows and macOS without problems.
Note: If you need to use a font that is not in the web, you can certainly add it from the resources to include it on the HTML.
This is just my grain of salt. I hope this helps others facing this issue :)
cc: @jfversluis
@vhugogarcia I am not convinced this is by design since the behaviour in Android and IOS are different. If it is by design that the text colour has no effect in html mode then it should have no effect in both Android and IOS. It should also possibly throw an exception if you try to set the TextColor. Otherwise someone could test the label on Android and it work perfectly but then when switching to IOS it no longer works.
However I would prefer the functionality that it does have an effect on the default font colour but is then overridable within specific HTML, this seems far more usable to be. I am not sure how having the TextColor not work on IOS helps anyone.
In the application I was developing when I found this bug the text I was loading from a database contained html markup such as "Example string with some bold text". I needed the text colour and font to follow the app font colour and style but then render some simple markup. This all worked great on Android but on IOS I had to go to allow more effort of hosting a WebView and wrapping the text in styles which was a massive over complication.
@owaits I still believe it is by design. Because let's say you set a label with HTML type and then you set the text color to Orange using the "TextColor" property, but then your returned html string has red color on it.
<strong style=\"color:red\">This is HTML text</strong>
Which color should the MAUI use and why? These kind of decisions complicate things when they can be easy. If the Label is set to HTML type then it is what exactly is proposed to do, not trying to figure out how to assign properties to a type of label that is not supposed to do.
Probably, what could happen is that .NET MAUI in the future separate the labels into 2 segments:
- Plain/Formatted Labels
<Label></Label> - HTML Labels
<HtmlLabel></HtmlLabel>
This separation could help to clarify the purpose of the element in the screen. :)
@vhugogarcia I see it more like the parameters are setting the body style on a web page but if the page contains more specific styling then that takes president. So the TextColor attribute is setting the body style for you but then the html can contain more specific styles. So in your example yes, it is correct that it is red.
One advantage with having the parameters set the global style is that you can re-use the styles you have in your app which makes it really easy to incorporate HTML content that takes advantage of your app styles.
I am not sure how you would achieve dark and light app themes in your example without some complicated HTML parsing. You need to take into account that you may not be the author of the HTML, for example in GitHub I can enter this message with HTML and it gets re-formatted with the style and colour for GitHub.
I do agree with separating the Label control in Label and HTMLLabel though :-)
@owaits I still believe it is by design. Because let's say you set a label with HTML type and then you set the text color to Orange using the "TextColor" property, but then your returned html string has red color on it.
<strong style=\"color:red\">This is HTML text\</strong\>Which color should the MAUI use and why? These kind of decisions complicate things when they can be easy. If the Label is set to HTML type then it is what exactly is proposed to do, not trying to figure out how to assign properties to a type of label that is not supposed to do.
Probably, what could happen is that .NET MAUI in the future separate the labels into 2 segments:
- Plain/Formatted Labels
<Label></Label>- HTML Labels
<HtmlLabel></HtmlLabel>This separation could help to clarify the purpose of the element in the screen. :)
That's certainly the intention: https://github.com/dotnet/maui/issues/1082. I wish we'd had time to do this for .NET 7, but it'll be a .NET 8 thing at the earliest.
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.)
This is still an issue in .NET 7. Isn't the pull request associated with this bug released.
Hello lovely human, thank you for your comment on this issue. Because this issue has been closed for a period of time, please strongly consider opening a new issue linking to this issue instead to ensure better visibility of your comment. Thank you!
@hartez @Redth @rmarinho I am facing the issue on iOS and unable to style the html label with fontsize, textcolor, fontfamily etc. The above pull request is merged but still not been released. Should I open a new issue or wait.
Hello lovely human, thank you for your comment on this issue. Because this issue has been closed for a period of time, please strongly consider opening a new issue linking to this issue instead to ensure better visibility of your comment. Thank you!