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>
7 Answers, 1 is accepted
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
Rank 1
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
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>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
Rank 1
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>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
Rank 1
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?
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