Tag HTML <bdi>
Il tag HTML <bdi> isola un segmento di testo di direzione sconosciuta in modo che la direzione sia rilevata in modo indipendente e il testo circostante resti corretto.
Il tag HTML <bdi> (il nome sta per bi-directional isolation, isolamento bidirezionale) è uno degli elementi HTML5. Contrassegna un segmento di testo che potrebbe scorrere in una direzione di scrittura diversa da quella del testo circostante e lo isola affinché l'algoritmo bidirezionale del browser lo tratti come un'unità separata e autonoma.
Il caso d'uso classico è il rendering di un valore dinamico di direzione sconosciuta — un nome utente, il nome di un prodotto o qualsiasi stringa estratta da un database — all'interno di una frase da sinistra a destra (LTR). Non è possibile sapere in anticipo se quel valore è in inglese (John), in arabo (أحمد) o in ebraico (דוד). Senza isolamento, un valore RTL può "fuoriuscire" e riordinare i caratteri LTR adiacenti, rendendo incomprensibile il resto della riga. Racchiudere il valore in <bdi> impedisce questo comportamento.
<p>User <bdi>أحمد</bdi> scored 90 points.</p>Qui أحمد mantiene il proprio ordine da destra a sinistra, mentre il resto della frase — compreso il punteggio e le parole circostanti — rimane correttamente da sinistra a destra.
Perché il testo bidirezionale ha bisogno dell'isolamento
Il testo bidirezionale mescola sequenze di caratteri da destra a sinistra (RTL) e da sinistra a destra (LTR). Per renderizzarlo, i browser eseguono il Unicode Bidirectional Algorithm, che assegna a ciascun carattere una direzionalità. Alcuni caratteri — molti segni di punteggiatura, cifre e spazi — sono neutri: la loro direzione viene dedotta dai caratteri vicini.
Questa deduzione è il problema. Quando un carattere neutro (come lo spazio e il numero dopo un nome) si trova accanto a un segmento RTL, l'algoritmo può includerlo nel flusso RTL, così un punteggio finale o un segno di punteggiatura salta sul lato sbagliato della riga. <bdi> risolve questo problema creando un confine di isolamento attorno al testo incorporato: i caratteri al suo interno non possono influenzare la direzione dei caratteri all'esterno, e viceversa.
In sintesi, <bdi> racchiude un segmento di testo e garantisce:
- La direzionalità del testo all'interno del
<bdi>non influenza il testo circostante. - La direzionalità del testo circostante non influenza il testo all'interno del
<bdi>.
Prima e dopo: vedere la differenza
L'esempio seguente mostra la stessa stringa dall'aspetto dinamico due volte. La prima riga usa un semplice <span>; la seconda la racchiude in <bdi>. Con un valore da destra a sinistra, la versione con <span> lascia che il testo finale si sposti sul lato sbagliato, mentre la versione con <bdi> rimane leggibile.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Without bdi vs. with bdi</h1>
<!-- WITHOUT isolation: the trailing ": 90" can be reordered -->
<p>User <span>إيان</span>: 90 points.</p>
<!-- WITH isolation: the name is self-contained, the rest stays LTR -->
<p>User <bdi>إيان</bdi>: 90 points.</p>
</body>
</html>Esegui l'esempio: nel primo paragrafo i due punti e il numero possono essere spostati sul lato sbagliato del nome arabo; nel secondo, <bdi> mantiene : 90 points. correttamente a destra.
<bdi> vs. dir="auto"
Potresti chiederti perché non puoi semplicemente usare dir="auto" su un <span>. Impostare dir="auto" chiede al browser di dedurre la direzione dell'elemento dal suo contenuto — ma su un normale elemento inline non crea un confine di isolamento, quindi l'elemento può comunque influenzare il layout del testo circostante.
L'elemento <bdi> fa entrambe le cose contemporaneamente: rileva automaticamente la direzione e isola. In effetti, <bdi> si comporta come uno <span dir="auto"> che è inoltre isolato, che è esattamente ciò di cui hai bisogno per un valore incorporato di direzione sconosciuta. Usare <bdi> rende l'intenzione chiara ed elimina la necessità di impostare l'attributo manualmente.
<bdi> vs. <bdo>
<bdi> viene spesso confuso con l'elemento <bdo> (bi-directional override, sovrascrittura bidirezionale), ma svolgono funzioni opposte:
<bdo>forza una direzione. È necessario assegnargli un attributodir(dir="rtl"odir="ltr"), e sovrascrive l'algoritmo per renderizzare il testo esattamente in quella direzione.<bdi>rileva e isola. Non inverte il testo. Lascia che l'algoritmo determini autonomamente la direzione del testo contenuto, proteggendolo dal — e proteggendo la pagina dal — testo circostante.
Usa <bdo> quando conosci la direzione e vuoi imporla; usa <bdi> quando la direzione è sconosciuta (contenuto dinamico) e desideri una gestione sicura e automatica.
Sintassi
Il tag <bdi> viene usato in coppia. Il contenuto è scritto tra il tag di apertura (<bdi>) e il tag di chiusura (</bdi>):
<bdi>Some text of unknown directionality</bdi>Stile CSS predefinito
I browser applicano questo stile predefinito all'elemento:
bdi {
display: inline;
unicode-bidi: isolate;
}Il valore unicode-bidi: isolate è ciò che crea il confine di isolamento descritto in precedenza. In genere non dovresti modificare unicode-bidi su un <bdi>, ma puoi stilizzarlo come qualsiasi elemento inline:
bdi {
color: blue;
font-weight: bold;
}Attributi
Il tag <bdi> supporta gli Attributi Globali e gli Attributi Evento.
Come stilizzare un tag HTML <bdi>
bdi {
color: blue;
font-weight: bold;
}