How to change CSS direction property of input field automatically if user can use rtl or ltr language

Question

Example: if I use Arabic, the direction of the text field will be rtl, and if I want to write new text and I will switch to English, the direction inside the text field (`text-align: left) will be ltr automatically

Answer 1

You can use the global HTML5 dir attribute with the value auto here, for example:

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

From the specification:

The auto keyword, which is displayed in an automatic state. Indicates that the content of the element is explicitly embedded text, but the direction is determined programmatically using the content of the element (as described below).

Note The heuristic used by this state is very rough (it just looks at the first character with a strong focus, similar to determining the level of a paragraph in a bidirectional algorithm). Authors are strongly encouraged to use this value as a last resort, when the direction of the text is truly unknown and no better on the server side heuristics can be applied.

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

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

Answer 2

thanks for the help, I used javascript to solve this problem, in this code I used the jquery framework and it works only for the Arabic language, for other languages ​​you have to change the comparison value charCodeAt (0).

 $('#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"); } }); 

Answer 3

aaaa and css requires a "direction" with the values ​​"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 4

The first problem you will encounter is that JavaScript cannot directly determine the custom language parameter, this value is only displayed in the HTTP-Accept-Language header, so you will need to do something server-side to get this value and pass its 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 5

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