Bidirektionale Textformatierung mit BDI

Einführung

Bi-Directional Text (bidi) ist ein Formatierungsstil, bei dem Text sowohl von links nach rechts als auch von rechts nach links geschrieben wird. Dies ist sehr nützlich, wenn Sie Inhalte in mehreren Sprachen schreiben und auch wenn der Benutzer Eingaben in Sprachen außerhalb der Standardsprache Ihrer Webseite tätigt. In diesen Fällen kann das <bdi>-Tag Ihnen erheblich zugute kommen und die Benutzererfahrung verbessern.

In diesem Lab werden Sie lernen, wie Sie das <bdi>-Tag verwenden, um bidirektionalen Text in HTML zu isolieren. Am Ende dieses Labs werden Sie in der Lage sein, Webinhalte zu erstellen, die sowohl benutzerfreundlich als auch die Mehrsprachigkeit fördern.

Hinweis: Sie können im index.html programmieren und lernen, wie Sie HTML in Visual Studio Code schreiben. Klicken Sie bitte auf 'Go Live' in der unteren rechten Ecke, um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/FormsandInputGroup(["Forms and Input"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) 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{{"Bidirektionale Textformatierung mit BDI"}} html/head_elems -.-> lab-70710{{"Bidirektionale Textformatierung mit BDI"}} html/text_dir -.-> lab-70710{{"Bidirektionale Textformatierung mit BDI"}} html/doc_flow -.-> lab-70710{{"Bidirektionale Textformatierung mit BDI"}} html/access_cons -.-> lab-70710{{"Bidirektionale Textformatierung mit BDI"}} html/forms -.-> lab-70710{{"Bidirektionale Textformatierung mit BDI"}} html/form_access -.-> lab-70710{{"Bidirektionale Textformatierung mit BDI"}} html/inter_elems -.-> lab-70710{{"Bidirektionale Textformatierung mit BDI"}} html/adv_access -.-> lab-70710{{"Bidirektionale Textformatierung mit BDI"}} end

Aufbau der HTML-Dateistruktur

Lassen Sie uns die grundlegende Dateistruktur für unsere HTML-Datei aufbauen. Öffnen Sie Ihren bevorzugten Texteditor, erstellen Sie eine neue Datei und speichern Sie sie als index.html.

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

Erstellen eines Formulars für Benutzereingaben

Als nächstes werden wir ein Formular zur Sammlung von Benutzerfeedback erstellen, das in jeder Sprache geschrieben werden kann. Dieses Formular wird dem Body-Tag hinzugefügt, das Sie im vorherigen Schritt erstellt haben. Um dies zu erreichen, fügen Sie den folgenden Code in Ihre index.html-Datei hinzu:

<body>
  <h1>User Feedback Form</h1>

  <form>
    <label for="user-feedback">Enter your feedback here:</label>
    <br />
    <textarea name="user-feedback" id="user-feedback" rows="5"></textarea>
    <br />
    <button type="submit">Submit Feedback</button>
  </form>
</body>

Der obige Code erstellt ein einfaches Formular, das einen Label für das Feedback, einen Eingabebereich für das Feedback und einen Abschaltknopf enthält.

Fügen Sie das `<bdi>`-Tag zu bidirektionalem Text hinzu

Um sicherzustellen, dass jeder bidirektionale Text, den die Benutzer in das Feedback eingeben, auf der Webseite richtig angezeigt wird, müssen wir ihn mit dem <bdi>-Tag umschließen. Der folgende Codeblock zeigt, wie das <bdi>-Tag verwendet wird.

<body>
  <h1>User Feedback Form</h1>

  <form>
    <label for="user-feedback">Enter your feedback here:</label>
    <br />
    <textarea name="user-feedback" id="user-feedback" rows="5"></textarea>
    <br />
    <button type="submit">Submit Feedback</button>

    <div>
      <p>User Feedback:</p>

      <!-- Adding <bdi> Tag -->

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

// Script to display user feedback
<script>
  const feedbackDisplay = document.getElementById("feedback-display");
  const feedbackInput = document.getElementById("user-feedback");

  // Handle Form Submit
  document.querySelector("form").addEventListener("submit", (event) => {
    event.preventDefault();
    feedbackDisplay.innerHTML = feedbackInput.value;
  });
</script>

Der obige Code enthält einen Codeblock, der das oben gezeigte <bdi>-umschlossene Benutzerfeedback als Ausgabe anzeigt.

Seien Sie sich sicher, dass Ihr bidirektionaler Text jetzt richtig durch das <bdi>-Tag isoliert ist! Lassen Sie uns daher Ihr Formular testen. Öffnen Sie die index.html-Datei in einem beliebigen Webbrowser und geben Sie etwas Feedback ein. Dieses Feedback kann Buchstaben, Satzzeichen und Wörter aus vielen Sprachen enthalten. Beim Absenden des Formulars werden Sie beobachten, dass das Feedback im Ausgabebereich angezeigt wird.

Verbessern der Zugänglichkeit mit ARIA

Um die Zugänglichkeit Ihrer Webseite zu verbessern, können Sie ARIA-Attribute hinzufügen. ARIA steht für Accessible Rich Internet Applications. ARIA-Attribute unterstützen die Zugänglichkeit für Benutzer mit einer Vielzahl von Behinderungen wie Blindheit, Taubheit und eingeschränkter Mobilität.

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

Mit dem Attribut aria-label können wir einem beliebigen HTML-Element einen Textlabel hinzufügen, um es zugänglicher zu machen. Im obigen Codeblock haben wir einem <label>-Tag ein aria-label hinzugefügt.

Zusammenfassung

In diesem Lab haben Sie gelernt, wie das <bdi>-Tag zum Isolieren von bidirektionalem Text in HTML verwendet wird. Folgende sind die wichtigsten Erkenntnisse aus diesem Lab:

Bidirektionaler Text (bidi) hilft bei der Formatierung von Text, der in mehreren Sprachen geschrieben ist.
Das <bdi>-Tag wird auf einem Textabschnitt verwendet, der von seiner Umgebung für die bidirektionale Textformatierung isoliert werden soll.
Das <bdi>-Tag ist für eine Vielzahl von Sprachen nützlich, einschließlich Arabisch und Hebräisch.
Um bidirektionalen Text richtig anzuzeigen, umschließen Sie ihn zunächst mit dem <bdi>-Tag und verwenden Sie dann CSS, um ihn zu gestalten.
ARIA-Attribute können hinzugefügt werden, um die Zugänglichkeit von Webseiten zu verbessern.