How to Change CSS direction property of the input field automaticly if the user can use an language rtl or ltr

Question

Example: if I use arabic language the text field direction will be rtl and if I want to write a new text and I switch to the English language the direction inside the text field

Answer 1

The first problem you are going to run into is that JavaScript cannot directly detect a user's language setting, that value only shows up in the HTTP 'Accept-Language' header, so you will have to do something server-side to get this value and pass it to the JavaScript. For example, in PHP:

$headers = apache_request_headers();
$ltr_languages = array("en-gb", "en-us", ...'); // a list of ltr languages to detect
if (in_array($headers["Accept-Language"], $ltr_languages)) {
    // some JavaScript or CSS to set the text ltr;
} else {
    // some JavaScript or CSS to set the text rtl;
}

Answer 2

You could use the global HTML5 attribute dir with a value of auto here, like so:

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

From the specification:

The auto keyword, which maps to the auto state Indicates that the contents of the element are explicitly embedded text, but that the direction is to be determined programmatically using the contents of the element (as described below).

Note: The heuristic used by this state is very crude (it just looks at the first character with a strong directionality, in a manner analogous to the Paragraph Level determination in the bidirectional algorithm). Authors are urged to only use this value as a last resort when the direction of the text is truly unknown and no better server-side heuristic can be applied.

http://www.w3.org/TR/html5/elements.html#the-dir-attribute

As this quote suggests, it would be better to find out on the server side which direction should be used, but you can use this if you have no way of knowing it.

Answer 3

body{direction: rtl;}
*[dir="ltr"] { direction: ltr; unicode-bidi: embed; }
*[dir="rtl"] { direction: rtl; unicode-bidi: embed; }
bdo[dir="ltr"] { direction: ltr; unicode-bidi: bidi-override; }
bdo[dir="rtl"] { direction: rtl; unicode-bidi: bidi-override; }

Answer 4

aaaaand the css needed is "direction" with the values of "ltr" or "rtl"

css:

textarea.rtl
{
  direction:rtl;
}

textarea.ltr
{
  direction:ltr;
}

or

document.getElementById("myTextArea").style.direction = "rtl"

supported by all major browsers.

Answer 5

thanks for you help, I used javascript to resolve this problem , in this code I used jquery framework and it work only for Arabic language , for others language you must edit charCodeAt(0) comparison value.

$('#input_ar').keyup(function(){
    if ((($(this).val().charCodeAt(0) > 0x600) && ($(this).val().charCodeAt(0) < 0x6FF)) || ($(this).val()=="")) { $('#search_input').css("direction","rtl"); }
    else { $('#search_input').css("direction","ltr"); }
});