RTL

by Michelle Bu

HTML

<div dir="rtl">
  <span dir="ltr" class="this-should-be-ltr">(510) 555-1234</span>
  <div dir="ltr">(510) 555-1234</div>
  <div class="this-should-be-rtl">
    نص يستخدم (dir) من اليمين إلى اليسار.
  </div>
  <div class="this-should-be-rtl">
    (510) 555-1234
  <div class="this-should-be-rtl">
    A LTR string is still LTR though.
  </div>
  <div class="this-should-be-rtl">
    Even if it has numbers 123 45 in it, like this string.
  </div>
  <div class="this-should-be-rtl">
    How unpredictable! 123 45
  </div>
  <div class="this-should-be-rtl">
    A0A 0A0A
  </div>
  <div class="this-should-be-rtl">
    &#x200E;1234 5678 9012 3456
  </div>
  <div class="this-should-be-rtl">
    1234 5678 9012 3456s
  </div>
  <div class="this-should-be-rtl">
    s1234 5678 9012 3456
  </div>
</div>
<hr>
<div class="result">
  The direction of <code>.this-should-be-rtl</code> is <code id="result"></code>
</div>

CSS

.result {
  font-weight: 600;
}

code {
  color: blue;
}

JavaScript

document.getElementById('result').innerText = window.getComputedStyle(document.querySelector('.this-should-be-rtl')).direction