Proprietà CSS unicode-bidi
La proprietà CSS unicode-bidi controlla l'incorporamento del testo e funziona insieme alla proprietà direction. Scopri la sintassi con esempi pratici.
La proprietà unicode-bidi controlla come viene gestito il testo bidirezionale (bidi) — testo che mescola scritture da sinistra a destra e da destra a sinistra — consentendo di sovrascrivere l'algoritmo bidirezionale Unicode incorporato nel browser.
La maggior parte delle pagine non ne ha mai bisogno. I browser già riordinano correttamente il testo misto Latino/Arabo/Ebraico utilizzando l'Algoritmo Bidirezionale Unicode. Si ricorre a unicode-bidi solo quando quel comportamento predefinito è errato: per esempio, quando un valore isolato (un numero di telefono, un nome utente, un prezzo) propaga la propria direzione nella frase circostante, oppure quando si vuole forzare deliberatamente un ordine visivo.
In pratica unicode-bidi viene abbinato alla proprietà direction: direction stabilisce in quale direzione scorre il testo di base, mentre unicode-bidi decide con quale forza viene applicata quella direzione di base. Insieme costituiscono l'equivalente CSS dell'attributo HTML dir e degli elementi <bdo>/<bdi>.
unicode-bidi produce un effetto visibile solo quando l'elemento contiene anche testo con direzioni miste. Da sola non fa nulla — funziona in tandem con la proprietà direction.
| Valore iniziale | normal |
|---|---|
| Si applica a | Tutti gli elementi, anche se alcuni valori non hanno effetto sugli elementi non inline. |
| Ereditato | Sì. |
| Animabile | No. |
| Versione | CSS2 |
| Sintassi DOM | object.style.unicodeBidi = "isolate"; |
Sintassi
Valori CSS di unicode-bidi
unicode-bidi: normal | embed | bidi-override | isolate | isolate-override | plaintext | initial | inherit;Esempio della proprietà unicode-bidi:
Nell'esempio seguente il blocco .text utilizza direction: rtl con unicode-bidi: embed. La frase araba mantiene il suo naturale ordine da destra a sinistra, mentre l'incorporamento aggiunge un ulteriore livello bidi affinché l'intero blocco sia trattato come da destra a sinistra — la punteggiatura e le parole latine vengono posizionate in relazione a quella base da destra a sinistra.
Esempio di codice CSS unicode-bidi
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.text {
direction: rtl;
unicode-bidi: embed;
}
</style>
</head>
<body>
<h2>Unicode-bidi property example</h2>
<div>Normal writing direction. مرحبا بالعالم</div>
<div class="text">Using "embed" value. مرحبا بالعالم</div>
</body>
</html>Esempio della proprietà unicode-bidi con il valore "bidi-override":
bidi-override è il valore più aggressivo: ignora la direzione intrinseca dei caratteri e dispone ogni carattere rigorosamente nell'ordine stabilito da direction. Con direction: rtl come nell'esempio seguente, persino il testo latino viene invertito carattere per carattere, quindi questo valore è utile principalmente per effetti speciali anziché per il testo reale di un documento.
Esempio CSS unicode-bidi bidi-override
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.text {
direction: rtl;
unicode-bidi: bidi-override;
}
</style>
</head>
<body>
<h2>Unicode-bidi property example</h2>
<div>Normal writing direction. مرحبا بالعالم</div>
<div class="text">Using "bidi-override" value. مرحبا بالعالم</div>
</body>
</html>Valori
| Valore | Descrizione |
|---|---|
| normal | Non suggerisce un livello aggiuntivo di incorporamento. |
| embed | Apre un livello aggiuntivo di incorporamento nel caso in cui l'elemento sia inline. |
| bidi-override | Crea un override per un elemento inline. Per gli elementi contenitore di blocco, questo valore crea un override per i discendenti a livello inline. |
| isolate | L'elemento viene isolato dai suoi fratelli. Questo valore specifica che la direzionalità del contenitore dell'elemento deve essere calcolata senza considerare il contenuto di questo elemento. |
| isolate-override | Applica il comportamento di isolamento al contenuto circostante e il comportamento di override al contenuto interno. |
| plaintext | Questo valore si comporta come il valore isolate, ma la direzionalità viene calcolata usando le regole P2 e P3 dell'Algoritmo Bidirezionale Unicode. |
| initial | Imposta la proprietà al suo valore predefinito. |
| inherit | Eredita la proprietà dal suo elemento genitore. |
Quale valore usare?
- Stai semplicemente incorporando una frase nella direzione opposta? Usa
embedinsieme alla corrispondente proprietà direction. Questo è il caso classico del "citare del testo arabo all'interno di un paragrafo in inglese". - Stai inserendo testo generato dall'utente con direzione sconosciuta (un nome, un commento, un termine di ricerca)? Preferisci
isolate. Impedisce a quel frammento di invertire la direzione delle parole circostanti — la stessa protezione offerta dall'elemento HTML<bdi>. plaintextè indicato per contenuti come messaggi di chat o righe di log in cui ogni paragrafo deve scegliere autonomamente la propria direzione dal suo primo carattere forte, invece di ereditarla dalla pagina.bidi-overridedovrebbe essere raro. Usalo solo quando si vuole deliberatamente forzare l'ordine visivo (ad esempio per specchiare il testo come effetto), perché sovrascrive l'ordine di lettura naturale di ogni carattere.
Nota che unicode-bidi non è animabile, quindi le transizioni e le animazioni non hanno effetto su di essa.
Proprietà correlate
- direction — imposta la direzione di base del testo (
ltrortl) su cui si basaunicode-bidi. - writing-mode — controlla il flusso del blocco orizzontale rispetto a quello verticale.
- text-align — allinea il testo all'interno della sua casella di riga, che spesso deve essere modificato per i contenuti RTL.