BDI を使った双方向テキストのフォーマット

はじめに

双方向テキスト（bidi）は、左から右と右から左の両方でテキストを書く書式設定スタイルです。複数の言語でコンテンツを書いている場合や、ユーザーが Web ページの既定の言語以外の言語で入力を行う場合には、非常に便利です。このような場合、<bdi> タグを使用すると、大きな利点があり、ユーザーエクスペリエンスを向上させることができます。

この実験では、HTML で双方向テキストを分離するために <bdi> タグをどのように使用するかを学びます。この実験が終了すると、ユーザーにやさしく、多言語対応を促進する Web コンテンツを作成できるようになります。

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

HTML ファイル構造を設定する

HTML ファイルの基本的なファイル構造を設定しましょう。好きなテキストエディタを開き、新しいファイルを作成して、index.html として保存します。

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

ユーザー入力用のフォームを作成する

次に、任意の言語で記述できるユーザーフィードバックを収集するためのフォームを作成します。このフォームは、前のステップで作成した body タグに追加されます。これを実現するには、index.html ファイルに次のコードを追加します。

<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>

上記のコードは、フィードバック用のラベル、フィードバック用の入力エリア、および送信ボタンを含む単純なフォームを作成します。

双方向テキストにタグを追加する

ユーザーがフィードバックで入力する任意の双方向言語が Web ページ上で正しく表示されるようにするには、<bdi> タグでそれを囲む必要があります。以下のコードブロックは、<bdi> タグの使用方法を示しています。

<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>

上記のコードには、上記の <bdi> で囲まれたユーザーフィードバックを出力として表示するコードブロックが含まれています。

安心してください。あなたの双方向テキストは、今や <bdi> タグによって正しく分離されています！では、フォームをテストしましょう。任意の Web ブラウザで index.html ファイルを開き、いくつかのフィードバックを入力します。このフィードバックには、多くの言語の文字、句読点、単語が含まれている場合があります。フォームを送信すると、出力エリアにフィードバックが表示されることがわかります。

ARIA を使ってアクセシビリティを向上させる

Web ページのアクセシビリティを向上させるには、ARIA 属性を追加することができます。ARIA は Accessible Rich Internet Applications の略です。ARIA 属性は、視覚障害、聴覚障害、身体障害など、幅広い障害のあるユーザーに対するアクセシビリティをサポートします。

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

aria-label 属性を使用することで、任意の HTML 要素にテキストラベルを付けて、アクセシビリティを向上させることができます。上記のコードブロックでは、<label> タグに aria-label を付けています。

まとめ

この実験では、HTML で双方向テキストを分離するために <bdi> タグをどのように使用するかを学びました。この実験の主な要点は以下の通りです。

双方向テキスト (bidi) は、複数の言語で書かれたテキストのフォーマットに役立ちます。
<bdi> タグは、双方向テキストのフォーマットにおいて、周囲から分離される必要があるテキストの範囲に使用されます。
<bdi> タグは、アラビア語やヘブライ語を含むさまざまな言語に役立ちます。
双方向テキストを正しく表示するには、まず <bdi> タグで囲み、その後 CSS を使用してスタイルを設定します。
Web ページのアクセシビリティを向上させるために ARIA 属性を追加できます。