Come passare da sinistra a destra in un file css?

Ho una pagina di modello di django HTML che è sia RTL che LTR (dipende dalle impostazioni locali dell'utente).Come passare da sinistra a destra in un file css?

Il CSS di questa pagina è memorizzato in un altro file e quel file è attualmente statico.

Qual è il modo migliore per cambiare l'attributo a destra ea sinistra in base alle impostazioni locali? C'è un attributo incorporato in CSS per questo problema? (Non voglio usare JS, ci si sente troppo disordinato)

ho:

.elem{ 
    left: 10px; 
    bottom: 10px; 
    position: absolute; 
}

voglio qualcosa di simile:

.elem{ 
    right-or-left-according-to-html-dir: 10px; 
    bottom: 10px; 
    position: absolute; 
}

Attualmente l'unica opzione mi viene in mente sta trasformando il file in un modello anche:

.elem{ 
    {{dir}}: 10px; 
    bottom: 10px; 
    position: absolute; 
}

C'è un modo migliore che mi consente di mantenere il mio file CSS statico?

fonte

2012-04-29 Uri

Buona domanda. Questo è davvero un problema. La soluzione di Mozilla consisteva nell'inventare nuove proprietà come [-moz-padding-start] (https://developer.mozilla.org/en/CSS/-moz-padding-start), ma naturalmente non funzionerebbe da nessuna parte altro. –

Tu dici che stai facendo il documento rtl o ltr in base alla locale. In tal caso è possibile utilizzare il selettore :lang() per rendere alcune parti del documento in stile a seconda delle impostazioni internazionali.

Se si vuole un po 'più di supporto (IE7 +) è possibile utilizzare il selettore di attributo selector[lang='en'] però che metterà alla prova solo l'attributo sul selettore specificato.

http://www.w3.org/TR/css3-selectors/#attribute-selectors

Se si specifica la lingua in l'elemento HTML (che si dovrebbe, con lang="en" per esempio) si può semplicemente mettere il selettore html davanti alla classe che si desidera applicare in alcuni locali:

.elem { 
    margin: 0 10px 0 0; 
    color: blue; 
} 

html[lang='en'] .elem { 
    margin: 0 0 0 10px; 
}

Ancora meglio, se è stato specificato il dir attributo che si può usare direttamente che in css in questo modo:

.elem[dir='rtl'] { 
    margin: 0 10px 0 0; 
}

Si prega di notare che con una classe sull'elemento del corpo si dipenderà sempre da quella classe sempre presente. Ma l'attributo dir e lang può essere specificato su un ambito più specifico, come un singolo div, e deve ancora essere utilizzato nel css insieme agli stili per le "altre" direzioni di lettura.

Modifica

Infine, per guardare al futuro, 'Livello 4' i selettori CSS includerà un tag pseudo che sarà in grado di filtrare sulla direzionalità del testo. Naturalmente le specifiche sono in fase di sviluppo e l'adozione da parte dei browser può richiedere anni prima che sia possibile utilizzare in modo affidabile è:

http://dev.w3.org/csswg/selectors4/#dir-pseudo

fonte

2012-04-29 16:21:01 sg3s

ne dite di aggiungere la direzione al vostro elemento corpo attraverso una classe speciale, quindi è possibile scrivere selettori secondo:

<body class="rtl">

e nel CSS:

.rtl .myclass { 
    text-align: right; 
}

fonte

2012-04-29 15:30:49 Joscha

Come passare da sinistra a destra in un file css?

risposta

Problemi correlati