I have tried many examples and non of them are work.Here is what i want to do. I have a phonegap eclipse project.here is the project structure
I want to add custom language for my project. here is my MainActivity.java
import org.apache.cordova.DroidGap;
import android.os.Bundle;
public class MainActivity extends DroidGap {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.loadUrl("file:///android_asset/www/index.html");
}
}
Here is my index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum- scale=1, minimum-scale=1, width=device-width;" />
<title>Directory Reader</title>
<link rel="stylesheet" href="jquery/jquery.mobile-1.1.1.min.css" />
<script src="jquery/jquery-1.8.0.min.js"></script>
<script src="jquery/jquery.mobile-1.1.1.min.js"></script>
<script type="text/javascript" src="cordova-2.0.0.js"></script>
<style type="text/css">
#font-face {
font-family: MyCustomFont;
src: url("NotoSansSinhala-Regular.eot") /* EOT file for IE */
}
#font-face {
font-family: MyCustomFont;
src: url("NotoSansSinhala-Regular.ttf") /* TTF file for CSS3 browsers */
}
body {
font-family: MyCustomFont, Verdana, Arial, sans-serif;
font-size: medium;
color: black
}
</style>
</head>
<body>
<p> test goda </p>
</div>
</body>
</html>
Still font that i want to display is not showing on the mobile device.its shows english characters "test goda". any idea how to slove this?
You would basically need to root the device to install Sinhala text on Android 4.4 , but it works on Android 5.0+
You would basically need below steps :
Copy the font files to /system/fonts
Download the fallback_fonts.xml file from /etc
Open the fallback_fonts.xml file and modify it by adding your font
names .Copy the file back to the /etc directory.
Change the permissions of your fallback_fonts.xml file AND the font
files to 644 or -rw-r–r–
Plese see read instructions with screenhots here
Related
I'm working on a reader, and we used to work on epub2, and I working on pagination effect using CSS file. I have recently received an ePub 3 file and it does not abide by the CSS rules that I have provided, although it works correctly when tried on Play Books android app.
Note that I have manipulated several features related to web view such as:
testWV.getSettings().setUseWideViewPort(true);
testWV.getSettings().setLoadWithOverviewMode(true);
and this is the paging CSS used which as mentioned before works perfectly on epub2 files
html {
height:heightplaceholderpx; //set dynamically depending on phone screen size
width:100%;
}
body {
margin:0px;
padding:0px;
width:100%;
pointer-events: none;
}
#viewer {
width:widthplaceholderpx;
height:heightplaceholderpx;
}
#book {
width:widthplaceholderpx;
height:heightplaceholderpx;
margin-left:50px;
margin-right:50px;
margin-top:10px;
-webkit-column-count:auto;
-webkit-column-width:widthplaceholderpx;
-webkit-column-gap:100px;
text-align:justify;
}
.h {
margin-top:60px;
margin-left:100px;
margin-right:100px;
}
img {
max-width: 100%;
height:auto;
}
This is how I'm integrating the CSS file:
<?xml version="1.0" encoding="UTF-8"?>
<!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>
<link rel="stylesheet" href="columnPaging.css" type="text/css" media="screen"/>
headplaceholder //the header extracted from the xhtml file of the book
</head>
<body>
<div id="viewer">
<div id="book">
bodyplaceholder //the body extracted from the xhtml file of the book
</div>
</div>
</body>
</html>
Like you can see you use this var widthplaceholderpx in his css. Normally it should be override it in the Java code. But when the bodyplaceholder was add to the body in the HTML I needed to override the widthplaceholderpx again. So the css would know what the actual height was.
I'm trying to define a title for a <select> tag which is read by the Android screen reader, mostly called "Talkback". On my test device (Galaxy S8+) it's called "Voice Assistant".
Interestingly, the following HTML works with NVDA (PC) and with VoiceOver (iOS), but I don't have any idea why it doesn't work on Android.
Here's the minimal example as HTML page:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Test</title>
<style>
form{
background: red;
margin: 5px 0;
}
label,
select{
display: block;
margin: 10px 0;
}
</style>
</head>
<body>
Test link
<form action="/en" method="post" accept-charset="UTF-8">
<label name="edit-destination-1-label" id="edit-destination-1-label" for="edit-destination-1">Choose language</label>
<select id="edit-destination-1" name="edit-destination-1" aria-labelledby="edit-destination-1-label">
<option value="/de">German</option>
<option value="/fr">French</option>
<option value="/en" selected="selected">English</option>
</select>
</form>
Test link
</body>
</html>
As you can see it's just a reference of for and id as well as a reference of aria-labelledby.
Does anyone know a solution here? I just want the Android screen reader to speak "Choose language" and when you activate it, it should jump to the select menu.
For a working example reference take the post.ch page, section "calculate prices". When you navigate to it with Android it reads "Country" before the <select>.
EDIT What I've done to solve the problem temporary is to use a link instead of a label, as this works.
I try to read epub file content to convert book formats using phonegap technology.i found examples using phonegap as shown below link:
http://bytedebugger.wordpress.com/2014/05/21/cordovaphonegap-ebook-reader-for-web-and-mobile-with-epub-js-plugin/
In this examples i am tries to implements basic epub example.I tries code as shown below :
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Basic ePubJS Example</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- EPUBJS Renderer -->
<script src="../build/epub.min.js"></script>
<!-- Zip JS -->
<script src="../build/libs/zip.min.js"></script>
<!-- Inflate JS -->
<script src="../build/libs/inflate.js"></script>
<script>
EPUBJS.filePath = "../build/libs/";
</script>
<script>
var Book = ePub("content.epub");//here epub file path given
</script>
</head>
<body>
<div id="main">
<div id="prev" onclick="Book.prevPage();" class="arrow">‹</div>
<div id="area"></div>
<div id="next" onclick="Book.nextPage();"class="arrow">›</div>
</div>
<script>
Book.renderTo("area");
</script>
</body>
</html>
Error : The operation is insecure. undefined
The above example not gets any output it shows empty.I didn't get any idea about this.So can you please suggest me what to do for this?
Thanks in Advance.
First, reading this documentation: https://github.com/futurepress/epub.js/blob/master/README.md you will see an important part:
If you plan on using compressed (zipped) epubs (any .epub file)
include the minified version of zip.js
Also make sure to set EPUBJS.filePath to the directory containing inflate.js
<script src="/build/libs/zip.min.js"></script>
<script>
EPUBJS.filePath = "../build/libs/";
</script>
So, the first thing you need to do is to add theses libs.
Some browsers can block the access of a file, so if you have problems, maybe you will need to use it with a web server.
I'm trying to use a customized Roboto font for Arabic but fail to get it rendered properly in a PhoneGap/Android application:
On Galaxy ACE (Android 2.3.2), my application renders properly Arabic characters (see image#1).
On Galaxy S3 and S4 (Android 4.3), my application renders Arabic characters using the default font (see image#2).
Image#1
Image#2
html page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
#font-face {
font-family: 'ArabicFont';
src: url("fonts/KacstTitle.ttf") format("truetype");
}
#font-face {
font-family: 'LatinFont';
src: url("fonts/DejaVuSerif.ttf") format("truetype");
}
.arabicText {
font-family: ArabicFont;
direction: rtl;
}
.latinText {
font-family: LatinFont;
direction: ltr;
}
.center {
text-align: center;
}
</style>
</head>
<body>
<div id="main">
<div id="libreOfficeRendering" class="center">
<hr/>
<label>LibreOffice Rendering</label>
<hr/>
<img src="images/libreOfficeRendering.png">
</div>
<br/>
<br/>
<div id="googleChromeRendering" class="center">
<hr/>
<label>Google-Chrome Rendering</label>
<hr/>
<img src="images/googleChromeRendering.png">
</div>
<br/>
<br/>
<div id="androidAndPhoneGabRendering" class="center">
<hr/>
<label>Actual Rendering</label>
<hr/>
<pre class="arabicText">أنا نص بحروف عربية (KacstTitle).</pre>
<pre class="latinText">I'm a text in Latin characters (DejaVu Serif).</pre>
</div>
</div>
</body>
</html>
Try testing something like this to see if it is possibly an issue with <pre> tags and/or html:
<span class="arabicText">أنا نص بحروف عربية</span>
<pre class="arabicText">أنا نص بحروف عربية</pre>
<span class="arabicText">أنا نص بحروف عربية</span>
<pre class="arabicText">أنا نص بحروف عربية</pre>
If any of those render correctly on the device in question maybe it can help narrow down the issue.
Another possibility is a strange thing I encountered recently where in certain browsers (seemingly at random), fonts defined by #font-face would not render unless I formatted the font-family name exactly the same including punctuation when using it later. So you could try wrapping the font-family in quotes in all instances:
#font-face {
font-family: 'ArabicFont'; /* has quotes */
src: url("fonts/KacstTitle.ttf") format("truetype");
}
.arabicText {
font-family: 'ArabicFont'; /* has quotes */
direction: rtl;
}
Or removing quotes in all instances:
#font-face {
font-family: ArabicFont; /* no quotes */
src: url("fonts/KacstTitle.ttf") format("truetype");
}
.arabicText {
font-family: ArabicFont; /* no quotes */
direction: rtl;
}
Hopefully one of those will help you out. Last thought - is there possibly a capitalization difference in the file name between what you are referencing and how it's actually saved?
I am new one Android..i created one project in Html...it is running perfectly what i want..i want to run this html project in android emulator..i dont know what is the reason..... Design is came in Android emulator....but drag and drop is only not working in android Emulator.. i have used phonegap to run the html code..if u know pls tel me..Thanks in advance..
This is my Html(jquery code)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo by scaillerie</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
.ui-layout-center {
width: 400px;
height: 300px;
border: 1px solid black;
}
.ui-state-hover {
background-color: #f9ffff;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
jQuery(function() {
jQuery(".component").draggable({
// use a helper-clone that is append to 'body' so is not 'contained' by a pane
helper: function() {
return jQuery(this).clone().appendTo('body').css({
'zIndex': 5
});
},
cursor: 'move',
containment: "document"
});
jQuery('.ui-layout-center').droppable({
activeClass: 'ui-state-hover',
accept: '.component',
drop: function(event, ui) {
if (!ui.draggable.hasClass("dropped"))
jQuery(this).append(jQuery(ui.draggable).clone().addClass("dropped").draggable());
}
});
});
});//]]>
</script>
</head>
<body>
<div class="component">Element 1</div>
<div class="component">Element 2</div>
<div class="ui-layout-center"> </div>
</body>
</html>
Unfortunately, jQuery UI doesn't work properly with touch events. There are, however, a number of plugins to enable touch in jQuery UI, Touch Punch is one: http://touchpunch.furf.com/
You should also consider updating the version of jQuery you're using...v1.4.4 is 3 years old now.