I want to change font face of html string loaded into WebView similarly as mentioned in this question:
How to change font face of Webview in Android?
The difference is that I am not using old approach where you store you font files in assets folder, but I store them in res/font as described in "Fonts in XML" android font support documentation:
https://developer.android.com/guide/topics/ui/look-and-feel/fonts-in-xml.html
Now, I obviously can't use:
file:///android_asset/fonts/my_font.otf
I tried:
file:///android_res/font/my_font.otf
and many other ways of describing path to my font inside of res/font folder, but none of them work.
How to use custom font family for a WebView that loads html string if my font is stored in res/font folder ?
//Edit:
My current implementation that is not working is:
#BindingAdapter("loadData")
public static void loadData(WebView webView, String htmlData) {
webView.loadDataWithBaseURL(null, htmlData, "text/html", "utf-8", null);
}
#BindingAdapter({"loadData", "fontFamily"})
public static void loadData(WebView webView, String htmlData, #FontRes int fontFamilyId) {
TypedValue value = new TypedValue();
ApplicationActivity.getSharedApplication().getResources().getValue(fontFamilyId, value, true);
String fontPath = value.string.toString();
File fontFile = new File(fontPath);
String prefix = "<html>\n"
+"\t<head>\n"
+"\t\t<style type=\"text/css\">\n"
+"\t\t\t#font-face {\n"
+"\t\t\t\tfont-family: 'CustomFont';\n"
+"\t\t\t\tsrc: url(\"file:///android_res/font/"+fontFile.getName()+"\")\n"
+"\t\t\t}\n"
+"\t\t\tbody {\n"
+"\t\t\t\tfont-family: 'CustomFont';\n"
+"\t\t\t}\n"
+"\t\t</style>\n"
+"\t</head>\n"
+"\t<body>\n";
String postfix = "\t</body>\n</html>";
loadData(webView, prefix + htmlData + postfix);
}
Just tried and this works similarly to loading fonts from assets, you just need to change the base url to point to resources instead.
Example HTML
<html>
<head>
<style>
#font-face {
font-family: 'CustomFont';
src: url('font/CustomFont.ttf');
}
#font {
font-family: 'CustomFont';
}
</style>
</head>
<body>
<p>No Font</p>
<br />
<p id="font">Font</p>
</body>
load this HTML into the webview using Webview#loadDataWithBaseURL(String, String, String, String, String), using file://android_res/ as the base url (first param)
Example:
webview.loadDataWithBaseURL("file:///android_res/", html, "text/html", "utf-8", null)
Edit:
If you're using proguard on your release builds you'll need to add extra rules to prevent the R class being renamed during the ProGuard process otherwise the WebView won't be able to find the font resource. Details can be found at this post
I managed to load my local font from res/font directory. In my example i want to load italic opensans.
My setup are as follow:
css file inside assets directory
use this for setting the font-face
#font-face {
font-family: 'opensans';
src: url("file:///android_res/font/opensans_italic.ttf")
}
body {
font-family: 'opensans';
font-weight: 400;
}
Load the WebView using loadDataWithBaseUrl, for example:
webView.loadDataWithBaseURL(null, yourHtmlContent, "text/html", "utf-8", null)
But i have this at the the top of my html content:
"<link rel='stylesheet' type='text/css' href='file:///android_asset/mycss.css' />”
I hope it works too for your case.
Edit:
Add this in your proguard config to make it work in release mode.
-keep class com.your.package.name.R$font { *; }
You can use the custom res font like this -
<head>
<style type="text/css">
#font-face {
font-family: MyFont;
src: url("file:///res/font/myfont.ttf")
}
body {
font-family: MyFont;
}
</style>
Related
I've seen multiple tutorials adding a GetBaseUrl separately for IOS and Android, but they don't answer my question. I was wondering if there is no other way to add custom CSS to a webview and only use 1 stylesheet (default.css). The reason why I want to do this is because my stylesheet is identical for both IOS and Android and contains little styling.
This is what I've tried:
I have a WebView:
<WebView.Source >
<HtmlWebViewSource Html="{Binding Data.Content}" />
</WebView.Source>
The Source of this WebView is a string that looks like this:
string contentString = #"<html>
<head>" +
"<link rel='stylesheet' href='default.css'"
"</head>" +
"<body style='text-align:left;background-color:white;font-size:16px;margin:0;'>" +
value +
"</body>" +
"</html>";
The default.css file mentioned above is in my Assets folder and has Build Action EmbeddedResource, located in the root directory of my project:
Can anyone help? Thanks in advance.
There are some ways to do this, one is to use HtmlWebViewSource, the html is like this:
htmlSource.Html = #"<html>
<head>
<link rel=""stylesheet"" href=""default.css"">
</head>
<body>
<h1>Xamarin.Forms</h1>
<p>The CSS and image are loaded from local files!</p>
<img src='XamarinLogo.png'/>
<p>next page</p>
</body>
</html>";
Another way is to use WebView.loadDataWithBaseURL, there is the same thread that you can take a look:
Rendering HTML in a WebView with custom CSS
The easiest way is to wrap your HTML with CSS (or replace link tags with its resulting content)
var html = AddHtmlAndCssTags("<div>my html</div>", ReadCss());
protected string ReadCss()
{
var resourceName = $"MyProj.Resources.Css.article.css";
var isExists = ResourceLoader.IsEmbeddedResourceExists(Assembly.GetAssembly(typeof(ResourceLoader)), resourceName);
if (isExists)
{
return ResourceLoader.GetEmbeddedResourceString(Assembly.GetAssembly(typeof(ResourceLoader)), resourceName);
}
return string.Empty;
}
protected string AddHtmlAndCssTags(string html, string css)
{
var cssTag = string.IsNullOrEmpty(css) ? string.Empty : $"<style>{css}</style>";
return $"<html><head>{cssTag}</head><body>{html}<body></html>";
}
I am receiving an array of messages and each message has various properties and one of it is content property which is received like below
"<!DOCTYPE html PUBLIC \"-//W3C//DTD HTML 4.01//EN\" \"http://www.w3.org/TR/html4/strict.dtd\">\n<html>\n<head>\n<meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\">\n<meta http-equiv=\"Content-Style-Type\" content=\"text/css\">\n<title></title>\n<meta name=\"Generator\" content=\"Cocoa HTML Writer\">\n<style type=\"text/css\">\np.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px '.SF UI Text'}\nspan.s1 {font-family: '.SFUIText'; font-weight: normal; font-style: normal; font-size: 11.00pt}\n</style>\n</head>\n<body>\n<p class=\"p1\"><span class=\"s1\">Test Ab<br>\n---------------------<br>\n</span></p>\n<p class=\"p1\"><span class=\"s1\">Verify the field </span></p>\n</body>\n</html>\n"
There is a list view to show all messages and detail view to show the description, in detail view I have implemented web view to show the content above, renders fine. In list view, I need to show the only first line of above content as a preview.
I believe using web view for every list item is dangerous plus there are items other than this to show in the list as well and the problem is because above content is an entire webpage instead of simple HTML tag (in case of for eg. Simple paragraph enclosure tag it works fine).
I tried HTMLTextview library and setText(Html.fromHtml()) method on textview too, but I am getting
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px '.SF UI Text'}
as first line currently.
Let me know how can I accomplish showing only first line as a preview.
If you know the html tag or id or class of each first line to preview, maybe jsoup can help u to do what you want.
first parse the html
String html = "<html><head><title>First parse</title></head>"
+ "<body><p>Parsed HTML into a doc.</p></body></html>";
Document doc = Jsoup.parse(html);
then
Finding elements
getElementById(String id)
getElementsByTag(String tag)
getElementsByClass(String className)
getElementsByAttribute(String key) (and related methods)
like
Element content = doc.getElementById("content");
and finally content.text() will give you what you are looking for.
If you want content from the given link then I have written code. It's a temporary solution I mean I have tested for given link. Note It will work only for getting content from meta tag.
add in gradle, dependency: implementation 'org.jsoup:jsoup:1.11.3'
String html = "<!DOCTYPE html PUBLIC \"-//W3C//DTD HTML 4.01//EN\" \"http://www.w3.org/TR/html4/strict.dtd\">\n<html>\n<head>\n<meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\">\n<meta http-equiv=\"Content-Style-Type\" content=\"text/css\">\n<title></title>\n<meta name=\"Generator\" content=\"Cocoa HTML Writer\">\n<style type=\"text/css\">\np.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px '.SF UI Text'}\nspan.s1 {font-family: '.SFUIText'; font-weight: normal; font-style: normal; font-size: 11.00pt}\n</style>\n</head>\n<body>\n<p class=\"p1\"><span class=\"s1\">Test Ab<br>\n---------------------<br>\n</span></p>\n<p class=\"p1\"><span class=\"s1\">Verify the field </span></p>\n</body>\n</html>\n";
Document document = Jsoup.parse(html);
Elements e = document.select("meta");
for (int i = 0; i<e.size(); i++ ) {
Log.e("element",e.get(i).toString());
// E/element: <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
// E/element: <meta http-equiv="Content-Style-Type" content="text/css">
// E/element: <meta name="Generator" content="Cocoa HTML Writer">
if(e.get(i).attr("content").contains("text/")){
}else {
Log.e("content", e.get(i).attr("content"));
//output: Cocoa HTML Writer
}
}
I create a service that loads data from a remote server and returns HTML data. This data I put to my WebView. All work good but have one problem: If some word is too long, WebView adds horizontal scroll. I add CSS file with break-work, word-wrap but it doesn't help.
JSONObject jsonObject = new JSONObject(strResult);
String content = jsonObject.getString("postContent");
TextView postTitle = (TextView) view.findViewById(R.id.postTitle);
postTitle.setText(jsonObject.getString("postTitle"));
WebView postContent = (WebView) view.findViewById(R.id.postContent);
postContent.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
postContent.getSettings().setLoadWithOverviewMode(true);
postContent.getSettings().setUseWideViewPort(true);
postContent.getSettings().setBuiltInZoomControls(true);
postContent.getSettings().setJavaScriptEnabled(true);
postContent.loadDataWithBaseURL("file:///android_asset/", content, "text/html; charset=utf-8", "utf-8", null);
I did face completely similar problems and finally realized that I misused the css options for that. Just add word-break: break-all; word-break: break-word to css style for body and/or headers and it's done
<head>
<style type="text/css">
body {text-align: center; word-break: break-all; word-break: break-word}
h1 {font-size:large; word-break: break-all; word-break: break-word}
h2 {font-size:medium; word-break: break-all; word-break: break-word}
</style> </head>
Some more details for css properties can be found here or there
Please be careful, as word-break option could seriously impact the readability of the text in WebView. Only use it when you really need it.
Apparently:
setLoadWithOverviewMode(true) loads the WebView completely zoomed out
setUseWideViewPort(true) makes the Webview have a normal viewport (such as a normal desktop browser), while when false the webview will have a viewport constrained to its own dimensions (so if the webview is 50px*50px the viewport will be the same size)
so i recommend you don't use setUseWideViewPort, the following code is for similar task that worked good:
final WebSettings webSettings = webView.getSettings();
webSettings.setRenderPriority(WebSettings.RenderPriority.HIGH);
webSettings.setEnableSmoothTransition(true);
webView.setBackgroundColor(Color.parseColor("#00000000"));
String before = "<html><head><style type=\"text/css\">#font-face {font-family: MyFont;src: url(\"file:///android_asset/fonts/w_yekan.ttf\")}body {font-family: MyFont;font-size: 14px;text-align: right;}</style></head><body><div style=\"direction:rtl !important;; text-align:right !important;\">";
String after = "</body></html>";
String myHtmlString = before + Utils.editString(DoaText) + after;
webView.getSettings().setDefaultZoom(WebSettings.ZoomDensity.FAR);
webView.loadDataWithBaseURL(null, myHtmlString, "text/html", "UTF-8", null);
i hope this answer be a good solution for you .
I store Myanmar font in database. When I show Myanmar font by webview, They show the followings. How do I change my codes? Please help me.
ပရမá€á± (ပရမ + အá€á³) = အá‚ွစ္á€á€ºá€³á€•á€¹áŠ အျမင့္ဆုံး သá€á€…ရာá‹
These are my codes.
dstory = (WebView) findViewById(R.id.dstory);
String data=result.getString(3);
dstory.loadData(data , "text/html", "utf-8");
Try adding Fonts to your Asset folder and add it to your WebView by CSS
You Code Should be loaded from asset directory
webView.loadDataWithBaseURL("file:///android_asset/", data, "text/html", "UTF-8", null);
and your CSS should be
#font-face {
font-family: 'my_font';
src: url('my_font.ttf');
}
#Muthu Thank u for your advice.Now I got it.
In css file,
#font-face {
font-family: 'ZawgyiOne2008';
src: url('file:///android_asset/ZawgyiOne2008.ttf');
}
body{
font-family: ZawgyiOne2008; width: 100%;
background-color: transparent;
padding: 0px;
}
In my DetailActivity.java, to link css is used full html.
WebView view = (WebView)findViewById(R.id.webView1);
final String mimeType = "text/html";
final String encoding = "UTF-8";
String html =
"<html><head><LINK href=\"file:///android_asset/bootstrap.css\" type=\"text/css\" rel=\"stylesheet\"/></head><body><H1 class='label'>A simple HTML page</H1>" +
"<input type='text' class='input-large' required='true' id='cname' name='cname'/>" +
"<input type='text'/>" +
"<p>The quick brown fox jumps over the lazy dog</p></body></html>";
view.loadDataWithBaseURL("", html, mimeType, encoding, "");
To show Myanmar Font from database, use string replace.
String old="%#";
String newstr=html.replace(old, data);
I need to change webview font face , I've searched and I used this but it didn't change the font , I've the font file in asset folder :
wb.loadData(
"<html><head><style>#font-face { font-family: myface;src: url('file:///android_asset/yekan.ttf');" +
"BODY, HTML {background: transparent; } body,div { font-family: myface;} </style></head><body><div style='text-align: justify; line-height: 23px;float:right' dir='rtl'>"
+ text + "</div></body></html>",
"text/html; charset=utf-8", "UTF-8");
is it wrong or webview couldn't change the font face ?
thanks
change
url('file:///android_asset/yekan.ttf')
to
url(\"file:///android_asset/yekan.ttf\")