Cómo cambiar la propiedad de dirección CSS del campo de entrada automáticamente si el usuario puede usar un idioma rtl o ltr

Question

Ejemplo: si uso el idioma árabe, la dirección del campo de texto será rtl y si quiero escribir un texto nuevo y cambio de idioma al idioma Inglés de la dirección dentro del campo de texto (`text-align: left) será litros automáticamente

Answer 1

se puede utilizar el atributo HTML5 mundial dir con un valor de auto aquí, así:

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

De la especificación:

La palabra clave auto, que se correlaciona con el estado automático indica que el contenido del elemento están incrustados explícitamente texto, pero que la dirección ha de ser determinado mediante programación utilizando el contenido de el elemento (como se describe a continuación).

Nota: La heurística utilizado por este estado es muy cruda (que sólo se ve en el primer carácter con una direccionalidad fuerte, de una manera análoga a la determinación nivel de párrafo en el algoritmo bidireccional). Se ruega a los autores que utilicen este valor como último recurso cuando la dirección del texto sea verdaderamente desconocida y no se pueda aplicar ninguna heurística del lado del servidor .

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

Como sugiere esta cita, sería mejor averiguar en el lado del servidor qué dirección se debe utilizar, pero se puede usar esta opción si no hay manera de saberlo.

Answer 2

El primer problema con el que se encontrará es que JavaScript no puede detectar directamente la configuración de idioma de un usuario, ese valor solo aparece en el encabezado HTTP 'Accept-Language', por lo que tendrá que hacer algo obtener este valor y pasarlo a JavaScript. Por ejemplo, en 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 3

aaaaand el css necesita es "dirección" con los valores de "ltr" o "RTL"

css:

textarea.rtl 
{ 
    direction:rtl; 
} 

textarea.ltr 
{ 
    direction:ltr; 
} 

o

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

compatible con todos los principales navegadores.

Answer 4

gracias por su ayuda, Utilicé Javascript para resolver este problema, en este código utilicé jquery framework y solo funciona para el idioma árabe, para otros idiomas debe editar el valor de comparación de 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 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; }