<bdi> ページの書字方向とは別の書字方向を指定する

取り扱い 現行の標準
カテゴリ フロー・コンテンツ
フレージング・コンテンツ
パルパブル・コンテンツ
親にできる要素 フレージング・コンテンツを受け入れる要素
子にできる要素 フレージング・コンテンツ
対応ブラウザ caniuseで確認

<bdi>タグの説明

<bdi>は、ページに指定されている書字方向とは別の書字方向を、特定の範囲に対して指定する場合に使用します。文章の一部を他の部分とは異なる書字方向で書式を設定したい場合に、開始から終わりまでの範囲をマークアップします。

「書字方向」とは、文字を書き進める方向の事で、通常HTMLで書かれたウェブページは「左横書き」を想定しています。例えば、左から右へ書かれている文章の中にアラビア語の引用文があった時に、その部分だけを右から左へ書かれた文字列として表示することが可能となります。

「bdi」とは「Bi-Directional Isolation」の略で、「分離双方向要素」というような意味を持っています。この要素によって隔離されたテキストは、周囲の書字方向に影響を及ぼしません。

<bdi>タグの特徴

  • レイアウトの初期値はインラインです。文章の改行には影響を与えません。
  • 視覚的な効果は特に与えられません。必要に応じてスタイルシートを調整して下さい。
  • 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることは適切ではありません。

<bdi>に指定できる主な属性

グローバル属性
全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
イベントハンドラ
全てのHTML要素に指定できるコンテンツ属性です。

<bdi>の使い方とサンプル

このタグを使ったマークアップのサンプルは以下になります。日本語の文章は左から右へと流れていくので、通常ユーザーエージェントは自動的にこれを判別します。

HTML
<p>この文章の段落。特定の文字列。この文章の段落。</p>
<p>この文章の段落。<bdi>特定の文字列。</bdi>この文章の段落。</p>
<p>123 عربي. One Tow Three.</p>
<p>123 <bdi>عربي.</bdi> One Tow Three.</p>
表示確認

この文章の段落。特定の文字列。この文章の段落。

この文章の段落。特定の文字列。この文章の段落。

123 عربي. One Tow Three.

123 عربي. One Tow Three.

<bdi>に関連するHTMLタグ

文字列の表現を指定する要素
<div> ブロックレベル要素としての範囲を指定
<span> インライン要素としての範囲を指定する
<br> 改行を行う
<wbr> 文章の中で改行可能位置を指定する
<b> 文字を太字にする
<mark> 文章の中で目立たせたい箇所をマーキングする
<pre> ソースを整形済みテキストとして表示する
<bdi> ページの書字方向とは別の書字方向を指定する
<bdo> 書字方向を指定する
<ruby> ルビを振る文字列の範囲を指定する
<rt> ルビの内容を指定する
<rp> ルビが非対応な環境で読みがなを囲う記号を指定する
<rtc> ルビテキストの集まりを指定する
<sub> 下付き文字として表示する
<sup> 上付き文字として表示する
<details> 折りたたみ可能なディスクロージャー・ウィジェットを設置する
<summary> 折りたたみ可能なディスクロージャー・ウィジェットの概要を設定する