Elementy bdi i bdo

Algorytm dwukierunkowości Unicode zwykle dobrze obsługuje tekst o mieszanych kierunkach, ale czasami trzeba go nadpisać — aby odizolować nazwę podaną przez użytkownika, tak by nie zmieniała kierunku otaczającego tekstu, albo wymusić określony kierunek w bloku kodu.

<bdi> (izolacja dwukierunkowa) traktuje swoją zawartość jako osobny kontekst dwukierunkowy. Kierunek tekstu wewnątrz <bdi> nie może wpływać na kierunek tekstu poza nim i odwrotnie.

Lista użytkowników zawierająca angielskie i arabskie imiona niesie ryzyko, że nazwy arabskie „przenikną” ze swoim przepływem RTL do otaczającego tekstu. Otoczenie każdej nazwy elementem <bdi> izoluje ją, dzięki czemu układ pozostaje spójny niezależnie od kierunku danej nazwy.

<bdo dir="rtl"> (nadpisanie kierunku dwukierunkowego) wymusza określony kierunek zawartości, nadpisując naturalne rozstrzyganie dwukierunkowości. Należy go użyć, gdy tekst ma być wyświetlany w kierunku innym niż naturalny — na przykład do renderowania fragmentów kodu w kierunku LTR na stronie RTL.

Atrybut dir na zwykłym elemencie ustawia bazowy kierunek, a algorytm dwukierunkowości nadal działa wewnątrz niego. <bdo> wyłącza algorytm dwukierunkowości dla swojej zawartości — każdy znak płynie ściśle w określonym kierunku, niezależnie od użytego skryptu.

Za każdym razem, gdy osadza się tekst wygenerowany przez użytkownika w otaczających elementach interfejsu — na przykład nazwy w nagłówkach czatu, nazwy użytkowników w komentarzach lub tytuły elementów kanału. Izolacja gwarantuje, że układ interfejsu pozostanie niezależny od tego, co wpisze użytkownik.

Rzadko. Główne uzasadnione zastosowanie to nauka o tekście dwukierunkowym (pokazywanie, jak wygląda odwrócony ciąg znaków) lub poprawianie nieprawidłowo oznaczonych danych, gdy naturalne ustalanie kierunku tekstu daje niewłaściwą kolejność wizualną.

W przypadku treści użytkownika o nieznanym kierunku należy dla dodatkowego bezpieczeństwa połączyć <bdi dir="auto">: automatyczne wykrywanie wybiera kierunek bazowy na podstawie treści, a bdi zapobiega przenikaniu tego kierunku do otaczającego tekstu.

bdi i bdo są obsługiwane przez każdą współczesną przeglądarkę. Są częścią HTML5 i od lat działają stabilnie. Starsze wersje IE nie obsługują bdi, ale są już praktycznie przestarzałe; we współczesnych witrynach można swobodnie używać bdi.

Czytniki ekranu respektują izolację kierunku tekstu: tekst wewnątrz <bdi> jest odczytywany przy użyciu głosu właściwego dla jego języka (gdy ustawiono lang), bez przenikania kontekstu otaczającego tekstu. bdi pomaga także syntezie mowy wstawiać odpowiednie pauzy wokół odizolowanych fraz.

W szablonach zawierających symbole zastępcze ("Witamy, {name}") symbol zastępczy należy umieścić w <bdi>: Welcome, <bdi>{name}</bdi>. Każda nazwa użytkownika — angielska, arabska lub mieszana — zostanie wyświetlona poprawnie, bez zakłócania pozostałej części powitania.

Jaka jest praktyczna różnica między a ?

bdi izoluje kierunek tekstu sekcji, dzięki czemu nie wpływa on na otoczenie — należy go używać dla osadzonych treści użytkownika, takich jak nazwy w szablonach. bdo wymusza określony kierunek, nadpisując algorytm bidi, i rzadko jest potrzebny poza przykładami dydaktycznymi. bdi należy łączyć z dir="auto", aby bezpiecznie obsługiwać tekst użytkownika w nieznanych językach.