CODEWITHSUNDEEP
javascripthtmlcss
user217648
user217648

Reputation: 3486

How to change the text direction of an element?

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.

Upvotes: 17

Views: 13840

Answers (5)

realsarm
realsarm

Reputation: 657

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.

Upvotes: 1

Tes3awy
Tes3awy

Reputation: 2266

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;
  }

Upvotes: -1

Hadi Farnoud
Hadi Farnoud

Reputation: 161

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.

Upvotes: 1

Reza Ameri
Reza Ameri

Reputation: 1815

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.

Upvotes: 31

Jamie Dixon
Jamie Dixon

Reputation: 54021

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.

Upvotes: 33

Related Questions