使用 BDI 实现双向文本格式化

介绍

双向文本（Bi-Directional Text，简称 bidi）是一种格式化样式，其中文本从左到右和从右到左书写。当你在多种语言中编写内容，或者用户以网页默认语言以外的语言输入时，双向文本非常有用。在这种情况下，使用 <bdi> 标签可以极大地帮助你并改善用户体验。

在本实验中，你将学习如何在 HTML 中使用 <bdi> 标签来隔离双向文本。通过本实验，你将能够创建既用户友好又支持多语言的网页内容。

注意：你可以在 index.html 中练习编码，并学习如何在 Visual Studio Code 中编写 HTML。请点击右下角的“Go Live”以在端口 8080 上运行 Web 服务。然后，你可以刷新 Web 8080 标签以预览网页。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/FormsandInputGroup(["Forms and Input"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) 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 元素附加一个文本标签，以使其更具可访问性。在上面的代码块中，我们为 <label> 标签附加了一个 aria-label。

总结

在本实验中，你学习了如何使用 <bdi> 标签在 HTML 中隔离双向文本。以下是本实验的关键要点：

双向文本（bidi）有助于格式化以多种语言编写的文本。
<bdi> 标签用于隔离一段文本，使其与周围环境分开，以便进行双向文本格式化。
<bdi> 标签适用于多种语言，包括阿拉伯语和希伯来语。
要正确显示双向文本，首先用 <bdi> 标签包裹它，然后使用 CSS 进行样式设置。
可以添加 ARIA 属性以增强网页的可访问性。