I have a text area in HTML like this:

<textarea name="tx1" style="direction:ltr;"></textarea>

Now, I want to change the direction of input text or align of them when the user changes the language to arabic. Whithout Any Question or Any Button Or Any Submit I Want to know The user language when he is typing. if the user is arabic, set the textarea align to right. if english set it to left.

I have a text area in HTML like this:

<textarea name="tx1" style="direction:ltr;"></textarea>

Now, I want to change the direction of input text or align of them when the user changes the language to arabic. Whithout Any Question or Any Button Or Any Submit I Want to know The user language when he is typing. if the user is arabic, set the textarea align to right. if english set it to left.

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Dec 26, 2014 at 14:46 Amir Parsa KHademi asked Dec 26, 2014 at 14:16 Amir Parsa KHademiAmir Parsa KHademi 10511 silver badge1010 bronze badges 4

• you must set this from server side – giannisf Commented Dec 26, 2014 at 14:22
• For Example, In Facebook Moments When You Type English , Text Align in left and when you press Alt+Shift and Change Language to Arabic, Text Align Change To Right. – Amir Parsa KHademi Commented Dec 26, 2014 at 14:27
• I Can Use Server Side like PHP but i dont know How Or Why use it. – Amir Parsa KHademi Commented Dec 26, 2014 at 14:28
• For Every Thing That input text – Amir Parsa KHademi Commented Dec 26, 2014 at 14:28

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 10

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.

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

If you do not tell us how do you change the language of your user we cannot help. I suppose you will have to use a hypertext preprocessor (like PHP) or duplicate the page in both languages.

In case you do not know anything about what I am telling you, I will adapt it for you to be able to use jQuery instead. However, this is not a good practice if you do not make anything else of the kind of preprocessing.

var isArabic = false;
if (isArabic) {
    $("textarea").css("direction", "rtl");
}

If you used PHP, you could store the user language inside the session array, and whenever the user changes the language, change the variable, in order to preprocess the HTML so it will show RTL instead.

Edit

I have merely understood what you are trying to ask.

Got it:

var language;
$('#element').keypress(function() {
    language = window.navigator.userLanguage || window.navigator.language;
    if (language=="language_code_using_LTR") {
        $(this).css("direction", "rtl");
    }
});

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_rtl textarea
{
direction:ltr;
}

"direction_rtl" you are adding class from script

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