Тег <bdi>

Тег <bdi> (укр. — bidirectional isolation, “ізоляція напрямку тексту”) в HTML використовується для автоматичної ізоляції напрямку тексту всередині рядка. Це особливо корисно, коли в тексті одночасно використовуються мови з різними напрямками (наприклад, англійська та арабська), і потрібно уникнути порушення загальної логіки вирівнювання тексту.

На відміну від тега <bdo>, який примусово задає напрямок (ltr чи rtl), тег <bdi> дозволяє браузеру самостійно визначити правильний напрямок для вмісту всередині.

Атрибути

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

Тег <bdi> не має специфічних (унікальних) атрибутів.

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

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

  • id — унікальний ідентифікатор. Наприклад:
<bdi id="username">@User123</bdi>
  • class — для CSS-стилізації. Наприклад:
<bdi class="user-handle">@User123</bdi>
  • style — для інлайн-стилів. Наприклад:
<bdi style="color: blue;">@User123</bdi>
  • title — підказка при наведенні. Наприклад:
<bdi title="Ім'я користувача">@User123</bdi>
  • lang — визначає мову контенту. Наприклад:
<bdi lang="ar">مرحبا</bdi>

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

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Приклад використання bdi</title>
    <style>
        .user {
            font-weight: bold;
            color: darkgreen;
        }
    </style>
</head>
<body>

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

<p>Коментар від користувача: <bdi class="user">@User123</bdi></p>

<p>Арабське ім'я: <bdi lang="ar">محمد</bdi></p>

<p>Ізоляція змішаних мов:</p>
<ul>
    <li>Користувач <bdi>@Ivan</bdi> залишив повідомлення.</li>
    <li>Користувач <bdi lang="ar">يوسف</bdi> залишив повідомлення.</li>
</ul>

</body>
</html>

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

  • <bdi> — це “автоматичне вирівнювання”, тоді як <bdo> — “примусове вирівнювання”.
  • Особливо корисно для виводу динамічного або користувацького контенту, коли наперед невідомо, якою мовою буде написаний текст.
  • Дозволяє браузеру самостійно визначити напрямок символів на основі Юнікодних стандартів (bidirectional algorithm).
  • Дуже актуальний для багатомовних інтерфейсів, чатів, соцмереж, форумів.
  • Підтримується усіма сучасними браузерами.