I am trying to add Arabic custom fontto webView with no luck. In my case, webView renders the default font shipped with the device.
I have tried ttf and otf font types also converted font type to svg through https://everythingfonts.com with no luck
here is my code:
html file stored in the assets folder:
<html>
<head>
<meta http-equiv="content-type" content="text/html;" charset="UTF-8">
<style>
/** Specify a font named "MyFont",
and specify the URL where it can be found: */
#font-face {
font-family: "MyFont";
src: url('file:///android_asset/fonts/NotoKufiArabic-Bold.ttf') format(‘truetype’); ;
}
h3 { font-family:"MyFont"}
</style>
</head>
<body>
<h3>
مرحبا</h3>
</body>
</html>
MainActivity where i call webView:
public class MainActivity extends Activity {
WebView mWebView;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Getting reference to WebView of the activity_main layout
mWebView = (WebView) findViewById(R.id.webview);
// Loading an html page into webview
mWebView.loadUrl("file:///android_asset/demo.html");
}
...........
...........
my code is working fine in case of English text and font but nothing for Arabic.
Use <h3 dir="rtl" lang="ar"> arabic text </h3> :
dir="rtl" inform that the text is arabix
lang="ar" renders form right to left
Related
I have a WebView in my Android App that is loading an HTML string using the loadDataWithBaseURL() method.
w = (WebView)findViewById(R.id.webview);
w.getSettings().setJavaScriptEnabled(true);
String html = "<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Smooth Scroll</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- stylesheets --> <style type="text/css"> body { max-width: 40em; width: 88%; margin-left: auto; margin-right: auto; } </style> </head> <body> <main id="top"> <nav> <hr> </nav> <section> <p> <strong>Ease-Out</strong><br> <a data-scroll href="#ANCHORLINK">Quad</a><br> </p> <p> .<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br> .<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br> .<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>. </p> <p id="ANCHORLINK"><a data-scroll href="#1##%^-bottom">SCROLL TO ANCHOR LINK!</a></p> <p> .<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br> .<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br> .<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>. </p> </html>"
w.loadDataWithBaseURL("http://bar",html,"text/html", "utf-8", "");
I want to use a android button to scroll to anchor link in webview. How to do it?
Your String html is broken. Because you've nested double quotes without the escape slashes.
Also, you need to make sure that you didn't nest your WebView inside a ScrollView in your layout. Because WebView has its own scroll function, and it might not work properly, if you nest it inside a ScrollView.
You can do it with an android Button as follows:
protected void onCreate(Bundle savedInstanceState) {
w = (WebView)findViewById(R.id.webview);
w.getSettings().setJavaScriptEnabled(true);
String html = "<!DOCTYPE html> <html lang=\"en\"> <head>....<body><p id=\"top\">Top of the page content</p>....</body></html>";
w.loadDataWithBaseURL("http://bar",html,"text/html", "utf-8", "");
Button topButton = (Button) findViewById(R.id.topButton);
topButton.setOnClickListener(TopButtonHandler);
Then outside the onCreate function:
View.OnClickListener TopButtonHandler = new View.OnClickListener() {
#Override
public void onClick(View v) {
w.loadUrl("javascript:document.getElementById(\"top\").scrollIntoView()");
}
};`
I got this to work with an html file in my assets folder. Which is a little different from loading a string html. But a string html should work the same way, as long as it doesn't have any errors, such as forgetting to put escape slashes for nested double quotes.
Instead of using an android Button, you can also get an html link to work this way inside your html file, located in your assets folder:
<!DOCTYPE html>
<head>
....
</head>
<body>
<p id="top">Content at the top of the page</p>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
Go to Top
</body>
</html>
When you click on the Go To Top link, then the page will scroll to the top paragraph, provided that you didn't nest your WebView inside a ScrollView in your layout.
I am developing an android information app for farmers.Informations will be given in local indian language.I am using webview for that purpose.Informations are stored in html files.The problem is that the informtions which are in local language are not visible.How to solve this?
WebView mWebView;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Getting reference to WebView of the activity_main layout
mWebView = (WebView) findViewById(R.id.webview);
// Loading an html page into webview
mWebView.loadUrl("file:///android_asset/text.html");
}
Activity main
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res /android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" >
<WebView
android:id="#+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="#string/hello_world" />
</RelativeLayout>
html file
<html>
<head>
<meta http-equiv="content-type" content="text/html;" charset="UTF-8">
<style>
/** Specify a font named "MyFont",
and specify the URL where it can be found: */
#font-face {
font-family: "MyFont";
src: url('file:///android_asset/b.ttf');
}
h3 { font-family:"MyFont"}
</style>
</head>
<body>
<h3>
ಪ್ರಶಾಂತ
</h3>
</body>
You mean to say you want to show helloworld in regional language. For that you need to create res/values- folder. The android framework will automatically pick up the right language
Details:
http://developer.android.com/guide/topics/resources/localization.html
Below are couple of stackoverflow posts which might help you.
How to show local languages font.
How to use custom font with webview.
Try this
add this statement to your onCreate().
mWebView.getSettings().setJavaScriptEnabled(true);
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Getting reference to WebView of the activity_main layout
mWebView = (WebView) findViewById(R.id.webview);
mWebView.getSettings().setJavaScriptEnabled(true);
// Loading an html page into webview
mWebView.loadUrl("file:///android_asset/text.html");
}
I am trying to use an Android Webview to display some "active" content (sets of images that vary depending on some input settings). The content will be local (offline).
I would like to use Angular.js to control the media that will be displayed on the page.
So, to the problem... how can my Angular app receive JSON data on startup? The problem that I see is that the webview does not allow angular to lazy load additional files (I already ran into this while trying to use html templates for a custom directive. This required enclosing the HTML templates into the single HTML file).
My Android activity can write out the options somewhere, but how is Angular going to be able to read them? In other words, is there a way around the security settings of the webview which does not allow Angular.js to lazy load additional files?
I think that I've figured this one out. I realized that I can create a method in my Android Java code that is exposed to JavaScript (via #JavascriptInterface). This would allow me to call this method from my AngularJS app to get the JSON in a string (see this link for info on JavascriptInterface: http://developer.android.com/guide/webapps/webview.html). I'll post some code once I've proven that this works.
Here is the code. It works great.
MainActivity.java
public class MainActivity extends Activity {
private String MY_JSON_EXAMPLE = "{\"name\":\"John Doe\",\"email\":\"jdoe#testco.com\"}";
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
WebView wv = (WebView) findViewById(R.id.myWebView);
wv.getSettings().setJavaScriptEnabled(true);
wv.addJavascriptInterface(this, "AndroidMainAct");
wv.loadUrl("file:///android_asset/mypage.html");
}
#JavascriptInterface
public String getMyJSONData() {
return MY_JSON_EXAMPLE;
}
}
mypage.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Hello World, AngularJS</title>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<h3>Load Test</h3>
<div ng-controller="MyController">
<div id="dataWaiting" ng-show="!myData.length">
Loading JSON...
</div>
<div id="dataLoaded" ng-show="myData.length">
Data Loaded: {{myData}}
</div>
</div>
</body>
</html>
app.js
var myApp=angular.module('myApp',[]);
myApp.controller('MyController', ['$scope', function($scope) {
$scope.myData = '';
this.loadData = function() {
// get the data from android
return AndroidMainAct.getMyJSONData();
};
$scope.myData = this.loadData(); // load data on instantiation
}]);
Exposing the data through the android JavascriptInterface method works great.
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 am making an app in which i have to show hindi text which is coming in html means i have to show whole html page whose content is in hindi.Can anyone help me in this .Any help will be appreciated.My code is as follows:
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
myWebView = (WebView) findViewById(R.id.webview);
myWebView.loadUrl("file:///android_asset/test.html");
WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
and html file is as follows:
<html>
<head>
<meta charset="ISO-8859-1">
<title>New test</title>
</head>
<body>
<body>
<p>
केवल उन व्यक्तियों के पात्र हैं जो हिन्दी के साथ 10 वीं कक्षा उत्तीर्ण की है
</p>
If you have text file copy the file in to assets folder.
Then read it from assets and using Webview you can display the content.
webview.loadUrl("file:///android_asset/hinditext.html");