Двунаправленный текст (bdi, bdo) [Модуль 2: Форматирование текста]: Тренажер HTML

Тренажер по HTML для пользователей с начальным уровнем подготовки.

В современном интернете контент создается пользователями со всего мира, которые пишут на разных языках. Некоторые языки, как русский или английский, пишутся слева направо (LTR), а другие, например, арабский или иврит — справа налево (RTL). Когда эти тексты смешиваются на одной странице, например, в комментариях или именах пользователей, браузер не всегда может корректно определить, в каком порядке отображать символы, особенно знаки препинания. Это может привести к визуальным ошибкам, когда точка или двоеточие оказываются не на своем месте. Для решения этой проблемы в HTML существуют специальные теги, которые позволяют управлять направлением текста. Эти инструменты помогают разработчикам создавать интерфейсы, которые одинаково хорошо выглядят для пользователей, независимо от их языка. В этой серии заданий вы на практике научитесь использовать теги для управления двунаправленным текстом, чтобы обеспечить правильное и предсказуемое отображение смешанного контента. Вы поработаете с bdo и bdi, чтобы ваши веб-страницы были по-настоящему глобальными.

Список тем

Принудительное изменение направления текста

id: 37798_bidi-task-1

Самый простой способ управлять направлением текста — это принудительно его изменить. Вставьте правильный тег, чтобы слово 'привет' отобразилось в обратном порядке (справа налево). Атрибут `dir` уже установлен.

CSS

p {
  font-size: 18px;
  color: #333;
  border: 1px solid #ccc;
  padding: 15px;
  border-radius: 5px;
  background-color: #f9f9f9;
}

                     <p>
  Слово в обратном порядке: <input1 dir="rtl">привет</input1>
</p>

HTML

<p>
  Слово в обратном порядке: <input1 dir="rtl">привет</input1>
</p>

Для принудительного переопределения направления текста используется тег `<bdo>` (Bi-Directional Override). Он заставляет весь вложенный контент отображаться в заданном направлении.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Обязательный атрибут для bdo

id: 37798_bidi-task-2

Тег `<bdo>` не работает без специального атрибута, который указывает направление. Добавьте пропущенный атрибут, чтобы имя пользователя 'USER' отобразилось справа налево.

CSS

.username {
  color: #007bff;
  font-weight: bold;
  background: #e7f3ff;
  padding: 2px 6px;
  border-radius: 4px;
}

                     <p>
  Имя пользователя: <bdo input1="rtl" class="username">USER</bdo>
</p>

HTML

<p>
  Имя пользователя: <bdo input1="rtl" class="username">USER</bdo>
</p>

Тегу `<bdo>` всегда требуется атрибут `dir` (сокращение от 'direction'), чтобы указать браузеру, в каком направлении отображать текст: `ltr` (слева направо) или `rtl` (справа налево).

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Указание направления справа налево

id: 37798_bidi-task-3

Теперь, когда вы знаете тег и его атрибут, укажите правильное значение для атрибута `dir`, чтобы арабское слово 'مرحبا' (привет) корректно отображалось вместе с восклицательным знаком.

CSS

.arabic-text {
  font-size: 20px;
  color: #28a745;
}

                     <p class="arabic-text">
  <bdo dir="input1">!مرحبا</bdo>
</p>

HTML

<p class="arabic-text">
  <bdo dir="input1">!مرحبا</bdo>
</p>

Атрибут `dir` принимает два основных значения: `ltr` (left-to-right, слева направо) и `rtl` (right-to-left, справа налево). Вам нужно использовать `rtl`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Изоляция текста с неизвестным направлением

id: 37798_bidi-task-4

В списке комментариев имя пользователя может быть на любом языке. Оберните имя 'مستخدم' в специальный тег, который изолирует его от остального текста, чтобы двоеточие и статус 'online' остались на своих местах.

CSS

.comment {
  padding: 10px;
  border: 1px solid #eee;
  margin-top: 10px;
}
.user {
  font-weight: bold;
  color: #d63384;
}

                     <div class="comment">
  <input1 class="user">مستخدم</input1>: online
</div>

HTML

<div class="comment">
  <input1 class="user">مستخدم</input1>: online
</div>

Для безопасной вставки текста с неизвестным направлением (например, контента от пользователей) используется тег `<bdi>` (Bi-Directional Isolate). Он позволяет браузеру автоматически определить направление внутри тега, не ломая отображение окружающего текста.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Сравнение bdo и bdi

id: 37798_bidi-task-5

Посмотрите на первый пример: `bdo` принудительно меняет направление всего, включая дефис и число, что неверно. Во втором примере используйте правильный тег, чтобы изолировать только имя пользователя и исправить отображение.

CSS

p {
  margin-bottom: 15px;
  font-family: monospace;
  font-size: 16px;
}
.wrong {
  color: red;
}
.correct {
  color: green;
}

                     <div>
  <p>Неправильно с bdo: <span class="wrong"><bdo dir="rtl">مستخدم - 105</bdo></span></p>
  <p>Правильно: <span class="correct"><input1>مستخدم</input1> - 105</span></p>
</div>

HTML

<div>
  <p>Неправильно с bdo: <span class="wrong"><bdo dir="rtl">مستخدم - 105</bdo></span></p>
  <p>Правильно: <span class="correct"><input1>مستخدم</input1> - 105</span></p>
</div>

Тег `<bdo>` меняет направление всего содержимого без разбора. Тег `<bdi>`, напротив, изолирует только нужную часть, позволяя браузеру корректно отобразить и само имя, и следующий за ним текст.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Имена пользователей в списке

id: 37798_bidi-task-6

В списке участников есть пользователи с именами на разных языках. Оберните каждое имя в правильный тег, чтобы номера (1. и 2.) и сами имена отображались корректно и единообразно.

CSS

ul {
  list-style-type: none;
  padding-left: 0;
}
li {
  background: #f0f0f0;
  padding: 8px;
  margin-bottom: 5px;
  border-radius: 4px;
}

                     <ul>
  <li>1. <input1>David</input1></li>
  <li>2. <input2>إيان</input2></li>
</ul>

HTML

<ul>
  <li>1. <input1>David</input1></li>
  <li>2. <input2>إيان</input2></li>
</ul>

Чтобы гарантировать правильное отображение для каждого элемента списка, независимо от языка имени, оберните каждое имя в тег `<bdi>`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Полная и надежная структура

id: 37798_bidi-task-7

Создайте полную разметку для вывода названия продукта, которое может быть на любом языке. Используйте тег для изоляции и добавьте атрибут, который явно указывает браузеру автоматически определять направление текста.

CSS

.product-title {
  font-weight: bold;
  font-size: 1.1em;
}
.label {
  color: #555;
}

                     <div>
  <span class="label">Название:</span>
  <input1 input2="input3" class="product-title">كتاب</input1>
</div>

HTML

<div>
  <span class="label">Название:</span>
  <input1 input2="input3" class="product-title">كتاب</input1>
</div>

Используйте тег `<bdi>`. Хотя он отлично работает и сам по себе, хорошей практикой считается добавление к нему атрибута `dir` со значением `auto`. Это делает ваш код более явным и надежным.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку