Elementerne bdi og bdo

En liste over brugere med blandede engelske og arabiske navne risikerer, at de arabiske navne "lækker" deres RTL-flow ind i den omgivende tekst. Hvis hvert navn pakkes ind i <bdi>, isoleres det: layoutet forbliver ensartet uanset hvilken retning det enkelte navn har.

<bdo dir="rtl"> (tilsidesættelse af tovejsretningen) tvinger en bestemt retning på sit indhold og tilsidesætter den naturlige bidi-beregning. Brug det, når du vil vise tekst i en ikke-naturlig retning — for eksempel for at gengive kodestykker i LTR på en RTL-side.

Attributten dir på et almindeligt element fastsætter en grundretning, og bidi-algoritmen anvendes stadig indeni. <bdo> deaktiverer bidi-algoritmen for sit indhold — hvert tegn flyder strengt i den angivne retning uanset dets skriftsystem.

Når du indlejrer brugergenereret tekst i en omgivende brugerflade — navne i chatoverskrifter, brugernavne i kommentarer eller titler i feed-elementer. Isoleringen garanterer, at brugerfladens layout ikke påvirkes af det, brugeren har skrevet.

Sjældent. Den vigtigste legitime anvendelse er at undervise i bidirektional tekst (vise, hvordan en streng ser ud, når den er vendt om) eller korrigere data med forkerte tags, hvor den naturlige bidi-opløsning giver den forkerte visuelle rækkefølge.

Til brugerindhold med ukendt retning kan du kombinere <bdi dir="auto"> for ekstra sikkerhed: Den automatiske registrering vælger en grundretning ud fra indholdet, og bdi forhindrer, at denne retning lækker ud i den omgivende tekst.

bdi og bdo understøttes i alle moderne browsere. De er en del af HTML5 og har været stabile i årevis. Ældre versioner af IE mangler bdi, men de er funktionelt forældede; moderne websteder kan bruge bdi uden problemer.

Skærmlæsere respekterer bidi-isolering: Tekst inde i <bdi> læses op med stemmen for sit eget sprog (når lang er angivet), uden at den omgivende kontekst trænger ind. bdi hjælper også tekst-til-tale med at generere passende pauser omkring isolerede fraser.

Skabeloner med pladsholdere ("Velkommen, {name}") bør omslutte pladsholderen med <bdi>: Welcome, <bdi>{name}</bdi>. Ethvert brugernavn – engelsk, arabisk eller blandet – vises korrekt uden at forstyrre resten af hilsenen.

bdi isolerer tekstretningen i en sektion, så den ikke påvirker omgivelserne – brug det til indlejret brugerindhold som navne i skabeloner. bdo gennemtvinger en bestemt retning og tilsidesætter bidi, men er sjældent nødvendigt uden for undervisningseksempler. Kombiner bdi med dir="auto" for sikker håndtering af brugerleveret tekst på ukendte sprog.