title: Displaying Arabic text
body: <p>I would like to display <strong>25%*</strong> in arabic, which should look like this: *%25</p>
  
  <p>I have tried to display this using <em>direction:rtf</em>, 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:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var arabicword = "إلى";
  var percent = "25%*";
  
  document.getElementById('text2').innerHTML = arabicword+" "+percent;
  document.getElementById('text1').innerHTML = percent;</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.text {
    font-size:3em;
    width:300px;
    color:white;
    background: grey;
  }
  
  .arabic{
    background:green;
    direction:rtl;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="text1" class="text arabic"&gt;0&lt;/div&gt;
  &lt;br&gt;
  &lt;div id="text2" class="text arabic"&gt;0&lt;/div&gt;</code></pre>
  </div>
  </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</p>
  
  <p>Thanks in advance</p>