I'm developing an Android app that uses Arabic text. The text in TextView is being displayed using a custom font. The issue is that some of the pause marks are not displaying correctly. The same text, in the same font, displays flawlessly on the browser when I use HTML. But there are problems with Android TextView.
Browser display:
TextView display:
I've tried multiple solution including followings, but none works
Tried increasing letter spacing
Used same html code in textView with the help of Html.fromHtml method
defined font Family through xml as well as through Java typeface
Tried enabling/disabling Ligatures using fontFeatureSettings
I'm applying following style on textView
<style name="ArabicTextViewStyle">
<item name="fontFamily">#font/alquran_indopak_by_quranwbw_v_4_2_2</item>
<item name="singleLine">false</item>
<item name="android:textDirection">rtl</item>
<item name="android:textSize">30dp</item>
<item name="textAppearanceTitleMedium" />
</style>
HTML file is given below:
<html>
<head>
<style>
#font-face { font-family: JuneBug; src: url('AlQuran-IndoPak-by-QuranWBW.v.4.2.2.ttf'); }
h2, p {
font-family: JuneBug;
}
</style>
</head>
<body>
<h2>
صِرَاطَ الَّذِیْنَ اَنْعَمْتَ عَلَیْهِمْ ۙ۬— غَیْرِ الْمَغْضُوْبِ عَلَیْهِمْ وَلَا الضَّآلِّیْنَ
</h2>
</body>
</html>
I'm not sure why the same text and font appear correctly in the browser but not on Android. The text at both places is in UTF-8 encoding.
I've tried on the Android Studio emulator as well as on multiple physical devices, but the issue remains the same.
According to the answer here Arabic pronounce symbol not showing correctly
All Arabic characters can be encoded using a single UTF-16 code unit (2 bytes), but they may take either 2 or 3 UTF-8 code units (1 byte each), so if you were just encoding Arabic, UTF-16 would be a more space efficient option.
Check if this works and also try https://github.com/mobin-tabaran-intelligent-structure/MTTextView for your font.
Related
I possess two complementary fonts that are installed on my computer (Linux), and that are used to render every characters that the two fonts have.
I would have liked to use in the same way these fonts in Android. Unfortunately, I don't know how to do this (I know how to load one font).
I have tried to merge them with FontForge, but unfortunately I couldn't because the total number of glyphs is over 65535 glyphs (which is the limit of the sfnt format).
Is there a possibility to go over 65535 glyphs, so that the font can be used in Android?
If not, is there a way to use these fonts conjointly in Android in general, so that the characters not recognized by a font are recognized by the other (like my computer does)?
If not, is it possible to use two Typeface in a TextView, so that the characters not recognized by a font are recognized by the other?
I know that we can use Spannable to use different Typeface for different parts of the TextView, but that's not exactly my need here.
If not, is it possible to detect all the unrecognized characters of my TextView, so as to use the other font only for them?
Is it possible to use the CSS style "font-family" in a TextView, so as to provide an alternative font in the case the first fails for some characters?
Thanks to the direction given by JaiSoni, I have managed to find a way to solve my problem using HTML and CSS : I have used a WebView, and have declared the #font-face to define my fonts. Then, I have used them in the CSS attribute "font-family" like this :
<style type="text/css">
#font-face {font-family: MyFont; src: url("file:///android_asset/fonts/font.ttf")}
#font-face {font-family: MyFont2; src: url("file:///android_asset/fonts/font2.ttf")}
body {font-family: MyFont2, MyFont; }
</style>
Thank you very much.
I've tried like this:
For five spaces used: &#npsp; &#npsp; &#npsp; &#npsp; &#npsp; but it is not provided proper space for all lines in my passage and I thought it is a bad coding practice.
I've used , , , (someone wrote in Yahoo Answers). Although some are wrong in this but not anyone of this worked for me
I've used <pre> (my text)</pre> worked fine but the font of the text is changed to some ugly format of font.
<tab align=6> also used but not worked for me.
I am doing coding in webview in Android to display the text on the screen.
Can anyone please help me out to provide proper horizontal tab space in front my text.
Thank you..
You can use the CSS style text-indent to indent the text.
Add a style like text-indent: 40px to the element that contains the text, for example using the style attribute:
<p style="text-indent:40px"></p>
You can also put the CSS in a style sheet and load the style sheet in the webview. In the style sheet you can for example specify the text-indent for all paragraph tags:
p { text-indent: 40px; }
Another option is using the tag <blockquote></blockquote>. But it is not its intended use, it is meant for quoting text.
Html3 had a <tab> element that did not survive into html4 or html5.
However, it is easy to define this element in CSS:
tab:before {content:"\9"; white-space:pre;}
This has the correct content - a tab character with Unicode code 9, and preserved white space. The preserved white space setting only operates on that one character, so you can write html like this:
<div>
This is a<tab/><tab/><tab/>Test<tab/><tab/>and Test<br>
Another<tab/><tab/><tab/>Test<tab/><tab/>and Test<br>
Yet Another<tab/><tab/>Test<tab/><tab/>and Test
</div>
And everything will work as you expect.
See this jsfiddle for the same example.
By default css defines the width of a tab character to be 8 times the width of a space. But you can change this in modern browsers using the CSS tab-size property.
Okay, so I am creating this mobile website where I am trying to change the font-size and color of some text. Now, I have tested my code on my PC, iOS and Android (using Chrome browser) and only on the Android there seems to be a problem. When using an imported CSS document some settings will not change, but if I type then in directly into the element using the "style" attribute everything works.
Font
The font-size seems to have different levels as when I type in:
font-size: 31px;
it gives me this:
Hello
However if I were to change it to:
font-size: 30px;
the font size will now be like this:
Hello
Color
Also, the color on Android never seems to change as the color is always black. I have tried changing it to both other dark and bright colors without any success (note the colors are changing on both my PC and on iOS).
Override
I am thinking that there might be some sort of snippet of code which would override these default settings. If anyone of you have found one when importing CSS to a PHP/HTML doc or have any other solution it would gladly be appreciated!
your style is overwritten by some other CSS class or css styling use:
font-size: 30px !important;
thereby your styling will be applied over all other stylings thereby overwriting all predefined stylings
I have a simple line of text
<h4>This is just some placeholder junk</h4>
with the following CSS:
h4 {
font-size:20px;
color:#000000;
font-style:italic;
}
This is working in everything but the default browser on Android GS3.
I've tried wrapping the text in a span with font-style:italic;, as well as including <i> and <em> tags, but the font will not slant. Am I overlooking something simple here?
In terms of performance I would not recommend to use a custom font on mobile devices at all, unless there is really no other way. But this seems to be a problem caused by Samsung: https://code.google.com/p/chromium/issues/detail?id=169446#c11
So I think this is one of the rare situations where you should go with a custom font. Of course it should be a custom font that supports the italic font style. Don´t forget the font-styleproperty in the #font-face declaration.
#font-face {
...
font-style: italic, oblique;
}
I have a problem with a mobile website on Android Gingerbread and versions prior to this. Fonts monospace do not exactly behave as monospaces should: different characters have different widths.
This is how it looks on a Gingerbread default web browser (I also tested on Dolphin and Opera mini):
This is how it looks on a ICS default web browser:
I used the Cultive Mono downloaded from the web.
<link href='http://fonts.googleapis.com/css?family=Cutive+Mono' rel='stylesheet' type='text/css'>
CSS:
#my_id span{font:12px 'Cutive Mono', serif; line-height:1.6}
I also tried the default monospace font from the OS:
#my_id span{font:12px monospace; line-height:1.6}
Does anybody know how can this issue be solved? I really need a monospace working on my mobile website.
Thanks in advance.
edit
This would be an example in jsfiddle: http://jsfiddle.net/HerrSerker/dE94s/9/
Found a fix for my case, it's seems that Andorid don't render fonts if one is missing.
this don't work:
font-family: FreeMono, Courier, monospace;
but work if I use:
font-family: FreeMono, Courier, monospace;
font-family: monospace;
In this code probably second rule overwrite the first one.
Just another weird thing with browsers, if anybody explain this or give more details, I'll give him a bounty.
This sample works fine on my 2.3.3 (SDK Lvl 10) android emulator:
http://jsfiddle.net/dE94s/3/
CSS
#import url(http://fonts.googleapis.com/css?family=Cutive+Mono);
.cutive_block {
font-family: 'Cutive Mono', Courier, monospace;
}
.monospace_block {
font-family: monospace;
}
HTML
<div>
Some default text
</div>
<div class="cutive_block">
Some text in cutive mono
</div>
<div class="cutive_block">
And a second line that shows it's monospace
</div>
<div class="monospace_block">
Some text in default monospace
</div>
As you can see in the second and third line which uses your custom font is monospaced.
So I guess just use font-family css attribute with correct fallback font types:
font-family: 'Cutive Mono', Courier, monospace;
as suggested here http://www.w3schools.com/cssref/css_websafe_fonts.asp
I realize it may be late, but I was having trouble with Google Fonts and found a workaround: Mononoki and Adobe's Source Code Pro have all characters, including box drawing.
The problem with Google is that some gliphs are missing.