I am making an android app in phonegap, It contains arabic and english text. I am also using arabic font, and changing fonts is working fine, in web browser the arabic text looks fine but in android device "HTC One V" that i am using for testing is not displayed as it should be, the file is saved in UTF-8 . Can any one please tell me how can I display Arabic text properly in phonegap. Thanks
بِسْمِ اللَّهِ الرَّحْمَٰنِ الرَّحِيم
<li class="arabic">ٱللَّهُ لَآ إِلَـٰهَ إِلَّا هُوَ ٱلۡحَىُّ ٱلۡقَيُّومُۚ لَا تَأۡخُذُهُ ۥ سِنَةٌ۬ وَلَا نَوۡمٌ۬ۚ لَّهُ ۥ مَا فِى ٱلسَّمَـٰوَٲتِ وَمَا فِى ٱلۡأَرۡضِۗ مَن ذَا ٱلَّذِى يَشۡفَعُ عِندَهُ ۥۤ إِلَّا بِإِذۡنِهِۦۚ يَعۡلَمُ مَا بَيۡنَ أَيۡدِيهِمۡ وَمَا خَلۡفَهُمۡۖ وَلَا يُحِيطُونَ بِشَىۡءٍ۬ مِنْ عِلۡمِهِۦۤ إِلَّا بِمَا شَآءَۚ وَسِعَ كُرۡسِيُّهُ ٱلسَّمَـٰوَٲتِ وَٱلۡأَرۡضَۖ وَلَا يَـُٔودُهُ ۥ حِفۡظُهُمَاۚ وَهُوَ ٱلۡعَلِىُّ ٱلۡعَظِيمُ <span class="ui-li-count">١</span></li>
</ul>
and here is my css for arabic font
/*custom arabic fornt*/
@font-face {
font-family: "customfont";
src: url(../../../fonts/ar-Othmani.ttf) format("truetype");
}
.arabic {
margin: 0;
-webkit-touch-callout: none; /*prevent callout to copy image, etc when tap to hold*/
-webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */
-webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */
font-family: "customfont" !important;
font-size:25px;
font-weight: normal !important;
}
