Android HtmlView Does not accept size or font face styling #4746

Activity

1. anuragd7

   changed the title [-]Android View Does not accept size or font face styling[/-] [+]Android HtmlView Does not accept size or font face styling[/+] on Aug 24, 2017
2. tsonevn commented on Aug 24, 2017

   

   tsonevn

   on Aug 24, 2017

   Contributor

   More actions

   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.
3. tsonevn

   added

   question

   on Aug 24, 2017
4. corne-de-bruin commented on Aug 25, 2017

   

   corne-de-bruin

   on Aug 25, 2017

   More actions

   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.
5. tsonevn commented on Aug 25, 2017

   

   tsonevn

   on Aug 25, 2017

   Contributor

   More actions

   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.
6. tsonevn

   closed this as completedon Aug 25, 2017
7. anuragd7 commented on Aug 25, 2017

   

   anuragd7

   on Aug 25, 2017

   Author

   More actions

   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.
8. madmas commented on Mar 22, 2018

   

   madmas

   on Mar 22, 2018

   Last edited by madmas

   Contributor

   More actions

   @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
9. tsonevn commented on Mar 23, 2018

   

   tsonevn

   on Mar 23, 2018

   Contributor

   More actions

   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.
10. captainhaddock29 commented on Apr 26, 2018

    

    captainhaddock29

    on Apr 26, 2018

    More actions

    Hi @corne-de-bruin !
    Could you share your angular component please ?
11. corne-de-bruin commented on Apr 26, 2018

    

    corne-de-bruin

    on Apr 26, 2018

    More actions

    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>`;
        }
    }
    

    👍React with 👍2Reacted by fstuparu and xuhcc

    ❤️React with ❤️2Reacted by James and alexmeia
12. suparnavg commented on Sep 14, 2018

    

    suparnavg

    on Sep 14, 2018

    More actions

    @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..

    👍React with 👍2Reacted by Casper Sørensen and Sebastian Denis
13. tsonevn commented on Mar 19, 2019

    

    tsonevn

    on Mar 19, 2019

    Contributor

    More actions

    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.
14. rahadur commented on Mar 23, 2019

    

    rahadur

    on Mar 23, 2019

    More actions

    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);
    	}
    }

    👍React with 👍4Reacted by fstuparu, Ivan, xuhcc and Michael Prummer
15. lock commented on Mar 22, 2020

    

    lockBot

    on Mar 22, 2020

    More actions

    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.
16. lock

    locked and limited conversation to collaborators on Mar 22, 2020