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

Введение

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

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

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html(("HTML")) -.-> html/FormsandInputGroup(["Forms and Input"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/TextContentandFormattingGroup -.-> html/text_dir("Text Direction") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/LayoutandSectioningGroup -.-> html/access_cons("Accessibility Considerations") html/FormsandInputGroup -.-> html/forms("Form Elements") html/FormsandInputGroup -.-> html/form_access("Accessibility in Forms") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") html/AdvancedElementsGroup -.-> html/adv_access("Accessibility for Advanced Elements") subgraph Lab Skills html/basic_elems -.-> lab-70710{{"Форматирование двухнаправленного текста с использованием BDI"}} html/head_elems -.-> lab-70710{{"Форматирование двухнаправленного текста с использованием BDI"}} html/text_dir -.-> lab-70710{{"Форматирование двухнаправленного текста с использованием BDI"}} html/doc_flow -.-> lab-70710{{"Форматирование двухнаправленного текста с использованием BDI"}} html/access_cons -.-> lab-70710{{"Форматирование двухнаправленного текста с использованием BDI"}} html/forms -.-> lab-70710{{"Форматирование двухнаправленного текста с использованием BDI"}} html/form_access -.-> lab-70710{{"Форматирование двухнаправленного текста с использованием BDI"}} html/inter_elems -.-> lab-70710{{"Форматирование двухнаправленного текста с использованием BDI"}} html/adv_access -.-> lab-70710{{"Форматирование двухнаправленного текста с использованием BDI"}} end

Настройка структуры файла 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>. Ниже приведенный код демонстрирует, как использовать тег <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 можно добавить, чтобы повысить доступность веб-страниц.