When setting custom font to an html page and loading the html data using loadDataWithBaseURL the bold tag is being ignored. My code is as below:
webView.loadDataWithBaseURL("", "<html><style type=\"text/css\"> #font-face { font-family:\"customFont\"; src:url('file:///android_asset/fonts/customfont.ttf');line-height:45px;font-size:34px;} body { font-family:'customFont'; }</style><body><b>The legend is back!!</b></body></html>", "text/html", "utf-8", "");
My output as seen below:
When the same content is loaded using loadData as shown below:
webView.loadData("", "<html><style type=\"text/css\"> #font-face { font-family:\"customFont\"; src:url('file:///android_asset/fonts/customfont.ttf');line-height:45px;font-size:34px;} body { font-family:'customFont'; }</style><body><b>The legend is back!!</b></body></html>", "text/html", "utf-8", "");
My output is as seen below:
Not sure what the possible problem could be. Is there any specific reason for the same.
For now i solved this by using bold font and specifying the same using css in my html. My css code is as below:
#font-face {font-family: MyArialBold;src: url('file:///android_asset/fonts/ArialBold.ttf')} b{font-family: ArialFontBold;}.
Hope that helps.
Related
I am loading CSS from Asset folder. It’s working fine except font loading. I am getting following error while leading font.
"Failed to decode downloaded font: file:///android_asset/css/seriff.ttf"
Here my code,
#font-face {
font-family: 'MyFont';
src: url('seriff.ttf');
}
body {
font-family: 'MyFont';
background-color: #FFBB00;
}
content = "<html><head><link rel=\"stylesheet\" type=\"text/css\" href=\"css/style.css\"><body>" + "Testing something" + "</body></html>";
newsView.loadDataWithBaseURL("file:///android_asset/", content, "text/html", "utf-8", null);
Other CSS property is working fine. Please help if anyone have idea to fix this.
Thanks.
use relative path to the font
src: url('../fonts/seriff.ttf');
and to the css
href=\"./css/style.css\"
It is likely that your ttf font is not compatible with the Android WebView. To confirm this replace your seriff.ttf file with another ttf file and see if it is displayed correctly.
You can use a ttf converter to read in the font then write it back out it should fix the issue. A site such as freefontconverter.com will help with this task.
how can I change text direction to the Right to Left in webview ?
This is my code
WebView web = (WebView) findViewById(R.id.web);
web.getSettings().setJavaScriptEnabled(true);
web.loadDataWithBaseURL("", myhtml, "text/html", "UTF-8", "");
I think that you need to change the dir="RTL in your HTML code.
for example:
<body dir="rtl">
<p>Some Text that will be RTL aligned</p>
</body>
WebView just allow you to view webpages but doesn't change the text direction. That only depends on the HTML markup in the web page.
If it still doesn't work, you might have issues in your HTML. You can share your code here and I can try to help you further.
Tom.
it work for me:
desc.loadDataWithBaseURL("http://www.atfonline.ir/", "<html dir=\"rtl\" lang=\"\"><body>" + outhtml + "</body></html>", "text/html", "UTF-8", null);
I have an android webview and the text in it has a font of sans-serif. I have the ttf file in assets/sans-serif.ttf
Here is the code
WebView webVw;
String webContent;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
webVw=(WebView)findViewById(R.id.webVw);
webContent="%3Cdiv%20style%3D%22width%3A100%25%3Bheight%3A100%25%3Bposition%3Arelative%3Bleft%3A.1%25%3Btop%3A.1%25%22%3E%3Cdiv%20style%3D%22position%3Aabsolute%3Bwidth%3A31%25%3Bheight%3A42.22222222222222%25%3Bleft%3A36.375%25%3Btop%3A19.02313624678663%25%3Bcolor%3Argb(0%2C%200%2C%200)%3Bfont-size%3A50px%3Bfont-style%3Anormal%3Bfont-family%3Asans-serif%2C%20sans-serif%2C%20sans-serif%3Bfont-weight%3A400%22%20%3EOverlay!%20%3C%2Fdiv%3E%3Ca%20href%3D%22javascript%3A%20void(0)%22%20%20target%3D%22_blank%22%20%3E%3Cimg%20src%3D%22https%3A%2F%2Fsi0.twimg.com%2Fprofile_images%2F1490344068%2FLOGO_COGNIZANT_C_only_normal.jpg%22%20style%3D%22position%3Aabsolute%3Bwidth%3A4.875%25%3Bheight%3A10.444444444444445%25%3Bleft%3A0.625%25%3Btop%3A1.2853470437017995%25%22%20%2F%3E%3C%2Fa%3E%3Cdiv%20style%3D%22position%3Aabsolute%3Bwidth%3A4%25%3Bheight%3A6.666666666666667%25%3Bleft%3A95%25%3Btop%3A1.5424164524421593%25%3Bbackground%3Argb(47%2C%206%2C%20246)%20none%22%20%3E%3C%2Fdiv%3E%3Cdiv%20class%3D%22cf-component%20buttonwrap%22%20style%3D%22position%3Aabsolute%3Bborder%3Dradius%3A5px%3Bwidth%3A4.25%25%3Bheight%3A4.222222222222222%25%3Bleft%3A6.125%25%3Btop%3A3.3419023136246784%25%3Bbackground%3Argb(6%2C%20115%2C%20233)%3Bfont-size%3A15px%3Bfont-style%3Anormal%3Bfont-family%3Asans-serif%2C%20sans-serif%2C%20sans-serif%3Bfont-weight%3A400%22%20%3E%3Ca%20%20class%3D%22editableTxt%22%20href%3D%22http%3A%2F%2Fwww.cognizant.com%22%20target%3D%22_blank%22%3E%20Go!%3C%2Fa%3E%3C%2Fdiv%3E%3C%2Fdiv%3E";
String head="<head><style>#font-face {font-family: 'sans-serif';src: url('file:///assets/sans-serif.ttf');}body {font-family: 'sans-serif';}</style></head>";
String HtmlString = "<html>"+head+"<body>"+webContent+"</body></html>";
webVw.loadData(HtmlString, "text/html","charset=UTF-8");
}
The webview displays the normal font but not sans-serif
Try this...
In your assets/fonts folder, place the desired OTF or TTF font (here MyFont.otf)
Create a HTML file that you'll use for the WebView's content, inside the assets folder (here inside assets/demo/my_page.html):
<html>
<head>
<style type="text/css">
#font-face {
font-family: MyFont;
src: url("file:///android_asset/fonts/MyFont.otf")
}
body {
font-family: MyFont;
font-size: medium;
text-align: justify;
}
</style>
</head>
<body>
Your text can go here! Your text can go here! Your text can go here!
</body>
</html>
Load the HTML into the WebView from code:
webview.loadUrl("file:///android_asset/demo/my_page.html");
Take note that injecting the HTML through loadData() has not worked for me. I'd be curious to hear if anybody can get that working.
use this code instead of it
webVw.loadDataWithBaseURL("file:///android_asset/",HtmlString, "text/html", "UTF-8",null);
In some cases if you tried many ways to solve this problem and you did not get your problem solved yet. you should try to check your font file correct name.open your font file and check font name, copy that and rename file to correct name.
In your html codes use correct name too.
I had this problem several times!
I'm currently developing an android web browser. There has some pages used other character like Uighur character, and they display unnormally, so I used the following code to resolved this problem.
String htmlStr = getHTML(url, "UTF-8");//get the html content from the url
String tmp="<link href=\"file:///android_asset/myfont.css\" rel=\"stylesheet\" type=\"text/css\" />";
if(htmlStr.contains("</head>")){
htmlStr = htmlStr.replace("</head>", tmp);//add my css into the page
}
mCurrentWebView.loadDataWithBaseURL(url, htmlStr,"text/html", "utf-8", "");//display the page content
This is myfont.css：
#font-face { font-family: MyCustomFont; src: url("fonts/ALPEKRAN.TTF") }
body {font-family: MyCustomFont, Verdana, Arial, sans-serif; text-align:right;}
The ALPEKRAN.TTF font is under the folder of assets/fonts/.
But there have another problem like that page css losed.
Please, give me some suggession.
May you need to specify the full font url, try:
src: url("file:///android_asset/fonts/ALPEKRAN.TTF")
I have like this html blog
<head>
<style>
<!--.hmmessage P
{
margin:0px;
padding:0px
}
body.hmmessage
{
font-size: 10pt;
font-family:Tahoma
}
--></style></head>
<body class='hmmessage'><div dir='ltr'>
text<div>write</div>
</div></body>
</html>
text and write are the results. This Html tags must shown as
-----------
text write |
-----------
How can I do that in Android?
seems to me this should be easy to achieve from the css:
div.ltr div
{
display:inline;
}
Use TextView to present texts in your app.
use html in textviewor button as following
String htmltext = "<html><body>/*... html body here...*/</body></html>";
textview.setText(Html.fromHtml(htmltext));
if you want to use css style or javascript use webview like
webview.loadDataWithBaseURL(null, htmltext, "text/html", "UTF-8", null);