Unicode-bidi - CSS-tricks | CSS Almanack 2025

Den unicode-bidiegenskapen är en av två CSS-egenskaper som hanterar rendering av dubbelriktad text i HTML och liknande märkningsbaserade språk (t.ex. XML). Den andra egenskapen är direction, och de två används tillsammans för att skapa nivåer av inbäddad text med olika textriktningar (höger till vänster och vänster till höger) i ett enda DOM-element.

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

Webbläsaren bestämmer vanligtvis vilken riktning inbyggd text kommer att flöda, beroende på langattributet för element, webbläsarens läge och font-familyspecifika element. unicode-bidikommer till nytta när ett element innehåller både LTR-text och RTL-text:

Användaragenten använder en komplex algoritm definierad av Unicode-standarden för att bestämma hur texten ska visas. Den här egenskapen styr specifikt inbäddningsnivåerna och åsidosätter för Unicode dubbelriktad algoritm.

Den unicode-bidiFastigheten har tre allmänt stödda värden:

det ”normala” nyckelordet, som inte erbjuder några ytterligare nivåer av inbäddad dubbelriktad text (standardwebbläsarbeteendet). Ett element med den här egenskapen innehåller endast LTR- eller RTL-text.
nyckelordet "bädda in", vilket möjliggör dubbelriktad text i ett element (till exempel RTL-text som flyter bland LTR-text). Detta bestäms av directionfastigheten och måste tillämpas på ett inbyggt element.
nyckelordet "bidi-override", som fungerar på samma sätt som "bädda in" när det tillämpas på inbyggda element. På element på blocknivå åsidosätter den webbläsarens dubbelriktade textalgoritm och flödar texten inuti alla inbyggda barn strikt enligt directionegenskapen.

Intressanta platser

Den unicode-bidiegenskapen är ”avsedd för DTD designers. Webbdesigners och liknande författare bör inte åsidosätta det. ” Bestäm noga om du behöver använda den.
Internet Explorer stöder tekniskt unicode-bidisedan version 5.5, men det finns ”allvarliga buggar som rör flytande element” och användningen är tillförlitlig i IE 8+ (se nedan)