Android HtmlView Does not accept size or font face styling

Thread is closed for posting
8 posts, 0 answers
  1. Anurag
    Anurag avatar
    39 posts
    Member since:
    Apr 2016

    Posted 24 Aug 2017 Link to this post

    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>

    Please suggest a fix or workaround.
  2. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    351 posts

    Posted 24 Aug 2017 Link to this post

    Hello Anurag,

    Thank you for your interest in NativeScript!
    It seems that your code snippet is missing a closing bracket for the HTML tag (after the closing span).which may lead to undesired behavior. After adding the closing tag the HTML was applying the styles as expected.

    <HtmlView html="<span><b><font size='10' color='blue' face='lato'>blue text</font> and non-blue text</b></span>">
    </
    HtmlView>

    Demonstration project using the above snippet can be found here.
    If you need an Angular example you can find one here.

    Regards,
    Nikolay Iliev
    Progress Telerik
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
  3. Anurag
    Anurag avatar
    39 posts
    Member since:
    Apr 2016

    Posted 24 Aug 2017 Link to this post

    Hi Nikolay,

    Thanks for the prompt response. Missing the closing > for the HtmlView was an oversight. My apologies.

    I have a nativescript angular project and I tried to use the code that you posted in the response in my project. In android the only styling option that worked was the color and neither the font size nor the font face change on applying the styles as suggested.

    I was able to observe this behavior in multiple angular nativescript projects. If it would help I can create and share a project on github. Do let me know..

    Thanks

  4. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    351 posts

    Posted 24 Aug 2017 Link to this post

    Hello Anurag,

    The HTML view module is meant for the most basic scenarios (like providing HTML string) and only a number of styling properties like color will be applied.
    To resolve this issue and have better control over your HTML content, you should use the WebView module.
    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.

    e.g.
    <WebView src="<span><b><font size='24' color='blue' face='lato'>blue text</font> and non-blue text</b></span>"></WebView>
    Demo Angular project demonstrating the above code can be found here
    With the WebView the font properties will be applied as expected.

    More examples on how to use WebView module can be found here.

    Regards,
    Nikolay Iliev
    Progress Telerik
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
  5. Anurag
    Anurag avatar
    39 posts
    Member since:
    Apr 2016

    Posted 05 Jan in reply to Nikolay Iliev Link to this post

    Hi Nikolay,

    As suggested by you above, I recently used the Webview for my project to achieve better control over styling. Whule I was successful in changing the font size and color, I am not able to change the font family. 

    I tried to look at the sample project shared here. However while the face is set to "Lato" in the Webview, it was not clear how the font-family "lato" has been set in the app.

    Please tell me what I need to do to change the font family to a different font e.g. Abel-Regular.

    Thanks

    My code 

    <ng-template #nonTabletTemplate>
             <WebView row="0" col="1" colSpan="2" src="<span><b><font color='#ff515e' size='1' face='Abel-Regular'>{{item.text}}</font></b></span>">
             </WebView>
     </ng-template>
  6. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    351 posts

    Posted 05 Jan Link to this post

    Hi Anurag,

    You can change the font family by directly accessing the native Android WebView and applying it as a style.
    Let's say that we have a fonts folder in our NativeScript application with a font named Nasalization.ttf
    Using the loaded event to get a reference to our WebView here is how to apply the custom style via the HTML content.
    export function onWebViewLoaded(args) {
        let path = fs.knownFolders.currentApp().path; // note that this is the path to our app folder
     
        let wv = <WebView>args.object;
     
        let YourTxext = "Some custom text content!";
        let head = "<head><style>@font-face {font-family: 'Nasalization';src: url('file://" + path + "/fonts/Nasalization.ttf');}body {font-family: 'Nasalization';}</style></head>";
        let htmlData = "<html>" + head + "<body>" + YourTxext + "</body></html>";
     
        wv.android.loadDataWithBaseURL(null, htmlData , "text/html", "utf-8", "about:blank");
    }


    From the above part, we are using the path to our folder with concatenation with fonts/Nasalization.ttf 
    url('file://" + path + "/fonts/Nasalization.ttf')

    Test application demonstrating the above can be found here

    Regards,
    Nikolay Iliev
    Progress Telerik
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
  7. Anurag
    Anurag avatar
    39 posts
    Member since:
    Apr 2016

    Posted 08 Jan in reply to Nikolay Iliev Link to this post

    Hi Nikolay,

    I tried the method you described in my Angular4-Nativescript project, and it works in changing the font family. However, there seems to be a performance penalty, when using this to display items in a list. This is because the function onWebViewLoaded() runs for each item in the list. Further this function runs again and again each time change detection happens.

    I have created a sample project to demonstrate this here

    Is there a way to do this by setting the style properties on the template specifically for say the webview or htmlview?

  8. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    351 posts

    Posted 08 Jan Link to this post

    Hello Anurag,

    There is no option to directly modify the Font Family of HtmlView pr WebView on Android.
    Even the native Android developers are directly modifying the WebView source code using the same approach as the one suggested before (here)
    .
    The performance issue is more likely related to the fact that you are trying to initialize a large number of WebViews using ListView.
    There are many possibilities why the performance of your WebView might differ on different Andriod devices and SDK versions. 
    One of the frequent issues is related to the discussion in this thread so you might want to check the API level of the device where you are experiencing performance issues and try the suggested solution.

    Regards,
    Nikolay Iliev
    Progress Telerik
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
Back to Top