Форматирование двухнаправленного текста с использованием BDI

Введение

Двухнаправленный текст (bidi) - это стиль форматирования, при котором текст записывается как слева направо, так и справа налево. Это весьма полезно, когда вы пишете контент на нескольких языках, а также когда пользователь вводит данные на языках, отличных от языка по умолчанию вашего веб-страницы. В таких случаях использование тега <bdi> может значительно помочь вам и улучшить пользовательский опыт.

В этом практикуме вы научитесь использовать тег <bdi> для изоляции двухнаправленного текста в HTML. В конце практикума вы сможете создавать веб-контент, который будет удобен для пользователя и способствовать развитию многоязычности.

Примечание: Вы можете практиковать программирование в index.html и изучить Как писать HTML в Visual Studio Code. Нажмите кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем вы можете обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Настройте структуру HTML-файла

Построим базовую структуру файла для нашего HTML-файла. Откройте предпочитаемый текстовый редактор, создайте новый файл и сохраните его как index.html.

<!doctype html>
<html>
  <head>
    <title>Bi-Directional Text Using HTML</title>
  </head>
  <body></body>
</html>

Создайте форму для ввода пользователем

Далее мы создадим форму для сбора обратной связи от пользователя, которая может быть написана на любом языке. Эта форма будет добавлена в тег body, который вы создали на предыдущем шаге. Для этого добавьте следующий код в файл index.html:

<body>
  <h1>Форма обратной связи от пользователя</h1>

  <form>
    <label for="user-feedback">Введите здесь свою обратную связь:</label>
    <br />
    <textarea name="user-feedback" id="user-feedback" rows="5"></textarea>
    <br />
    <button type="submit">Отправить обратную связь</button>
  </form>
</body>

В приведенном выше коде создается простая форма, содержащая метку для обратной связи, область ввода для обратной связи и кнопку отправки.

Добавьте тег к двухнаправленному тексту

Чтобы убедиться, что любой двухнаправленный язык, введенный пользователем в обратной связи, корректно отображается на веб-странице, его необходимо обернуть тегом <bdi>. Ниже приведенный код демонстрирует, как использовать тег <bdi>.

<body>
  <h1>Форма обратной связи от пользователя</h1>

  <form>
    <label for="user-feedback">Введите здесь свою обратную связь:</label>
    <br />
    <textarea name="user-feedback" id="user-feedback" rows="5"></textarea>
    <br />
    <button type="submit">Отправить обратную связь</button>

    <div>
      <p>Обратная связь от пользователя:</p>

      <!-- Добавление тега <bdi> -->

      <p><bdi id="feedback-display"></bdi></p>
    </div>
  </form>
</body>

// Скрипт для отображения обратной связи от пользователя
<script>
  const feedbackDisplay = document.getElementById("feedback-display");
  const feedbackInput = document.getElementById("user-feedback");

  // Обработка отправки формы
  document.querySelector("form").addEventListener("submit", (event) => {
    event.preventDefault();
    feedbackDisplay.innerHTML = feedbackInput.value;
  });
</script>

В приведенном выше коде есть блок кода, который отображает обратную связь от пользователя, обернутую в <bdi>, в качестве вывода.

Убедитесь, что ваш двухнаправленный текст теперь правильно изолирован тегом <bdi>! Теперь давайте протестируем вашу форму. Откройте файл index.html в любом веб-браузере и введите некоторую обратную связь. Эта обратная связь может содержать буквы, знаки препинания и слова на многих языках. При отправке формы вы увидите, что обратная связь отображается в области вывода.

Улучшите доступность с использованием ARIA

Для повышения доступности вашей веб-страницы вы можете добавить атрибуты ARIA. ARIA расшифровывается как Accessible Rich Internet Applications (Доступные богатые интернет-приложения). Атрибуты ARIA обеспечивают доступность для пользователей с различными инвалидностями, такими как слепота, глухота и ограниченная мобильность.

<label for="user-feedback" aria-label="Enter your feedback"></label>

С использованием атрибута aria-label мы можем прикрепить текстовую метку к любому HTML-элементу, чтобы сделать его более доступным. В приведенном выше коде мы прикрепили aria-label к тегу <label>.

Резюме

В этом практическом занятии вы узнали, как использовать тег <bdi> для изоляции двухнаправленного текста в HTML. Вот основные выводы из этого практического занятия:

Двухнаправленный текст (bidi) помогает форматировать текст, написанный на нескольких языках.
Тег <bdi> применяется к фрагменту текста, который должен быть изолирован от окружающей его среды для форматирования двухнаправленного текста.
Тег <bdi> полезен для различных языков, в том числе арабского и иврита.
Чтобы правильно отобразить двухнаправленный текст, сначала оберните его тегом <bdi>, а затем используйте CSS для стилизации.
Атрибуты ARIA можно добавить, чтобы повысить доступность веб-страниц.