I am trying to load a HTML file into android webview. I have fonts and html folder inside the assests. In the fonts folder I have Arabic Regular.otf and Arabic Bold.otf. On loading the page into webview i can't see the difference between bold and regular fonts. I have searched in SO, and then changed the font from otf to svg format. It works fine for me in Jelly Bean, but not exactly in HoneyComb. Please Help.
My styles in HTML file.
.c0{direction:rtl}
p span.medium { font-family:"AdobeArabic-Bold", sans-serif; }
p span { font-family:"AdobeArabic-Regular", sans-serif; }
#font-face {
font-family: 'AdobeArabic-Regular';
src: url('file:///android_asset/fonts/AdobeArabic-Regular.svg');
}
#font-face {
font-family: 'AdobeArabic-Bold';
src: url('file:///android_asset/fonts/AdobeArabic-Bold.svg');
}
And my Activity Code;
WebView wv=(WebView) findViewById(R.id.webView1);
wv.loadUrl("file:///android_asset/html/policy.html");
And my HTML code is
<p class="c0"><span class="medium">المعلومات التي تقدمها.</span></p>
<p class="c0"><span>لكي تتمكن من تصفح هذا الموقع، يجب عليك إدخال بعض المعلومات الشخصية المعرفة (مثل الإسم والبريد الإلكتروني وتاريخ الميلاد). بهدف أن تستفيد من بعض المزايا المميزة. سوف يتم إعلامك أية معلومات مطلوبة منك وأيها اختياري ولأي هدف سنستخدمها.</span></p>
Try something like this, setting them as the same family, but different weights:
#font-face {
font-family: "AdobeArabic";
src: url('file:///android_asset/fonts/AdobeArabic-Regular.svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "AdobeArabic";
src: url('file:///android_asset/fonts/AdobeArabic-Bold.svg');
font-weight: bold;
font-style: normal;
}
And then:
p span {
font-family: "AdobeArabic-Regular", sans-serif;
}
p span.medium {
font-weight: bold;
}
Related
Placing my project in a folder the main root directory, I have created a simple hello world project. The Html file when loaded into chrome works great, however, loading files in the main project folder or subfolders give a net::ERR_FILE_NOT_FOUND
I would like to have video autoplay in the background with a basic overlay & buttons (already set to go & works on desktop).
Tried moving the file locations to the main folder & renamed the directories to not have spaces.
Also tried using file:/// instead of opening through a file explorer in chrome.
Using Android v10 on Pixel 2XL
<body>
<div id="mainCont">
<spread class="header">Main Test</spread><br>
<button> Layout 1</button>
</div>
<div>
<video playsinline autoplay muted loop id="bgVideo">
<source src="Link/VerticalTest.mp4" type="video/mp4">
</video>
</div>
</body>
<style>
#font-face {
font-family: Lato;
src: url(/FontRef/ProximaNova-Bold.otf) format('opentype'),
url(/FontRef/ProximaNova-Light.otf) format('opentype'),
url(/FontRef/ProximaNova-Reg.otf) format('opentype'),
url(/FontRef/ProximaNova-It.otf) format('opentype'),
url(/FontRef/ProximaNova-Sbold.otf) format('opentype'),
}
body{
text-align: center;
font-family: ProximaNova-Reg, sans-serif;
}
#bgVideo {
z-index:-1;
position: fixed;
right: 0;
top: 0;
width: 100%;
}
#mainCont{
padding: 5em;
z-index:10000;
positoin: absolute;
top:50%;
transform: translateY(100%);
}
a{
color:white;
text-decoration: none;
}
button{
padding:10px;
margin:2em;
color: #494949 !important;
text-transform: uppercase;
text-decoration: none;
background: none;
border: 1px solid white !important;
display: inline-block;
transition: all 0.4s ease 0s
}
button:hover{
color: #ffffff !important;
background: #f6b93b;
border-color: #f6b93b !important;
transition: all 0.4s ease 0s;
}
.header{
font-family: ProximaNova-Sbold, sans-serif;
font-size: calc(2.87em - 1vw);
color:white;
font-weight:400;
text-transform:uppercase;
letter-spacing:.6em;
margin-top:calc(6em - 1vw);
}
Using the remote debugger in chrome on my android device, net::ERR_FILE_NOT_FOUND is the only issue that I receive for the video file. No such error for the fonts which are being applied for some reason?
I've always placed my files in the android 'assets' folder. Then, you can do something like this for the HTML:
webView.loadUrl("file:///android_asset/L1.html");
Or if you are referencing image or movie files, I've used something like this:
#SuppressLint({ "SetJavaScriptEnabled", "DefaultLocale" })
private void displayDetail()
{
webView.getSettings().setJavaScriptEnabled(true);
String imageName = animalName.toLowerCase();
imageName = imageName.replaceAll(" ", "_");
imageName = imageName.replaceAll("-", "_");
imageName = imageName.replaceAll("\\(", "");
imageName = imageName.replaceAll("\\)", "");
imageName = imageName + ".jpg";
String html = "<html><body style='font-size: 18px; font-family: \"arial\";'><center><img alt='Embedded Image' src='" + imageName + "'/></center><br><div style='position: relative; margin-left: 10px; margin-right:10px;'>" + breedDetails + "</div></body></html>";
String mime = "text/html";
String encoding = "utf-8";
webView.loadDataWithBaseURL("file:///android_asset/", html, mime, encoding, null);
}
Also ensure you have permission to read from external storage.
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\")
I'm developing an android activity which is loading an HTML file into a webview. However this acitivty is not loading fonts in some phones e.g. HTC Desire or Sony Xperia Z with 4.4 or 4.1 androids. I want to know if i have missed something or it is only depends on phone which i'm testing my app.
private void loadToWebView(String s) {
try {
pageWebView.loadDataWithBaseURL("file:///android_asset/", s,
"text/html", "utf-8", null);
configureWebView(pageWebView);
} catch (Exception e) {
e.printStackTrace();
}
}
here is html header:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<style type="text/css">
#font-face { font-family: 'Persian'; src: url('file:///android_asset/fonts/b_yekan.ttf'); }
#font-face { font-family: 'Persian2'; src: url('file:///android_asset/fonts/b_homa.ttf'); }
#font-face { font-family: 'PersianTitle'; src: url('file:///android_asset/fonts/b_titr.ttf');}
body {font-family: 'Persian';}
h1 {font-family: 'PersianTitle';}
h2 {font-family: 'Persian2';}
</style>
fonts are located in assets/fonts/ like this
First of all, fonts path should be relative to your HTML/CSS file.
So, instead of this:
#font-face { font-family: 'Persian'; src: url('file:///android_asset/fonts/b_yekan.ttf'); }
Use something like this:
#font-face { font-family: 'Persian'; src: url('fonts/b_yekan.ttf'); }
Second, you must make sure that the target you are testing against actually supports Arabic script.
With that, below I am providing a working example.
assets/about_us.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<style type="text/css">
#font-face { font-family: 'B Homa'; src: url('fonts/BHOMA.TTF');}
#font-face { font-family: 'B Lotus'; src: url('fonts/BLOTUS.TTF');}
#font-face { font-family: 'B Lotus Bold'; src: url('fonts/BLOTUSBD.TTF');}
</style>
</head>
<body>
<p style="font-family:'B Homa';font-size:20px;">B Homa: مخصص</p>
<p style="font-family:'B Lotus';font-size:20px;">B Lotus: مخصص</p>
<p style="font-family:'B Lotus Bold';font-size:20px;">B Lotus Bold: مخصص</p>
</body>
</html>
BHOMA.TTF, BLOTUS.TTF and BLOTUSBD.TTF are downloaded from bornaray.com and stored in assets/fonts/ folder.
loadToWebView(), it is part of a Fragment, hence getActivity().getAssets():
private void loadToWebView() {
AssetManager assetManager = getActivity().getAssets();
try {
InputStream input = assetManager.open("about_us.html");
byte[] buffer = new byte[input.available()];
input.read(buffer);
input.close();
mWebView.loadDataWithBaseURL("file:///android_asset/",
new String(buffer), "text/html", "UTF-8", null);
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
And the result:
Hope this helps.
I need to change font-family to a custom one after loading html into WebView. Basically I need to get this:
<style>
#font-face {
font-family: 'MyFont';
src: url('file:///android_asset/Custom-Font.otf')
}
body { font-family: 'MyFont', serif; font-size: 17px; color: #000; }
a { color: #000; }
</style>
from
<style>
body { font-family: 'Helvetica', serif; font-size: 17px; color: #000; }
a { color: #000; }
</style>
Html is dynamically loaded, not from assets. I use Jsoup, but cannot get this font-family parameter so far...
JSoup does not parse the CSS for you. It ends up in a DataNode hanging off the style element. From there, you are on your own in terms of parsing. If you have a simple search and replace, you can use a regular expression to do the work. For complicated situations, you can look at a [CSS Parser][1]. Your situation looks relatively simple, but given just one exemplar it is hard to tell which elements you want preserved. Here is a sketch of the basic idea, you may need to modify to fully fit your situation. The basic idea is to get the DataNode from the Style tag and using a regex to search and replace the field.
final String newFontInfo = "#font-face { \n"
+ "font-family: 'MyFont';\n"
+ "src: url('file:///android_asset/Custom-Font.otf')\n" + "}\n";
Elements styles = doc.select("style");
for (Element style : styles) {
for (DataNode data : style.dataNodes()) {
String dataTxt = data.getWholeData();
if (dataTxt.contains("font-family")) {
final String newData = dataTxt.replaceAll("font-family:\\s*'[^']*'","font-family: 'MyFont'");
data.setWholeData(newFontInfo + newData);
}
}
}
Main.java:
Main instanceMain = this;
String Dataz = FN.getHtmlData(instanceMain,"BMitra",20,(getResources().getString(R.string.matn2)));
btne.loadDataWithBaseURL("file:///android_asset/", Dataz, "text/html", "utf-8", null);
FN.java:
public static String getHtmlData(Context context,String fontname,Integer fontsize, String data){
String head = "<head><style type=\"text/css\">#font-face {font-family: 'MYFNT';src: url('"+fontname+".ttf');} body {text-align:justify;font-family: 'MYFNT';color: Black;}</style></head>";
String htmlData= "<html>"+head+"<body dir=\"rtl\">"+data+"</body></html>" ;
return htmlData;
}
strings.xml:
<string name="matn2">
<![CDATA[
<html><body><b>سلام</b> non bold text . <b>english bold</b></body></html>
]]>
</string>
but bold tag not working and output is : سلام english bold . non bold text
by the way i found some report issue
in another way :
Main.java :
Main instanceMain = this;
String Dataz = FN.getHtmlData(instanceMain,getResources().getString(R.string.matn2)));
btne.loadDataWithBaseURL("file:///android_asset/", Dataz, "text/html", "utf-8", null);
FN.java:
public static String getHtmlData(Context paramContext, String paramString)
{
return "<!DOCTYPE HTML><html lang=\"fa-ir\" dir=\"rtl\"><head>" + "<link rel=\"stylesheet\" type=\"text/css\" href=\"justified_textview.css\" />" + "</head>" + " <body>" + paramString + "</body></html>";
}
justified_textview.css (in assest folder) :
/*#font-face {
font-family:"MyFont";
src:url('file:///android_asset/BMITRA.TTF');
}
#font-face {
font-family:"MyFont";
src:url('file:///android_asset/BMITRABD.TTF');
font-weight: bold;
}*/
#font-face {
font-family: 'Conv_BMITRA';
src: url('file:///android_asset/BMITRA.ttf');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'Conv_BMITRA';
src: url('file:///android_asset/BMITRABD.ttf');
font-weight: bold;
font-style: normal;
}
body {
font-family:'Conv_BMITRA';
text-align:justify;
line-height: 20pt;
color: Black;
}
and matn2(strings.xml) :
<string name="matn">
<![CDATA[
م ولادت توی وب با سی اس اس
normal text
<b>ولایت بولد م bold text</b>
]]>
</string>
and now its work on android 2.3.3 or 2.3.5 but not working on android 4.0.x
It's not possible, because of Webview rather than Android OS progress, is broken. If you set a custom font for Webview, in some device and Android OS it works and in some others not, unfortunately.
I ran into the same issue on a really large page I was displaying. Try setting the activity with the webview to android:hardwareAccelerated="false" in the manifest.