<bdo>

Wymusza kierunek wyświetlania tekstu, z pominięciem automatycznego algorytmu dwukierunkowego.

Wyświetlanie
inline
Znacznik zamykający
Wymagany
Dozwolona zawartość
Treść frazowa (phrasing content)
Na tej stronie

Przykład

#
HTML
<p>Zwykły tekst: CodeWorlds</p>
<p>Z wymuszonym kierunkiem: <bdo dir="rtl">CodeWorlds</bdo></p>
Podgląd

Definicja i zastosowanie

#

Element <bdo> (od angielskiego bidirectional override) wyłącza automatyczne ustalanie kierunku tekstu i wyświetla znaki dokładnie w tym kierunku, który podasz w atrybucie dir: ltr (od lewej do prawej) albo rtl (od prawej do lewej). Przy rtl nawet polski tekst pojawi się odwrócony, litera po literze.

Przydaje się rzadko: gdy chcesz pokazać, w jakiej kolejności znaki są zapisane w pamięci komputera, na przykład ucząc o tekstach arabskich czy hebrajskich, albo gdy automatyczny algorytm w konkretnym przypadku się myli.

Przy <bdo> globalny atrybut dir jest obowiązkowy i przyjmuje tylko wartości ltr lub rtl, wartość auto jest tu niedozwolona. Do treści o nieznanym kierunku, np. nazw użytkowników, służy <bdi>.

Składnia

#
Składnia
<bdo dir="rtl">tekst</bdo>

Atrybuty

#

Ten element nie ma własnych atrybutów. Obsługuje atrybuty globalne, takie jak class, id czy hidden.

Więcej przykładów

#
Kolejność zapisu słowa po hebrajsku
HTML
<p>Tak wyświetla się słowo „szalom”: שלום</p>
<p>Tak jest zapisane w pamięci, znak po znaku: <bdo dir="ltr">שלום</bdo></p>
Podgląd

Domyślny CSS

#

Większość przeglądarek wyświetla ten element z takimi stylami domyślnymi:

CSS
bdo {
  unicode-bidi: isolate-override;
}

Obsługa przeglądarek

#

Szeroko dostępne

Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.

  • Chrome
  • Edge
  • Firefox
  • Safari

Dobre praktyki

#
  • Zawsze podawaj dir="ltr" albo dir="rtl". Bez tego element nie ma sensu.
  • Do tekstów wpisywanych przez użytkowników używaj <bdi>, a nie <bdo>.
  • Nie odwracaj tekstu przez <bdo> dla efektu wizualnego. Czytnik ekranu i tak przeczyta go w oryginalnej kolejności.

Powiązane hasła

#

Widzisz błąd albo brakuje przykładu? Napisz do nas.