ウェブランサー

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

取り扱い HTML5から追加された要素
カテゴリ フロー・コンテント
フレージング・コンテント
パルパブル・コンテント
親にできる要素 フレージング・コンテンツが期待される場所
子にできる要素 フレージング・コンテンツ
対応ブラウザ <bdi>の対応状況を確認する

<bdi>タグの説明

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

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

この要素はHTML5で追加されたタグです。ブラウザのサポート状況が安定しているとは言えないため、CSSの

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

<bdi>タグの特徴

<bdi>はページ内に複数使うことができます。この要素自体を入れ子構造にすることもできますが、通常そのような使い方はしないでしょう。

<bdi>タグに指定できる属性

グローバル属性
基本的に全てのHTML要素に共通で指定できる属性です。
イベントハンドラ
基本的に全てのHTML要素に指定することができるコンテンツ属性です。

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

<bdi>を使ったマークアップのサンプルを以下に示します。

HTML
<p>この文章の段落。「<bdi>右書きの文字列</bdi>」。この文章の段落。</p>
<p>この文章の段落。「<bdi dir="rtl">右書きの文字列</bdi>」。この文章の段落。</p>
表示確認

この文章の段落。「右書きの文字列」。この文章の段落。

この文章の段落。「右書きの文字列」。この文章の段落。

上記のサンプルを表示して「右書きの文字列」がそのまま左書きで表示されている場合は、お使いのブラウザが<bdi>要素をサポートしていないことになります。

<bdi>に関連するHTMLタグ

テキストの意味付け要素
<a> リンクを指定する
<abbr> 略語(頭字語以外)であることを表す
<b> 文字を太文字にする
<br> 改行を行う
<bdi> ページの書字方向とは別の書字方向を指定する
<bdo> 書字方向を指定する
<cite> 出典先、参照先を表す
<code> プログラムやスクリプトとして扱う
<dfn> 定義用語として扱う
<em> 強調する
<i> 文字を斜体(イタリック)にする
<kbd> キーボード入力される文字であることを示す
<mark> 文章内のテキストをハイライトして目立たせる
<q> 引用文であることを表す(短文用)
<rb> ルビをふる文字を指定する
<ruby> ルビの範囲を指定する
<rp> ルビを囲む記号を指定する
<rt> ルビの内容を指定する
<rtc> ルビテキストの集まりを指定する
<s> 正確ではなくなった内容であることを表す
<samp> プログラムによる出力結果のサンプルとして扱う
<small> 細則のような付帯注釈を表す
<span> インライン要素としての範囲を指定する
<strong> 重要な情報として扱う
<sub> 下付き文字として表示する
<sup> 上付き文字として表示する
<time> 日付や時刻を正確に示す
<u> 文字に下線(アンダーライン)を引く
<var> 変数や引数として扱う
<wbr> <nobr>内での改行位置の指定(NN独自)