How to change the text direction of an element?

Question

On Facebook, for example, if you have chosen the Arabic language for your keyboard, the textbox automatically gets RTL direction.

How can I implement this on my web application? I don't know the method or property used.

Answer 1

You can use the CSS direction property to achieve this:

input{
  direction: rtl;
}

Update

To change the direction of the text dynamically based on the user input you can check the first character of input to see if it meets a given criteria, in this case a regular expression.

$('input').keyup(function(){
    $this = $(this);
    if($this.val().length == 1)
    {
        var x =  new RegExp("[\x00-\x80]+"); // is ascii

        //alert(x.test($this.val()));

        var isAscii = x.test($this.val());

        if(isAscii)
        {
            $this.css("direction", "ltr");
        }
        else
        {
            $this.css("direction", "rtl");
        }
    }

});

This is a basic example that uses ltr direction for ascii text and rtl for everything else.

Here's a working example.

Answer 2

In HTML5 you can simply do this:

<input type="text" dir="auto" />

this automatically change the direction of input base on first character. Hope it helps.

NOTE:

Edited: People say that it does not work in IE11.

Answer 3

it's best to detect text direction based on first character of the text. if the first one belongs to RTL language, then direction has to change.

example, a Persian text with English word in it.

به معنای واقعی tired هستم

another example, an English paragraph might contain a Persian word but the whole text has to be in LTR.

this word is used in different situations. the meaning of شیر is...

this function will check the first character typed in. if it belongs to a RTL language, then direction will change. This code supports all RTL languages.

function isRTL(str) {
  var letters = [];
  allRTL = new RegExp(
    "^[\u0590-\u05fe\u0600-۾܀-ݎݐ-ݾހ-\u07be߀-\u07fe\u0800-\u083e\u0840-\u085e\u08a0-\u08fe\u0900-ॾ]|\ud802[\udf60-\udf7e]+$"
  );
  var cursor = 1;
  for (var i = 0; i <= cursor; i++) {
    letters[i] = str.substring(i - 1, i);
    if(/\s/.test(letters[i])) {
      cursor++;
    }
    if (allRTL.test(letters[i])) {
      return true;
    }
  }
  return false;
}
var dir = $("input[type=text]");
dir.keyup(function(e) {
  if (isRTL(dir.val())) {
    $(this).css("direction", "rtl");
  } else {
    $(this).css("direction", "ltr");
  }
});

for more info visit this codepen.

Answer 4

For input element you can use Unicode intrinsic direction

input {
    text-align: start;
    unicode-bidi: plaintext;
}

Of course, it works with other elements such as div with contenteditable as true as mentioned by comments.

Answer 5

DISCLAIMER as stated by @bool3max: Many languages utilize Unicode characters and are written LTR. Your function sets direction: rtl for all non-ASCII characters, which isn't desired.

I have found also a Pen that does exactly the same without Regex. I have tweaked the code a bit to be compatible with multiple input fields and textareas. It serves the purpose of using it between; for example; EN and AR languages.

$('input[type="text"], textarea').each(function () {
    $(this).on('input keyup keypress', function () {
      if (isUnicode($(this).val())) {
        $(this).css('direction', 'rtl');
      } else {
        $(this).css('direction', 'ltr');
      }
    });
  });

  function isUnicode(str) {
    var letters = [];
    for (var i = 0; i <= str.length; i++) {
      letters[i] = str.substring((i - 1), i);
      if (letters[i].charCodeAt() > 255) { return true; }
    }
    return false;
  }