Displaying Arabic text

Question

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

I have tried to display this using direction:rtf, however, it only seems to display it correctly when you append some arabic text to it. Run 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>

Is there a reliable way of achieving this? I tried to add an arabic whitespace character, but there doesn't seem to be one

Thanks in advance

Answer 1

left-to-right mark ‎ can control this:

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>

Answer 2

Well, I was able to achieve this by adding a space between the number and the percent sign. Not sure it's 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>

Answer 3

Thanks for suggestions. I actually found an empty arabic character &#1564, and adding that in front fixes it

var arblank = "؜"
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>

Answer 4

The best fix for this when displaying Arabic text that has a non-Arabic character at the end is to include the Unicode RTL code after the non-Arabic character.

This happens when placing Neutral Characters such as punctuation between different directional text runs. For example, the Arabic Unicode Table does not have the equivalent codes for the characters ! @ # $ % * &

When you add any of these Latin characters to the end of Arabic text, that character positions itself correctly to the right of the Arabic text (i.e. before the Arabic text reading from right to left); this is incorrect according to the direction of the Arabic text.

By adding the Unicode for RTL "\u200F" after the Neutral Latin Char; you instruct that the Latin char maintains RTL as the remaining text; this will fix the problem. This works irrespective of the original direction of the sentence be it RTL or LTR because the Arabic characters always take the RTL direction.

This also allows combining RTL and LTR text in the same sentence.

Here are 2 examples with and without the RTL Unicode:

let Arabic = "هلا";            // Arabic text will always display in the right direction
let Output1 = Arabic + " %";  // add Neutral Latin Char to end 
let Output2 = Arabic + " %&"; // add Neutral Latin Char to end
let Output3 = Arabic + " *";  // add Neutral Latin Char to end

console.log("Output without the RTL Unicode:")
console.log(Output1);    // "هلا %"  This is incorrect output
console.log(Output2);    // "هلا %&" This is incorrect output
console.log(Output3);    // "هلا *"  This is incorrect output

//---------------------
let RTL = "\u200F";                   // The RTL Unicode
let Output_1 = Arabic + " %" + RTL;   // add Neutral Latin Char to end + RTL
let Output_2 = Arabic + " %&" + RTL;  // add Neutral Latin Char to end + RTL
let Output_3 = Arabic + " *" + RTL;   // add Neutral Latin Char to end + RTL

console.log("Output with the RTL Unicode:")
console.log(Output_1);
console.log(Output_2);
console.log(Output_3);

You can read more about it the RTL Unicode here: https://www.w3.org/TR/WCAG20-TECHS/H34.html