Forum Xamarin Xamarin.Forms

Xamarin forms: How to increase the fontsize of label having TextType="Html"?

SreeeeSreeee INMember ✭✭✭✭✭

I have a label in my app UI that takes HTML data. So I set TextType="Html" property for that label. In small-screen devices I need 16 and for big-screen devices I need 32 as it's font size. But no change in label font size because of the TextType="Html" property.

XAML Label Code

<Label
    x:Name="message_label"
    VerticalOptions="Start"
    VerticalTextAlignment="Center"
    TextType="Html"
    TextColor="Black"
    Margin="5"
    FontSize="Medium">
    <Label.FontFamily>
        <OnPlatform x:TypeArguments="x:String">
            <On Platform="iOS" Value="MouseMemoiresRegular" />
            <On Platform="Android" Value="MouseMemoiresRegular.ttf#MouseMemoiresRegular" />
            <On Platform="UWP" Value="Assets/Fonts/MouseMemoiresRegular.ttf#MouseMemoiresRegular" />
        </OnPlatform>
    </Label.FontFamily>
    <Label.FontSize>
        <OnIdiom x:TypeArguments="x:Double">
            <OnIdiom.Phone>16</OnIdiom.Phone>
            <OnIdiom.Tablet>32</OnIdiom.Tablet>
        </OnIdiom>
    </Label.FontSize>
</Label>

So how can I increase the font size in this case?

Best Answer

  • SreeeeSreeee INMember ✭✭✭✭✭
    Accepted Answer

    @Jarvan My XF version is 4.4.0.991210-pre2. Anyway I solved this problem using Xam.Plugin.HtmlLabel.

    Copied answer from my SO thread.

    If you want to put html in label, and want to increase the fontsize of label, I suggest you can use Xam.Plugin.HtmlLabel.

    Firstly, you can install Xam.Plugin.HtmlLabel in your project,

    Then render this in different platform.

    iOS: AppDelegate.cs

    HtmlLabelRenderer.Initialize();
    global::Xamarin.Forms.Forms.Init();
    

    Android: MainActivity.cs

    HtmlLabelRenderer.Initialize();
    global::Xamarin.Forms.Forms.Init(this, bundle);
    

    UWP: App.xaml.csenter code here

    var rendererAssemblies = new[] { typeof(HtmlLabelRenderer).GetTypeInfo().Assembly };
    Xamarin.Forms.Forms.Init(e, rendererAssemblies);
    HtmlLabelRenderer.Initialize();
    

    than use the HtmlLable like this:

    <htmllabel:HtmlLabel FontSize="12" Text="&lt;h1&gt;Hello World!&lt;/h1&gt;&lt;br/&gt;SecondLine" />
    
            <htmllabel:HtmlLabel FontSize="20" Text="&lt;h1&gt;Hello World!&lt;/h1&gt;&lt;br/&gt;SecondLine" />
    

    You can change different fontsize in htmllabel.

Answers

  • JarvanJarvan Member, Xamarin Team Xamurai

    @Sreeee I've tested the code on my side and it works fine as shown. What's the version of Xamarin.Forms package? Try to update the package to lastest stable version.

    Here is the demo file you can refer to.

  • SreeeeSreeee INMember ✭✭✭✭✭
    Accepted Answer

    @Jarvan My XF version is 4.4.0.991210-pre2. Anyway I solved this problem using Xam.Plugin.HtmlLabel.

    Copied answer from my SO thread.

    If you want to put html in label, and want to increase the fontsize of label, I suggest you can use Xam.Plugin.HtmlLabel.

    Firstly, you can install Xam.Plugin.HtmlLabel in your project,

    Then render this in different platform.

    iOS: AppDelegate.cs

    HtmlLabelRenderer.Initialize();
    global::Xamarin.Forms.Forms.Init();
    

    Android: MainActivity.cs

    HtmlLabelRenderer.Initialize();
    global::Xamarin.Forms.Forms.Init(this, bundle);
    

    UWP: App.xaml.csenter code here

    var rendererAssemblies = new[] { typeof(HtmlLabelRenderer).GetTypeInfo().Assembly };
    Xamarin.Forms.Forms.Init(e, rendererAssemblies);
    HtmlLabelRenderer.Initialize();
    

    than use the HtmlLable like this:

    <htmllabel:HtmlLabel FontSize="12" Text="&lt;h1&gt;Hello World!&lt;/h1&gt;&lt;br/&gt;SecondLine" />
    
            <htmllabel:HtmlLabel FontSize="20" Text="&lt;h1&gt;Hello World!&lt;/h1&gt;&lt;br/&gt;SecondLine" />
    

    You can change different fontsize in htmllabel.

  • SreeeeSreeee INMember ✭✭✭✭✭

    @Jarvan I tried your sample project, it is working fine, but don't know what happened in my project, anyway I solved this issue using xam.Plugin.HtmlLabel, thanks :)

Sign In or Register to comment.