Search code examples
javascripthtmlarabicright-to-left

"dir"-Input RTL but with LTR measurement data | "فثسف 3 cm فثسف" should be (فثسفy 3 cm فثسف)

Do someone know if this is an issue of the browser, the windows language or something in general?

I installed on my computer a second language called "Arabic (Saudi Arabia) Arabic (101) keyboard".

German (Germany) and Arabic (Saudi Arabia) keyboards

And if I enter a text like "test 3cm test" (for "3cm" I switch to German keyboard) its more or less correct. - with dir="rtl".

RTL sentence

When I'm using ltr as dir it looks like when I'm copy&pasting it here.

فثسف 3cm فثسف

And now the (main) question. When I add a space between 3 and cm it will be vice versa.

RTL sentence

Do you know if it's possible to handle it with JavaScript or HTML like my picture modification below?

This is how it should look like

Or is it a language behaviour?

Thanks in Advance! :-)

What did I tried?

  1. Using auto in dir

<html dir="rtl" lang="ar">
<body>
  <input type="text" dir="auto" style="text-align: left;" value="فثسف 3 cm فثسف" />
</body>
</html>

And this.

<html dir="rtl" lang="ar">
<body>
  <input type="text" dir="auto" style="text-align: right;" value="فثسف 3 cm فثسف" />
</body>
</html>

The value comes from this workflow.

  1. Switch to Arabic (RTL language)
  2. Write "test "
  3. Switch to German (LTR language)
  4. Write "3 cm "
  5. Switch to Arabic (RTL language)
  6. Write "test"
  7. Strg + A in the Input and put it into value="STRG + V"
Solution

  • I used @alex-cohn idea with &lrm; and &rlm; tags and developed something what I need 😎

    var ltrMarkThere = false;
document.getElementById("test").addEventListener("keydown", function testKey(e) {
  if(e.key.match(/[0-9]/)) {
    document.getElementById("test").value += "\u202a";
    ltrMarkThere = true;
  } else if(ltrMarkThere && e.key.charCodeAt(0) > 127) {
    document.getElementById("test").value = document.getElementById("test").value.replace(/( ?)$/, "\u202c$1");
    ltrMarkThere = false;
  }
});
    <html dir="rtl" lang="ar">
  <head>
  </head>
  <body>
    <input id="test" type="text" style="direction: rtl; text-align: right;" autocomplete="off" autofocus="true" value="فثسف ‪3 cm‬ فثسف" />
    <!-- There is a hidden UTF8 Right-to-left-mark and hidden UTF8 Left-to-right-mark which allows to have it like this 😊 -->
  </body>
</html>