Change Text Align After Change Language

I have a text area in HTML like this: Now, I want to change the direction of input text or align of them when t

Solution 1:

You can do it by CSS only:

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

Demo

This solution works with Chrome and FF but it doesn't work with Microsoft Edge.

Solution 2:

the only way i can think is checking the value of text area

var arabicPattern = /[\u0600-\u06FF]/;

$('#text').bind('input propertychange', function(ev) {

    var text = ev.target.value;

    if (arabicPattern.test(text)) {
        // arabic;
        $('#text').css('direction', 'rtl')

    }


});

But for checking only for arabic is not enought. You must check for every rtl scripts

Working example

Solution 3:

On Change of language drop down, if selected value in drop-down says Arabic, the add class to body then writes styles based on that class.

changing all the properties of an elements will lead to performance issue, and not suggestible cheers.

example as follows:

body.direction_rtltextarea
{
direction:ltr;
}

"direction_rtl" you are adding class from script

mention all the elements which needs be aligned to right to left