Znacznik <bdo> w HTML (bi-directional override) służy do nadpisania domyślnego kierunku wyświetlania tekstu, umożliwiając wymuszenie wybranego kierunku: od lewej do prawej (ltr – left to right) lub od prawej do lewej (rtl – right to left). Jego podstawowym zadaniem jest zapewnienie poprawnej prezentacji treści w sytuacjach, gdy tekst lub fragment tekstu powinien być prezentowany w kierunku przeciwnym do otoczenia, co jest szczególnie przydatne w kontekście języków takich jak arabski, perski czy hebrajski.
Składnia i atrybuty
<bdo dir="ltr">Tekst od lewej do prawej</bdo>
<bdo dir="rtl">Tekst od prawej do lewej</bdo>
Atrybut dir jest obowiązkowy i przyjmuje jedną z dwóch wartości:
- ltr – wymusza kierunek od lewej do prawej;
- rtl – wymusza kierunek od prawej do lewej.
Znacznik <bdo> obsługuje również tzw. „global attributes” oraz atrybuty zdarzeń, co pozwala na dalszą personalizację i rozszerzenie funkcjonalności.
Typowe zastosowania <bdo>
Prezentacja słów w językach rtl w otoczeniu ltr
Jeżeli w polskim dokumencie HTML (ogólnie pisanym od lewej do prawej) pojawia się fragment tekstu po arabsku, można wymusić poprawną prezentację z wykorzystaniem <bdo>:
<p>
Arabskie zdanie: <bdo dir="rtl">مرحبا بكم</bdo>
</p>
Wyjątkowe przypadki typograficzne
Czasami wybrane fragmenty tekstu, takie jak numery, ciągi znaków czy wyrażenia matematyczne, muszą być wyświetlane odwrotnie niż reszta zawartości. Przykładowo, aby wymusić odwrócenie prezentacji numeru telefonu:
<p>
<bdo dir="rtl">123-456-789</bdo>
</p>
Testowanie kierunku tekstu
W trakcie projektowania szablonów, programiści mogą chcieć sprawdzić, jak dany element prezentuje się w różnych kierunkach tekstu:
<bdo dir="ltr">To jest test ltr.</bdo>
<br>
<bdo dir="rtl">To jest test rtl.</bdo>
Przykład kodu źródłowego
Cały fragment kodu HTML z wykorzystaniem znacznika <bdo>:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Przykład użycia znacznika <bdo></title>
</head>
<body>
<h2>Demonstracja znacznika <bdo></h2>
<p>Tekst w domyślnym kierunku: Witaj w poradniku HTML!</p>
<p><bdo dir="rtl">Ten tekst jest od prawej do lewej.</bdo></p>
<p><bdo dir="ltr">Ten tekst jest od lewej do prawej.</bdo></p>
</body>
</html>
Różnice między <bdo> a <bdi>
<bdo>– explicitnie wymusza wskazany kierunek na tym fragmencie tekstu, bez względu na to, co znajduje się w treści;<bdi>(bi-directional isolation) – służy do izolowania fragmentu o nieznanym kierunku, pozwalając przeglądarce automatycznie określić prawidłowy kierunek na podstawie zawartości.
Domyślne style css
W większości przeglądarek zastosowanie znacznika <bdo> powoduje użycie właściwości CSS:
bdo {
unicode-bidi: bidi-override;
}
Daje to efekt nadpisania domyślnego sposobu prezentowania tekstu na wskazany przez atrybut dir.
Podsumowanie
<bdo> to cenne narzędzie dla osób tworzących strony wielojęzyczne lub złożone pod względem typograficznym. Umożliwia ręczną kontrolę kierunku tekstu, co jest niezbędne wszędzie tam, gdzie domyślne ustawienia HTML są niewystarczające dla zachowania pełnej czytelności i poprawnej prezentacji treści.
