Gli elementi bdi e bdo

L'Unicode Bidirectional Algorithm gestisce normalmente bene il testo con direzioni miste, ma a volte è necessario sovrascriverlo: per isolare un nome fornito dall'utente ed evitare che cambi la direzione del testo circostante oppure per forzare una direzione specifica in un blocco di codice.

<bdi> (isolamento bidirezionale) tratta il proprio contenuto come un contesto bidi separato. La direzione del testo all'interno di <bdi> non può influire sulla direzione del testo esterno e viceversa.

Un elenco di utenti con nomi inglesi e arabi mescolati rischia che i nomi arabi "invadano" il flusso RTL del testo circostante. Racchiudendo ogni nome in <bdi> lo si isola: il layout rimane coerente indipendentemente dalla direzione di ciascun nome.

<bdo dir="rtl"> (override bidirezionale) forza una direzione specifica sul proprio contenuto, sovrascrivendo la risoluzione bidi naturale. Lo usi quando desidera visualizzare il testo in una direzione non naturale, per esempio per visualizzare frammenti di codice in LTR all'interno di una pagina RTL.

L'attributo dir su un elemento normale imposta una direzione di base, mentre l'algoritmo bidi continua ad applicarsi al suo interno. <bdo> disattiva l'algoritmo bidi per il proprio contenuto: ogni carattere scorre rigorosamente nella direzione specificata, indipendentemente dal suo script.

Ogni volta che incorpora testo generato dagli utenti nell'interfaccia circostante: nomi nelle intestazioni delle chat, nomi utente nei commenti o titoli negli elementi del feed. L'isolamento garantisce che il layout dell'interfaccia non venga influenzato da ciò che l'utente ha digitato.

Raramente. L'uso legittimo principale consiste nell'insegnare il testo bidirezionale, mostrando l'aspetto di una stringa invertita, oppure nel correggere dati con tag errati, quando la risoluzione bidi naturale produce un ordine visivo sbagliato.

Per contenuti generati dagli utenti di direzione sconosciuta, combini <bdi dir="auto"> per una doppia sicurezza: il rilevamento automatico sceglie una direzione di base in base al contenuto e bdi impedisce che tale direzione si propaghi al testo circostante.

bdi e bdo sono supportati da tutti i browser moderni. Fanno parte di HTML5 e sono stabili da anni. Le versioni meno recenti di IE non supportano bdi, ma sono ormai obsolete dal punto di vista funzionale; nei siti moderni può utilizzare bdi liberamente.

I lettori di schermo rispettano l'isolamento bidi: il testo all'interno di <bdi> viene pronunciato con la voce della relativa lingua, quando lang è impostato, senza che il contesto circostante interferisca. bdi aiuta inoltre la sintesi vocale a generare pause appropriate intorno alle frasi isolate.

I template con segnaposto ("Welcome, {name}") dovrebbero racchiudere il segnaposto in <bdi>: Welcome, <bdi>{name}</bdi>. Qualsiasi nome utente — inglese, arabo o misto — viene visualizzato correttamente senza alterare il resto del saluto.

Qual è la differenza pratica tra e ?

bdi impedisce che la direzione del testo di una sezione influenzi ciò che la circonda: lo utilizzi per contenuti utente incorporati, ad esempio i nomi nei template. bdo forza una direzione specifica sovrascrivendo bidi ed è raramente necessario al di fuori degli esempi didattici. Combini bdi con dir="auto" per gestire in sicurezza il testo fornito dagli utenti in lingue sconosciute.