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?
Related
I've noticed a strange behavior on a CSS animation, when I viewed my webpage on an Android device.
When I scroll up and down a few timer while the animation is running, the whole page starts to flicker. It's reproducable (even tough a bit finicky).
This YouTube-video shows the effect:
https://www.youtube.com/watch?v=tOVEDxiHQ-k&t=10s
I removed more and more code from my page until I found the culpit. It's the "#keyframes"-part of the animation. If I'd leave this part out, everything works fine, but as I want the animation: What's the real problem here?
Here is a minimal version of my source code that reproduces the problem:
<!DOCTYPE html>
<html lang="en" class="bg-gray-700">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Just a simple page</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
.progressbar {
animation: progressbar-countdown;
animation-duration: 60s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-play-state: running;
animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
}
#keyframes progressbar-countdown {
0% {
width: 100%;
background: #4F4;
}
100% {
width: 0;
background: #F00;
}
}
</style>
</head>
<body class="font-sans antialiased overflow-y-scroll">
<header class="bg-gray-900">
<div class="max-w-7xl mx-auto py-2 sm:py-4 px-4 sm:px-6 lg:px-8 h-12">
<h2 class="text-white">Test</h2>
</div>
</header>
<div class="relative" id="countdownBar">
<div class="h-2 mb-4 text-xs bg-indigo-100">
<div class="progressbar shadow-none h-2 whitespace-nowrap text-white justify-center bg-primary-500" id='progressbar3'></div>
</div>
</div>
<main>
<h1 class="mt-4 text-white">This is a Test</h1>
<div style="height: 750px;">
Scrolling
</div>
</main>
</body>
</html>
I have a 1513x1079 image which resizes great when I resize my desktop browser.
However, when I open the same webpage on my android phone, everything shows up great, except the image. The whole page resizes properly, but there is no picture. There is only a tiny picture icon in the upper left corner.
Is there some upper limit to image dimensions for phones?
If so, why is there such a limit?
Does image responsiveness have some sort of dimension limit?
HTML Code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name = "viewport" content = "width=device-width, initial-scale = 1"/>
<title>Projects web page</title>
<link rel="stylesheet" href="bootstrap.min.css"/>
<script src="jQuery-3.3.1.min.js"></script>
<script src="bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class = "container-fluid">
<div class = "row">
<div class = "col-md-6" id = "picture">
<img src="R1lr_cut.jpg" alt = "R1 Engine" class = "responsive"/>
</div>
<div class = "col-md-6" id = "home_text">
<h1>Inline 4 Engines</h1>
<ul id = "links">
<li>Home</li>
<li>Details</li>
<li>Calculate</li>
<li>About</li>
</ul>
<div id = "filler_text">
<h4>Historic information</h4>
<p>
The first across-the-frame 4-cylinder motorcycle was the 1939 racer Gilera 500 Rondine, it also had double-over-head camshafts, forced-inducting supercharger and was liquid-cooled.
</p>
<p>
Modern inline-four motorcycle engines first became popular with Honda's SOHC CB750 introduced in 1969, and others followed in the 1970s.
Since then, the inline-four has become one of the most common engine configurations in street bikes.
</p>
<p>
Outside of the cruiser category, the inline-four is the most common configuration because of its relatively high performance-to-cost ratio.
</p>
<p>
The success of the Honda CB750 and the Kawasaki Z1 got the attention of the Germans over at BMW. The Honda especially had been an industry game changer.
BMW’s motorcycle engine at that time was a horizontally opposed “boxer” twin cylinder engine that the company had settled on when they reverse engineered a British Douglas motorcycle with a boxer engine mounted longitudinally in the frame at the end of the First World War.
</p>
</div>
</div>
</div>
</div>
</body>
</html>
CSS Code :
body {
background-color: #000000;
}
.responsive {
width:100%;
height: auto;
}
#picture {
padding-right: -10%;
padding-top: 3%;
width: 100%;
}
#links li{
list-style-type: none;
float:left;
/*outline : 1px solid yellow;*/
width: 14%;
margin-right: 11%;
padding-top: 0.5%;
padding-bottom: 0.5%;
}
#links{
/*outline: 1px solid red;*/
width: 100%;
padding-left: 0.5%;
}
a {
/*outline :1px solid green;*/
display: block;
text-align: center;
padding: 3%;
color: #666666;
}
a:hover {
background-color: #333333;
color:#66ccff;
}
#home_text {
background-color: black;
padding-top: 8%;
color: #FFFFFF;
padding-left: 0%;
}
#home_text h1 {
margin-left: 5%;
/*outline: 1px solid purple*/
}
#filler_text {
padding-top: 12%;
margin-left: 5%;
}
Make sure your image size is set in percents, not in pixels or anything else.
Example:
<img src="yourimage.png">
<style>
img{width: 100%; /*100 can be any, but will fit 100% of the block*/}
</style>
You can also make your image a block background: `
myimg{background-image: url(“pic.jpg”); background-size: cover;}
Sorry if syntax is wrong, just typing from my phone. Also you can try doing like this instead of making it a block:
img{display: inline-block;}
`
If this doesn’t help change inline-block to block.
I have a nodogsplash version 0.9_beta9.9.9 installed on OpenWRT 15.05.01 device and they work well when I'm using the browser (mozzila, chrome) to access the captive portal and after click to 'Continue' they redirect me to pre-setting page.
This is my code:
`<!DOCTYPE html>
<html>
<head>
<!--
A client is authenticated by requesting the page $authtarget.
So, href to it here, with an img or link text the user can click on
Alternatively submit an HTTP form method=get, passing $authaction,
Also, note that any images you reference must reside in the
subdirectory that is the value of $imagesdir (default: "images").
Available variables:
error_msg: $error_msg
gatewayname: $gatewayname
tok: $tok
redir: $redir
authaction: $authaction
denyaction: $denyaction
authtarget: $authtarget
clientip: $clientip
clientmac: $clientmac
gatewaymac: $gatewaymac
nclients: $nclients
maxclients: $maxclients
uptime: $uptime
imagesdir: $imagesdir
pagesdir: $pagesdir
Additional Variables that can also be passed back via HTTP get.
Or just append them to the authentication link:
nodoguser
nodogpass
info
voucher
-->
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalida
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel='shortcut icon' href='$imagesdir/splash.jpg' type='image/x-icon'
<title>$gatewayname Entry</title>
<style>
body
{
background-color:lightgrey;
color:black;
margin-left: 5%;
margin-right: 5%;
text-align: left;
}
img
{
width: 40%;
max-width: 180px;
margin-left: 0%;
margin-right: 5%;
}
input[type=submit]
{
color:black;
margin-left: 0%;
margin-right: 5%;
text-align:left;
font-size: 1.0em;
line-height: 2.5em;
font-weight: bold;
border: 1px solid;
}
</style>
</head>
<body>
<b>Funz Hotspot Gateway.</b>
<br>
<br>
<b>
<img src="$imagesdir/splash.jpg" alt="Splash Page:For access to the Interne
<hr>
<span style="color:red; font-style:normal;">
Bem Vindo!
</span>
</b>
<hr>
<br>
<b>Por favor, para acessar a internet clique em continuar.</b>
<br>
<br>
<hr>
<form method='get' action='$authaction' target='_blank'>
<input type='hidden' name='tok' value='$tok'>
<input type='hidden' name='redir' value='http://webapp.funz.com.br'>
<input type='submit' value='Continue'>
</form>
<hr>Copyright (C) 2004-2016. This software is released under the GNU GPL l
</body>
</html>
`
But the real problem is when I click to submit the form (see below) on a mobile device and the login "pop-up" closes instantly and I am not redirected to setting URL, But when I use the browser on the android device the redirect to the setting URL well.
<form method='get' action='$authaction' target='_blank'>
<input type='hidden' name='tok' value='$tok'>
<input type='hidden' name='redir' value="http://webapp.funz.com.br">
<input type='submit' value='Continue'>
</form>
Some One had some idea to solve this problem with the redirect to a URL with the nodogsplash Captive Portal on a Mobile devices.
Thanks Until now.
This is a default behavior of android captive network assistant. It is very specific about its functionality and one feature is, that when it finally detects it got connected to the internet, it immediately closes itself. It doesnt happen on iOS devices and older androids though.
You might want to try send the form with ajax and redirect manually, this way I think I have achieved holding the page longer, but I am not sure now why I abandoned this solution. Probably because some misbehavior on other devices.
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
Developing an android app in html5(phonegap) and I had to use a scrollView. Could find anything in html5 as we have in Java so I'm trying to use the library iScroll which served the purpose of scrolling but as I scroll down it bounces back to top, I suppose it is called rubber-band-effect. How do I handle this glitch? Plus as I scroll down by dragging I get a warning in Logcat:
W/webview(2795): Miss a drag as we are waiting for WebCore's response for touch down.
Check my following code in which the list items are getting dynamically added which should not be the issue, the problem IMO lies in html itself.
<!DOCTYPE html>
<html>
<head>
<title>Storage Example </title>
<link rel="stylesheet" type="text/css" href="indexCss.css" />
<style type="text/css" media="all">
body,ul,li {
padding:0;
margin:0;
border:0;
}
</style>
<script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script>
<script src="index.js" type="text/javascript" charset="utf-8" >
</script>
</head>
<body>
<header>
<input type="text" id="name" placeholder="enter name" />
<input type="button" value="Add" onclick='Add();' />
</header>
<div id="wrapper">
<div id="scroll-content">
<div id="result"></div>
</div>
</div>
<footer>
Some Footer Content
</footer>
<script type="text/javascript" src="iscroll.js"></script>
<script type="text/javascript">
var theScroll;
function scroll() {
theScroll = new iScroll('wrapper');
}
document.addEventListener('DOMContentLoaded', scroll, true);
</script>
</body>
</html>
I had this problem solved, removing the height:100%; property from my wrapper.
bottom:0; made sure the wrapper stretched all the way to the bottom of the screen.
Try this:
scroll = new iScroll(this, {
useTransform: false,
useTransition: true
});
If does not work, go through this:
https://groups.google.com/forum/#!topic/iscroll/CMB9d_e5d4Y
This problem occurs when you have a container div for your wrapper The fix for this is to set the height of the container to 99%.
Following is the CSS which finally fixed this issue for me:
#productsScreen{ /* my container */
height: 99%;
z-index: 1;
top: 0px;
left: 0;
overflow: auto;
}
#productListWrapper{
background:transparent;
position:absolute;
z-index:1;
top: 88px;
bottom:49px;
left:0;
width:100%;
overflow:auto;
}
#productsListScroller {
position:absolute; z-index:1;
-webkit-tap-highlight-color:rgba(0,0,0,0);
width:100%;
padding:0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
Hope that helps!
Had the same issue and after sweet midnight debugging fount that my wrapper was resizing for some reason to height way bigger than the phone screen. Im using jquery mobile paging and somehow it was messing with the iScroll. Here is how i solved it:
HTML
<div id="screen" data-role="page">
<div data-role="content">
<div id="list-wrapper">
<ul>
...
</ul>
</div>
</div>
<div data-role="footer">
...
</div>
</div>
JS
// the iScroll should be initialized after the page is visible
// to prevent bug with display:none. If you are not using
// jQuery mobile paging this can be skipped.
$('#screen').on('pageshow', function() {
// calculate the expected height of the real content wrapper and set it
var screenHeight = $('#screen').height();
var footerHeight = $('#screen [data-role="footer"]').height();
var realContentHeight = screenHeight - footerHeight;
$('#list-wrapper').css({'height': realContentHeight + 'px'});
// create or refresh the iScroll after resizing the wrapper
if (myScrollFunction != null ) {
setTimeout(function () {
myScrollFunction .refresh();
}, 100);
} else {
setTimeout(function () {
myScrollFunction = new iScroll('list-wrapper');
}, 100);
}
});