Come modificare automaticamente la proprietà della direzione CSS del campo di input se l'utente può utilizzare una lingua rtl o ltr

Question

Esempio: se utilizzo la lingua araba, la direzione del campo di testo sarà rtl e se voglio scrivere un nuovo testo e cambio alla lingua inglese la direzione all'interno del campo di testo (`text-align: left) sarà litri automaticamente

Answer 1

è possibile utilizzare l'attributo HTML5 globale dir con un valore di auto qui, in questo modo:

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

Dalla specifica:

Il auto parola chiave, che associa allo stato automatico Indica che le contenuto dell'elemento sono incorporati in modo esplicito il testo, ma che la direzione è quello di essere determinato a livello di codice utilizzando il contenuto del l'elemento (come descritto di seguito).

Nota: L'euristica utilizzata da questo stato è molto grezzo (appena si presenta al primo carattere con una forte direzionalità, in modo analogo a determinazione Level Paragrafo nell'algoritmo bidirezionale). Gli autori sono invitati a utilizzare questo valore solo come ultima risorsa quando la direzione del testo di è veramente sconosciuta e non è possibile applicare una euristica ottimizzata lato server .

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

Come suggerisce questa citazione, sarebbe meglio scoprire sul lato server che direzione dovrebbe essere utilizzato, ma è possibile utilizzare questo se non avete modo di saperlo.

Answer 2

Il primo problema che si verificherà è che JavaScript non è in grado di rilevare direttamente l'impostazione della lingua di un utente, tale valore viene visualizzato solo nell'intestazione HTTP "Accept-Language", quindi dovrai fare qualcosa sul lato server per ottieni questo valore e passa a JavaScript. Ad esempio, 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 3

Aaaaand il css necessario è "direzione" con i valori di "litri" o "rtl"

css:

textarea.rtl 
{ 
    direction:rtl; 
} 

textarea.ltr 
{ 
    direction:ltr; 
} 

o

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

supportato da tutti i principali browser.

Answer 4

grazie per il vostro aiuto, Ho usato javascript per risolvere questo problema, in questo codice ho usato il framework jquery e funziona solo per la lingua araba, per gli altri la lingua è necessario modificare il valore di confronto 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; }