Nativescript: Android HtmlView Does not accept size or font face styling

[anuragd7]

Html view in android does not accept styling or font-family. IOS this works.

Here is a sample code that does not style correctly
<HtmlView html="<span><b><font size='10' color='blue' face='lato'>{{item.text}} </font></b></span>" </HtmlView>

[tsonevn]

Hi @anuragd7,
YOu have missed adding the closing bracket for the HTML tag, which will lead to this behavior.
If you add it the problem should be resolved. For Example:

<HtmlView html="<span><b><font size='10' color='blue' face='lato'>{{item.text}} </font></b></span>" </HtmlView>

If the problem still persists, please send us a sample project, which could be debugged locally.

[corne-de-bruin]

Hi @anuragd7,

We've faced the same issue in our project with setting the font family.
To set the font for Android we used the following code:

const htmlView = this.htmlView.nativeElement.android;
const typeface = android.graphics.Typeface.createFromAsset(assets, this.fontLocation + fs.path.separator + this.font);
htmlView.setTypeface(typeface);

The reasons for this is the difference how iOS and Android are parsing the HTML to the corresponding "rich text" properties.

In our project we decided to create an angular component which deals with the different implementations so we don't have to deal with it on each location where we use the HTMLView.

[tsonevn]

Hi @corne-de-bruin @anuragd7,

The idea for the HtmlView module is to be used for the most basic scenario, like providing HTML string and supports only several styleing properties like color.
Regarding that, We have a better component called WebView, which provides better control over your HTML content, which you need to display. Apart from providing URL, you can also pass HTML string for your WebView just as you would do with HTML View. The property that needs to handle the HTML string is called src.
For example:

<WebView src="<span><b><font size='24' color='blue' face='lato'>blue text</font> and non-blue text</b></span>"></WebView>

With the WebView also the font properties will be applied as expected.

[anuragd7]

Hi @corne-de-bruin ,
Many thanks for the suggestion - will definitely try it out!
Hi @tsonevn
I am using the Htmlview in a listview. I had tried the Webview some time back and it seemed to make the app sluggish. Thanks for the example though.

[madmas]

@tsonevn if WebView is the better component, why does the docs state "Use this component instead of a WebView when you want to show static HTML content." ?
https://docs.nativescript.org/angular/code-samples/ui/htmlview

[tsonevn]

Hi @madmas,
The WebView is better in the cases when you need to display HTML code while respecting all CSS properties added on it.
In the scenario when you will just display a text, you can use the HTMLView, which will improve the performance of the app. However, the style of the text will be restricted.

[captainhaddock29]

Hi @corne-de-bruin !
Could you share your angular component please ?

[corne-de-bruin]

Hi @captainhaddock29

HTML:

<!-- Styling the content through external css is not possible -->
<HTMLView
        [html]="htmlString"
        #htmlView>
</HTMLView>

This is our Angular component:

export class HtmlViewComponent implements OnChanges {
    @Input()
    public html: string = '';
    @ViewChild('htmlView')
    public htmlView: ElementRef;
    public htmlString: string = '';

    private textColor: string = HEX.textColor;
    private linkColor: string = HEX.linkColor;

    private fontSize: string = '[insert font size]';
    private fontFamily: string = '[insert font family]';
    private fontLocation: string = '[insert font directory example: app/fonts]';
    private font: string = '[insert font file name]';

    public ngOnChanges(): void {
        try {
            this.setHTMLView();
        } catch (exception) {
            console.error(exception);
        }
    }

    protected setHTMLView(): void {
        if (isIOS) {
            this.htmlString = this.template;
            wait(() => this.htmlView.nativeElement.ios, () => {
                const htmlView = this.htmlView.nativeElement.ios;
                const linkTextAttributes: any = NSDictionary.dictionaryWithObjectForKey(
                    new Color(this.linkColor).ios, NSForegroundColorAttributeName
                );
                htmlView.linkTextAttributes = linkTextAttributes;
                htmlView.dataDetectorTypes = UIDataDetectorTypes.None;
            });
        } else if (isAndroid) {
            wait(() => this.htmlView.nativeElement.android, () => {
                const htmlView = this.htmlView.nativeElement.android;
                const LINK_MASK_NONE = 0;
                const parsedHtmlString = android.text.Html.fromHtml(this.html);
                const textColor = android.graphics.Color.parseColor(this.textColor);
                const linkColor = android.graphics.Color.parseColor(this.linkColor);
                const assets = androidApp.context.getAssets();
                const typeface = android.graphics.Typeface.createFromAsset(assets, this.fontLocation + fs.path.separator + this.font);
                htmlView.setAutoLinkMask(LINK_MASK_NONE);
                htmlView.setText(parsedHtmlString);
                htmlView.setTextColor(textColor);
                htmlView.setLinkTextColor(linkColor);
                htmlView.setTypeface(typeface);
            });
        }
    }

    private get template(): string {
        let html = '';

        if (!isNullOrUndefined(this.html)) {
            html = this.html;
        }

        return `
            <style type="text/css">
                body {font-family: "${this.fontFamily}"; font-size: ${this.fontSize};}
                a {text-decoration:none;}
             </style>
             <span>
                 <font color="${this.textColor}">
                     ${html}
                 </font>
            </span>`;
    }
}

[suparnavg]

@tsonevn what do the cssClasses, css properties in the HtmlView class do? Are these properties settable, and if so, can they be used to customize the view's css?

Also tried using the HtmlView color property (color="#ff0000" for e.g.) but it does nothing to the actual html content..

[tsonevn]

Hi @suparnavg,
The HtmlView view is designed to display pure HTML code and some of the CSS properties might not be applied to its content. If you want to display rich CSS HTML, you can use the WebView component.

[rahadur]

This is how i create a HtmlView custom component.

Angular Component 💥💥💥

import { Component, OnInit, AfterViewInit, Input, ViewChild, ElementRef } from "@angular/core";
import { Color } from 'tns-core-modules/color';

@Component({
    selector: "HtmlViewer",
    moduleId: module.id,
    template: `
        <HtmlView #htmlView [html]="htmlString" (loaded)="onLoaded()"></HtmlView> 
    `,
    styleUrls: ['./html-viewer.component.css']
})
export class HtmlViewerComponent implements OnInit, AfterViewInit {

    @Input('html') html: string;

    @Input('textSize') textSize: number

    @Input('textColor') textColor: string;

    @Input('textLinkColor') textLinkColor: string;

    @ViewChild('htmlView') htmlView: ElementRef;

    htmlString: string;


    constructor() {
        this.htmlString = '';
    }

    ngOnInit(): void {
        this.htmlString = this.html ? this.html : '';
    }


    ngAfterViewInit() {
    }


    onLoaded() {
        let htmlView = this.htmlView.nativeElement.android;

        htmlView.setTextSize(this.textSize);
        htmlView.setTextColor(this.textColor ? new Color(this.textColor).android : new Color('#999999').android);
        htmlView.setLinkTextColor(this.textLinkColor ? new Color(this.textLinkColor).android : new Color('#0000FF').android);
    }
}

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.