Proprietà CSS direction
La proprietà CSS direction definisce la direzione del testo in un elemento. Vedi esempi e provalo tu stesso.
La proprietà CSS direction imposta la direzione di scrittura di base del testo e dei contenuti inline — da sinistra a destra (ltr, il valore predefinito) o da destra a sinistra (rtl). È la proprietà che consente agli script da destra a sinistra come l'arabo, l'ebraico, il persiano e l'urdu di essere visualizzati correttamente.
Questa pagina spiega cosa controlla direction, come si differenzia dall'attributo HTML dir, quando è effettivamente necessario e le insidie più comuni.
Cosa influenza direction
Impostare direction su un elemento block-level modifica diverse cose contemporaneamente:
- La direzione base del testo del contenuto dell'elemento.
- L'allineamento predefinito del testo all'interno di quell'elemento (
rtlallinea il testo a destra,ltra sinistra), a meno che non venga sovrascritto context-align. - L'ordine in cui le celle di una tabella scorrono all'interno di una riga (prima quelle più a destra per
rtl). - La direzione delle incorporazioni bidirezionali create insieme alla proprietà
unicode-bidi.
direction influenza anche il lato in cui appaiono i punti elenco, le barre di scorrimento e l'overflow, poiché l'inizio inline dell'elemento viene invertito.
direction vs. l'attributo HTML dir
Nei documenti reali la direzione viene solitamente impostata con l'attributo HTML dir (<html dir="rtl">) anziché con la proprietà CSS, perché dir porta un significato semantico su cui si basano le tecnologie assistive e l'algoritmo bidi del browser.
I due non sono perfettamente equivalenti: a differenza dell'attributo HTML dir, la proprietà CSS direction non viene ereditata nelle celle di una tabella dalle colonne — le celle della tabella vivono all'interno delle righe, non delle colonne, quindi una cella eredita la sua direzione dall'elemento tabella stesso.
Per modificare l'ordine del layout puramente visivo (elementi flex/grid, margini, padding), preferire le moderne proprietà logiche e writing-mode. Utilizzare direction specificamente per la direzione di lettura del testo. Vedi writing-mode.
| Valore iniziale | ltr |
|---|---|
| Si applica a | Tutti gli elementi. |
| Ereditato | Sì. |
| Animabile | Discreto. |
| Versione | CSS2 |
| Sintassi DOM | object.style.direction = "rtl"; |
Sintassi
Sintassi della proprietà CSS direction
direction: ltr | rtl | initial | inherit;Esempio: confronto tra ltr e rtl
Il tag <p> mantiene la direzione ltr predefinita; il <div> viene impostato su rtl, quindi il suo testo inizia dal bordo destro e viene letto verso sinistra.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
direction: rtl;
}
</style>
</head>
<body>
<p>As you can see, this text is written with default direction.</p>
<div>However, this text is written from right to left as we defined.</div>
</body>
</html>Risultato
![Proprietà CSS direction](https://api.w3docs.com/uploads/media/default/0001/03/576170a14b5c571d29380b8bdc5880bafac595b3.png "CSS direction property rtl example" =420x)
Nell'esempio precedente viene utilizzato il valore rtl, quindi il testo nel <div> scorre da destra a sinistra e si allinea a destra per impostazione predefinita.
Esempio: un elenco e una citazione da destra a sinistra
Poiché direction inverte l'inizio inline, i marcatori di elenco e l'allineamento predefinito del testo si spostano sul lato destro — esattamente quello che si desidera per un frammento in arabo o ebraico.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.rtl {
direction: rtl;
border: 1px solid #ccc;
padding: 10px;
}
</style>
</head>
<body>
<ul class="rtl">
<li>First item</li>
<li>Second item</li>
</ul>
</body>
</html>I punti elenco vengono visualizzati a destra e il testo si allinea a destra — senza alcuna regola text-align.
Valori
| Valore | Descrizione | Prova |
|---|---|---|
| ltr | Indica che la direzione del testo sarà da sinistra a destra. Questo è il valore predefinito della proprietà. | Prova » |
| rtl | Indica che la direzione del testo sarà da destra a sinistra. | Prova » |
| initial | Imposta la proprietà al suo valore predefinito. | Prova » |
| inherit | Eredita la proprietà dall'elemento genitore. |
Insidie comuni
directionda sola non influisce sull'ordine delle caselle inline. Per riordinare effettivamente il testo misto da sinistra a destra e da destra a sinistra, è necessario utilizzare ancheunicode-bidi(ad esempiounicode-bidi: bidi-override).- Allineamento vs. direzione.
rtlcambia l'allineamento predefinito, ma una regolatext-alignesplicita ha comunque la precedenza. Se il testo si allinea nel modo "sbagliato" dopo aver cambiato direzione, verificare la presenza di untext-alignin conflitto. - È ereditata. Impostare
directionuna volta su un contenitore di alto livello (o tramite<html dir="rtl">) e l'intero sottoalbero la raccoglie, ad eccezione delle celle di tabella come indicato sopra.
Proprietà correlate
unicode-bidi— controllo dettagliato del testo bidirezionale.writing-mode— flusso verticale vs. orizzontale e direzione del blocco.text-align— allineamento orizzontale esplicito del contenuto inline.