Unicode-bidi - Trucchi CSS | CSS Almanac 2025

La unicode-bidiproprietà è una delle due proprietà CSS che gestiscono il rendering di testo bidirezionale in HTML e linguaggi basati su markup simili (ad esempio XML). L'altra proprietà è direction, e le due vengono utilizzate insieme per creare livelli di testo incorporato con diverse direzioni del testo (da destra a sinistra e da sinistra a destra) in un singolo elemento DOM.

.bilingual-excerpt ( direction: rtl; unicode-bidi: embed; )

Il browser di solito determina in quale direzione scorrerà il testo inline, a seconda langdell'attributo degli elementi, delle impostazioni internazionali del browser e font-familydi elementi specifici. unicode-bidiè utile quando un elemento contiene sia testo LTR che testo RTL:

Il programma utente applica un algoritmo complesso definito dallo standard Unicode per determinare come dovrebbe apparire il testo. Questa proprietà controlla specificamente i livelli di incorporamento e sostituisce l'algoritmo bidirezionale Unicode.

La unicode-bidiproprietà ha tre valori ampiamente supportati:

la parola chiave "normale", che non offre livelli aggiuntivi di testo bidirezionale incorporato (il comportamento predefinito del browser). Un elemento con questa proprietà conterrà solo testo LTR o RTL.
la parola chiave "embed", che consente il testo bidirezionale in un elemento (ad esempio, testo RTL che scorre nel testo LTR). Questo è determinato dalla directionproprietà e deve essere applicato a un elemento inline.
la parola chiave "bidi-override", che agisce come "embed" quando applicata agli elementi inline. Sugli elementi a livello di blocco, sovrascrive l'algoritmo di testo bidirezionale del browser e fa scorrere il testo all'interno di qualsiasi figlio in linea rigorosamente in base alla directionproprietà.

Punti di interesse

La unicode-bidiproprietà è “è destinata ai progettisti DTD. I web designer e autori simili non dovrebbero sovrascriverlo. " Decidi attentamente se devi usarlo.
Sebbene Internet Explorer supporti tecnicamente unicode-bididalla versione 5.5, ci sono "gravi bug relativi agli elementi flottati" e l'uso è affidabile in IE 8+ (vedi sotto)