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

user_10423583 0
Viewed 391

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"
right-to-left arabic html javascript
2 Answers

The question is how far you are ready to go. You can wrap 3 cm with <span> tag and then it will be layed out independent of everything around it,

<div dir="rtl">فثسف <span dir="ltr">3 cm</span> فثسف</div>

Or you can insert &lrm; and &rlm;, or some direction-override chracters:

<div dir="rtl">فثسف &lrm;3 cm&rlm; فثسف</div>

user_1923730

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>

user_104235830
Related