La directionproprietà in CSS imposta la direzione del flusso di contenuto all'interno di un elemento a livello di blocco. Ciò si applica agli elementi di testo, inline e inline-block. Imposta anche l'allineamento predefinito del testo e la direzione in cui scorrono le celle della tabella all'interno di una riga della tabella.
.main-content ( direction: rtl; /* Right to Left */ )I valori validi sono:
ltr- Da sinistra a destra, l'impostazione predefinitartl- Da destra a sinistrainherit- eredita il suo valore dall'elemento genitore
Il testo in questa pagina è impostato nella ltrdirezione predefinita . Il caso d'uso più comune da impostare rtlè per le pagine web con testo ebraico o arabo. Ecco un esempio di arabo impostato in rtl:
طهيس يس تآخت تهات يس وريتتآن ريت تو لآفت تهات يس وسسد
C'è anche un attributo HTML per impostare la direzione:
Sia la proprietà CSS che l'attributo HTML faranno scorrere la direzione verso gli elementi discendenti. Si consiglia di utilizzare l'attributo HTML, poiché funzionerà anche se CSS fallisce o non influisce sulla pagina per qualsiasi motivo.
C'è anche un tag HTML specifico che può essere utilizzato per cambiare la direzione del testo: l'elemento di override bidirezionale. Questo esiste quindi c'è un elemento semantics-free da usare solo per questo scopo. Per esempio:
This text will go left to right. This text will go right to left.Per accoppiare tutto questo con CSS ...
*(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; )"Bidi" = "bidirezionale"
Quando si creano layout in un mondo pre-griglia pre-flexbox, le persone spesso scelgono tra float e inline-block per creare colonne. Un vantaggio di inline-block, oltre a rimuovere la necessità di cancellare il float, è che la modifica della proprietà direction inverte anche il layout. Questo non è vero per i float, che dovrebbero essere ripristinati se una pagina web supporta più lingue e la direzione della lingua è cambiata da ltr a rtl o viceversa.
Se è necessario modificare la direzione di un elemento in linea (rispetto a quello che è il suo elemento a livello di blocco padre), sarà necessario utilizzare l'elemento o assicurarsi che l'elemento inline imposti correttamente la proprietà unicode-bidi:
Some regular text reverse direction text text reverse directionspan(dir) ( unicode-bidi: bidi-override; )Supporto browser
| Cromo | Safari | Firefox | musica lirica | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 2.0+ | 1.3+ | Qualunque | 9.2+ | 5.5+ | Qualunque | 3.1+ |