Displaying Arabic Text

Question

Displaying Arabic Text

I would like to display 25% * in Arabic style, which should look like this: *% 25

I tried to display this using the: rtf direction, however it seems to display correctly when you add some Arabic text to it. Follow the snippet below to see what I mean:

var arabicword = "إلى";
var percent = "25%*";

document.getElementById('text2').innerHTML = arabicword+" "+percent;
document.getElementById('text1').innerHTML = percent;

.text {
  font-size:3em;
  width:300px;
  color:white;
  background: grey;
}

.arabic{
  background:green;
  direction:rtl;
}

<div id="text1" class="text arabic">0</div>
<br>
<div id="text2" class="text arabic">0</div>

Run code Hide result

Is there a reliable way to achieve this? I tried adding arabic space character, but there seems to be no one

Thank you in advance

+3

javascript html css right-to-left arabic

friendlygiraffe June 22. 17 at 16:32

source to share

3 answers

Alex K. · Answer 1 · 2017-06-22T16:47:22+0000

a left-to-right label &lrm;

can control this:

var arabicword = "إلى";
var percent = "25&lrm;%*"

document.getElementById('text2').innerHTML = arabicword+" "+percent;
document.getElementById('text1').innerHTML = percent;

.text {
  font-size:3em;
  width:300px;
  color:white;
  background: grey;
}

.arabic{
  background:green;
  direction:rtl;
}

<div id="text1" class="text arabic">0</div>
<br>
<div id="text2" class="text arabic">0</div>

Run code Hide result

sorayadragon · Answer 2 · 2017-06-22T16:41:47+0000

Well, I was able to achieve this by adding a space between the number and the percent sign. Not sure if this is the best way, but its reliable.

var arabicword = "إلى";
var percent = "25 %*";

document.getElementById('text2').innerHTML = arabicword+" "+percent;
document.getElementById('text1').innerHTML = percent;

.text {
  font-size:3em;
  width:300px;
  color:white;
  background: grey;
}

.arabic{
  background:green;
  direction:rtl;
}

<div id="text1" class="text arabic">0</div>
<br>
<div id="text2" class="text arabic">0</div>

Run code Hide result

friendlygiraffe · Answer 3 · 2017-06-22T16:56:35+0000

Thanks for the suggestions. I actually found an empty Arabic character & # 1564 and adding that before it fixes it

var arblank = "&#1564;"
var arabicword = "إلى";
var percent = "25%*";

document.getElementById('text2').innerHTML = arabicword+" "+percent;
document.getElementById('text1').innerHTML = arblank+percent;

.text {
  font-size:3em;
  width:300px;
  color:white;
  background: grey;
}

.arabic{
  background:green;
  direction:rtl;
}

<div id="text1" class="text arabic">0</div>
<br>
<div id="text2" class="text arabic">0</div>

Run code Hide result

Displaying Arabic Text

More articles: