Attributo dir di HTML
L'attributo dir fa parte degli attributi globali e specifica la direzione del testo del contenuto di un elemento. Scopri su quali elementi può essere usato.
L'attributo HTML dir specifica la direzione di base del testo del contenuto di un elemento. È essenziale per visualizzare correttamente HTML nelle scritture da destra a sinistra (RTL), come l'arabo, l'ebraico, il persiano e l'urdu. Centinaia di milioni di persone leggono lingue scritte in questi sistemi di scrittura, quindi impostare correttamente la direzione è un aspetto fondamentale dell'internazionalizzazione.
dir è un Attributo Globale, quindi può essere utilizzato su qualsiasi elemento HTML. Il valore utilizzato da un elemento viene ereditato dall'antenato più vicino che ha dir impostato, con fallback a ltr se nessuno lo fa.
Valori
L'attributo dir può avere tre valori:
ltr— direzione del testo da sinistra a destra (impostazione predefinita per la maggior parte dei browser). Usato per scritture latine, cirillice, greche, CJK e la maggior parte delle altre scritture.rtl— direzione del testo da destra a sinistra. Usato per l'arabo, l'ebraico e scritture simili.auto— lascia che il browser decida in base al contenuto, utilizzando l'euristica del primo carattere direzionale forte (vedi l'avvertenza di seguito).
Sintassi
<tag dir="ltr | rtl | auto">content</tag>Impostare la direzione del documento con dir su <html>
L'uso più comune e importante di dir è sull'elemento <html>. Questo imposta la direzione di base per l'intera pagina, che ogni elemento eredita poi. Per una pagina in arabo o ebraico si dovrebbe sempre abbinare dir="rtl" con l'attributo lang corrispondente:
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<title>مرحبا بالعالم</title>
</head>
<body>
<h1>مرحبا بالعالم</h1>
<p>هذا مثال على نص يُكتب من اليمين إلى اليسار.</p>
</body>
</html>Poiché dir="rtl" è sull'elemento <html>, il titolo, il paragrafo, i punti elenco, la posizione della barra di scorrimento e l'allineamento predefinito del testo scorrono tutti da destra a sinistra senza alcun markup aggiuntivo.
Esempio: effetto RTL visibile
L'esempio originale applicava dir="rtl" a testo in inglese, dove l'effetto è appena percettibile. La direzione è ovvia solo con testo in scrittura RTL reale o con punteggiatura mista. Confronta questi paragrafi:
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML dir attribute</title>
</head>
<body>
<p dir="ltr">שלום עולם — Hebrew greeting (forced ltr)</p>
<p dir="rtl">שלום עולם — Hebrew greeting (rtl)</p>
<p dir="auto">שלום עולם — Hebrew greeting (auto)</p>
</body>
</html>Nel paragrafo rtl il testo ebraico scorre da destra a sinistra e il testo finale e la punteggiatura vengono riordinati di conseguenza. Nel paragrafo auto il browser rileva il primo carattere forte (ebraico) e sceglie automaticamente rtl.
Quando impostare ltr esplicitamente
Impostare dir="ltr" su un elemento figlio è utile per sovrascrivere una direzione rtl ereditata. Ad esempio, all'interno di una pagina in arabo (rtl) si potrebbe avere un blocco di codice, un URL o un campo di un modulo in inglese che dovrebbe restare da sinistra a destra:
<html lang="ar" dir="rtl">
<body>
<p>عنوان الموقع:</p>
<p dir="ltr">https://www.w3docs.com/learn-html</p>
</body>
</html>Senza dir="ltr", l'URL erediterebbe la direzione rtl della pagina e la sua punteggiatura potrebbe essere riordinata visivamente in modi confusi.
Una nota su auto
auto è comodo per i contenuti generati dagli utenti (commenti, nomi utente, risultati di ricerca) dove non si conosce in anticipo la lingua. Ma si basa su una semplice euristica: il browser analizza il primo carattere direzionale forte e lo usa per scegliere la direzione per l'intero elemento. Questo può essere sbagliato — per esempio, un commento che inizia con un'emoji, un numero o una parola latina ma è per lo più in arabo verrà visualizzato da sinistra a destra. Per l'isolamento per stringa di testo di direzione sconosciuta, è preferibile l'elemento <bdi>, che sia isola il testo che può applicare auto.
dir vs. <bdo>, <bdi> e CSS direction
Questi strumenti sono correlati ma risolvono problemi diversi:
- Attributo
dir— imposta la direzione di base che un elemento e i suoi figli ereditano. Il browser applica comunque l'algoritmo bidirezionale Unicode (bidi) per riordinare sequenze di direzione mista. <bdo>— override bidirezionale. Forza una singola direzione e disattiva il riordinamento bidi automatico per il suo contenuto. Usarlo quando è necessario invertire i caratteri indipendentemente dalla loro direzione naturale.<bdi>— isolamento bidirezionale. Isola una porzione di testo in modo che la sua direzione non possa influenzare il testo circostante — ideale per incorporare contenuti utente imprevedibili.- CSS
direction— l'equivalente a livello di stile dell'attributodir. L'attributo HTMLdirè generalmente preferito perché informa anche le tecnologie assistive e l'algoritmo bidi, mentre il solo CSS non lo fa sempre. Quando entrambi sono presenti, l'attributo in genere si mappa sullo stesso valore calcolato.
Supporto browser
L'attributo dir è supportato in tutti i browser moderni e lo è da molto tempo, quindi può essere usato senza fallback.