Tag HTML <bdo>
Il tag HTML <bdo> forza la direzione del testo (ltr o rtl), ignorando l'algoritmo bidirezionale del browser. Impara l'attributo dir con esempi RTL/LTR.
Il tag HTML <bdo> ("bidirectional override", override bidirezionale) forza una direzione del testo specifica, ignorando l'algoritmo bidirezionale (bidi) integrato del browser. È particolarmente utile quando è necessario visualizzare i caratteri in un ordine fisso da sinistra a destra o da destra a sinistra, indipendentemente dalla direzione naturale dello script a cui appartengono quei caratteri.
Questa pagina illustra cosa fa l'override, l'attributo dir obbligatorio, esempi pratici RTL e LTR eseguibili, l'equivalente CSS, il supporto dei browser e note sull'accessibilità.
Perché esiste l'override bidirezionale
Per impostazione predefinita, i browser gestiscono automaticamente il testo con direzioni miste utilizzando l'algoritmo bidirezionale Unicode. Tale algoritmo esamina la direzione intrinseca di ciascun carattere — le lettere latine scorrono da sinistra a destra (LTR), mentre le lettere arabe ed ebraiche scorrono da destra a sinistra (RTL) — e li dispone di conseguenza. La maggior parte delle volte questo è esattamente il comportamento desiderato.
<bdo> è la via di fuga per i casi rari in cui è necessario forzare l'ordine visivo anziché lasciare decidere all'algoritmo. Sovrascrive la direzionalità intrinseca di ogni carattere al suo interno. Si tratta di uno strumento deliberato e di basso livello: usarlo solo quando si ha realmente bisogno di un ordine specifico dei caratteri, non come metodo generale per visualizzare testo in lingua straniera.
Se l'obiettivo è semplicemente isolare un pezzo di testo di cui non si controlla la direzione (ad esempio, un nome fornito dall'utente) in modo che non disturbi il layout circostante, è preferibile usare <bdi> — isola senza sovrascrivere.
L'attributo dir obbligatorio
L'attributo dir è obbligatorio su <bdo>. Indica al browser quale direzione forzare e accetta due valori:
rtl— renderizza il contenuto da destra a sinistra. Da usare con gli script RTL come l'arabo e l'ebraico, o per forzare l'ordinamento RTL su qualsiasi contenuto.ltr— renderizza il contenuto da sinistra a destra. È particolarmente utile per forzare l'ordinamento LTR su un frammento (come uno snippet di codice, un URL o un numero) che si trova all'interno di un contesto RTL come un paragrafo in arabo.
A differenza dell'attributo globale dir, che imposta solo una direzione di base e lascia comunque che l'algoritmo bidi riordini sequenze di caratteri di direzione opposta, dir su un elemento <bdo> sovrascrive completamente tale algoritmo.
Sintassi
Il tag <bdo> viene usato in coppia. Il contenuto è scritto tra il tag di apertura (<bdo>) e quello di chiusura (</bdo>), e dir deve essere sempre presente:
<bdo dir="rtl">…content…</bdo>Esempio RTL (arabo)
In questo caso un paragrafo LTR di base contiene una frase in arabo. Poiché dir="rtl" corrisponde alla direzione naturale dello script arabo, il testo si legge correttamente da destra a sinistra.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>This sentence runs left to right.</p>
<p>
Arabic greeting:
<bdo dir="rtl">مرحبا بكم في موقعنا</bdo>
</p>
</body>
</html>Risultato
Override LTR all'interno di un contesto RTL
Quando la direzione di base è RTL (un paragrafo in arabo in questo caso), l'algoritmo bidi normalmente invertirebbe l'ordine di un frammento LTR come un percorso di file o un codice prodotto. Racchiudere quel frammento in <bdo dir="ltr"> lo costringe a mantenere l'ordine da sinistra a destra previsto:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p dir="rtl">
المسار هو
<bdo dir="ltr">C:\Users\docs\file.txt</bdo>
</p>
</body>
</html>Risultato
L'equivalente CSS
L'effetto di <bdo> può essere riprodotto in CSS combinando la proprietà direction con unicode-bidi: bidi-override. L'elemento HTML è infatti definito in termini di questo CSS:
bdo[dir="ltr"] {
direction: ltr;
unicode-bidi: bidi-override;
}
bdo[dir="rtl"] {
direction: rtl;
unicode-bidi: bidi-override;
}La parte fondamentale è unicode-bidi: bidi-override. Impostare direction da solo cambia solo la direzione di base (la stessa cosa che fa l'attributo dir); è bidi-override che disabilita il riordinamento automatico. Se si vuole il comportamento di override su un elemento diverso da <bdo>, è necessario applicare entrambe le dichiarazioni manualmente. Al contrario, preferire l'elemento semantico <bdo> quando il markup rappresenta un override direzionale deliberato — mantiene l'intento nell'HTML anziché nasconderlo in un foglio di stile.
Attributi
| Attributo | Valore | Descrizione |
|---|---|---|
| dir | ltr | rtl | Obbligatorio. Definisce la direzione del testo: da sinistra a destra (ltr) o da destra a sinistra (rtl). |
Il tag <bdo> supporta anche gli Attributi Globali e gli Attributi di Evento.
Supporto dei browser
<bdo> fa parte dello standard HTML ed è supportato da tutti i principali browser da molto tempo, tra cui Chrome, Firefox, Safari, Edge e Opera. Non è necessario alcun fallback per i browser attuali.
Accessibilità
<bdo> modifica solo l'ordine visivo dei caratteri; non cambia la pronuncia né l'ordine di lettura logico esposto alle tecnologie assistive. I lettori di schermo annunciano il testo nel suo ordine logico (del documento) sottostante, non nell'ordine visivo sovrapposto.
Per questo motivo, riservare <bdo> ai casi in cui l'ordine visivo dei caratteri sia genuinamente importante (come forzare un frammento di codice o un identificatore a rimanere LTR). Per il normale contenuto multilingue, impostare una direzione di base corretta con l'attributo globale dir sull'elemento circostante e lasciare che l'algoritmo bidi faccia il suo lavoro, oppure usare <bdi> per isolare il testo non attendibile — entrambi producono un'esperienza più accurata per gli utenti di lettori di schermo rispetto alla sovrascrittura diretta della direzione.