Тег <bdo>

Тег <bdo> (укр. — “перемикання напрямку тексту” — bidirectional override) використовується в HTML для явного керування напрямком відображення тексту: зліва направо (LTR) або справа наліво (RTL). Це особливо важливо при роботі з багатомовними сайтами, де можуть поєднуватися мови з різними напрямками письма (наприклад, арабська, іврит, англійська).

Атрибути

Специфічні атрибути

  • dir — обов’язковий атрибут для визначення напрямку тексту. Допустимі значення:
    • ltr — зліва направо (left-to-right)
    • rtl — справа наліво (right-to-left). Наприклад:
<bdo dir="rtl">Це текст справа наліво.</bdo>

Глобальні атрибути

Тег <bdo> підтримує всі глобальні атрибути HTML:

  • id — унікальний ідентифікатор. Наприклад:
<bdo id="reverse" dir="rtl">Текст RTL</bdo>
  • class — для CSS-стилізації. Наприклад:
<bdo class="rtl-text" dir="rtl">نمونه متن فارسی</bdo>
  • style — для інлайн-стилів. Наприклад:
<bdo style="color: red;" dir="rtl">Текст RTL</bdo>
  • title — підказка при наведенні. Наприклад:
<bdo title="Напрямок справа наліво" dir="rtl">Текст</bdo>
  • lang — визначає мову контенту. Наприклад:
<bdo lang="ar" dir="rtl">مرحبا بالعالم</bdo>

Приклад використання

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Приклад використання bdo</title>
    <style>
        .box {
            border: 1px solid #000;
            padding: 10px;
            margin-bottom: 10px;
            width: 300px;
        }
    </style>
</head>
<body>

<h2>Демонстрація роботи bdo:</h2>

<div class="box">
    <p>Звичайний текст: Це приклад тексту.</p>
</div>

<div class="box">
    <p>Текст справа наліво: <bdo dir="rtl">Це приклад тексту.</bdo></p>
</div>

<div class="box">
    <p>Текст зліва направо (примусово): <bdo dir="ltr">مرحبا بالعالم</bdo></p>
</div>

</body>
</html>

Додаткові моменти

  • Основна функція — примусово змінити напрямок потоку тексту незалежно від мови сторінки.
  • Корисно для багатомовних вебзастосунків, при виведенні даних з бази, де напрямок може бути неконтрольованим.
  • Використовується рідко в повсякденній розробці, але критично важливий для підтримки RTL-мов.
  • Не плутати з атрибутом dir, який можна задавати й на інших елементах — <bdo> дає саме “override” для вкладеного контенту.
  • Без вказаного dir тег <bdo> не матиме ефекту.
  • Підтримується всіма сучасними браузерами.