Bidirektionaler Text mit HTML BDO

Einführung

Das HTML <bdo>-Tag wird verwendet, um die Richtung des Textes zu ändern, insbesondere in Situationen, in denen verschiedene Sprachen gemischt sind. Das Tag ist nützlich, wenn Sie Sprachen anzeigen müssen, die von rechts nach links gelesen werden, wie Arabisch oder Hebräisch, zusammen mit Sprachen, die von links nach rechts gelesen werden, wie Englisch. In diesem Lab werden Sie lernen, wie Sie bidirektionalen Text mit dem HTML <bdo>-Tag erstellen.

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/AdvancedElementsGroup(["Advanced Elements"]) html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/BasicStructureGroup -.-> html/lang_decl("Language Declaration") html/TextContentandFormattingGroup -.-> html/text_dir("Text Direction") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") subgraph Lab Skills html/basic_elems -.-> lab-70712{{"Bidirektionaler Text mit HTML BDO"}} html/head_elems -.-> lab-70712{{"Bidirektionaler Text mit HTML BDO"}} html/lang_decl -.-> lab-70712{{"Bidirektionaler Text mit HTML BDO"}} html/text_dir -.-> lab-70712{{"Bidirektionaler Text mit HTML BDO"}} html/inter_elems -.-> lab-70712{{"Bidirektionaler Text mit HTML BDO"}} end

HTML-Tag

Erstellen Sie eine neue Datei und benennen Sie sie "index.html".

Fügen Sie den folgenden Code in Ihre index.html-Datei hinzu, um das HTML-Tag zu öffnen:

<!doctype html>
<html>
  <head>
    <title>Bi-Directional Text using bdo tag</title>
  </head>
  <body></body>
</html>

Hinzufügen des bdo-Tags

Zwischen den Body-Tags fügen Sie den folgenden Code hinzu, um einen bidirektionalen Text mit dem <bdo>-Tag zu erstellen:

<h3>Bi-Directional Text using bdo tag:</h3>
<bdo dir="rtl">مرحبا بالعالم</bdo><br />
<bdo dir="ltr">Hello world</bdo>

Hier haben wir ein einfaches Beispiel für einen bidirektionalen Text erstellt. Das dir-Attribut wird hinzugefügt, um die Richtung des Textes im bdo-Tag anzugeben. Der Wert rtl sagt dem Browser, den Text von rechts nach links zu lesen, während der Wert ltr dem Browser sagt, den Text von links nach rechts zu lesen.

Speichern Sie Ihre index.html-Datei und öffnen Sie sie in einem Webbrowser. Sie sollten jetzt den bidirektionalen Text auf der Seite sehen.

Zusammenfassung

Das <bdo>-Tag wird verwendet, um bidirektionalen Text auf einer Webseite zu erstellen. Es hilft, Sprachen, die von rechts nach links gelesen werden, zusammen mit Sprachen, die von links nach rechts gelesen werden, anzuzeigen. Das dir-Attribut wird verwendet, um die Richtung des Textes im bdo-Tag anzugeben und kann zwei Werte haben: entweder ltr oder rtl. Verwenden Sie das Tag mit Vorsicht, da es die Bedeutung des Textes ändern kann.