HTML の BDO を使った双方向テキスト

はじめに

HTMLの<bdo>タグは、主に異なる言語が混在している場合に、テキストの方向を変更するために使用されます。このタグは、右から左に読む言語（例えばアラビア語やヘブライ語）と、左から右に読む言語（例えば英語）を一緒に表示する必要がある場合に便利です。この実験では、HTMLの<bdo>タグを使用して双方向のテキストを作成する方法を学びます。

注: index.html でコーディングを練習し、Visual Studio CodeでHTMLを書く方法を学ぶことができます。画面右下の「Go Live」をクリックして、ポート8080でウェブサービスを実行します。その後、Web 8080 タブを更新して、ウェブページをプレビューできます。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) 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/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{{"HTML の BDO を使った双方向テキスト"}} html/head_elems -.-> lab-70712{{"HTML の BDO を使った双方向テキスト"}} html/lang_decl -.-> lab-70712{{"HTML の BDO を使った双方向テキスト"}} html/text_dir -.-> lab-70712{{"HTML の BDO を使った双方向テキスト"}} html/inter_elems -.-> lab-70712{{"HTML の BDO を使った双方向テキスト"}} end

HTMLタグ

新しいファイルを作成し、「index.html」と名付けます。

次のコードをindex.htmlファイルに追加して、HTMLタグを開きます。

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

bdoタグの追加

ボディタグの間に、<bdo>タグを使用して双方向のテキストを作成するために次のコードを追加します。

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

ここでは、双方向のテキストの簡単な例を作成しました。dir属性を追加して、bdoタグ内のテキストの方向を指定します。rtl値は、ブラウザに対して右から左にテキストを読むように指示し、ltr値は、ブラウザに対して左から右にテキストを読むように指示します。

index.htmlファイルを保存し、ウェブブラウザで開きます。これで、ページに双方向のテキストが表示されているはずです。

まとめ

<bdo>タグは、ウェブページ上で双方向のテキストを作成するために使用されます。これは、右から左に読む言語と左から右に読む言語を一緒に表示するのに役立ちます。dir属性は、bdoタグ内のテキストの方向を指定するために使用され、ltrまたはrtlの2つの値を持つことができます。テキストの意味を変える可能性があるため、このタグを注意深く使用してください。