HTML5 & CSS3 リファレンス - <bdi> * （双方向テキスト（新））

<bdi> * - 双方向テキスト（新）

■ 概要

項　　目	説　　明
記述形式	<bdi>～</bdi>
対応ブラウザー	H5+ / e9+ / Fx4+ / Op11.1+ / Ch5+ / Sa4.1+
種　　類（カテゴリー）	フロー・コンテンツ，フレージング・コンテンツ，パルパブル・コンテンツ
置ける場所	フレージング・コンテンツが記入できる場所
内包要素（コンテンツ・モデル）	フレージング・コンテンツ（だだし，dir属性がこの要素では特別な意味をもつ）（コンテンツ・モデル: カテゴリー）

■ 解説

<bdi> は BiDIrectional（双方向）の略で，英語とヘブライ語が混ざるような双方向テキストにおいて，周囲の方向と独立して存在する区分を示すのに用いられます。

例えば，右から左に読む言語圏の「ハロイ」さん（右から読むので「イ・ロ・ハ」さんと読みます）が，左から右に読む英語圏の文書（双方向テキストをサポートする Unicode文書）に登場する場合，「Hello イロハ」と入力しておくと，ブラウザーにはちゃんと「Hello ハロイ」と表示されます。　しかし，「Hello イロハ！」と入力した場合，ブラウザーは「！」が左から読む文章の一部なのか，右から読む単語の一部なのか判断することができず，「Hello！ハロイ」（ハロー！イ・ロ・ハ）と表示してしまうことがあります。

この問題を防ぐために，「Hello <bdi>イロハ</bdi>！」と記述することにより，「イロハ」の部分のみが右から読む単語であるとブラウザーに判断させ，「Hello ハロイ！」と表示させることができるようになります。

■ 属性

種　　類	名　　称
【固有属性】	なし
【グローバル属性】	accesskey，class，contenteditable ， dir， hidden ，id， lang，spellcheck ，style， tabindex，title，translate
【ARIA role属性】で指定可能な値（役割）	任意の値（役割）
【ARIA aria-* 属性】で指定可能なもの	ARIA グローバル状態とプロパティ，指定可能な役割の任意の状態とプロパティ
備　　考	dir属性がこの要素では特別な意味をもつ。

■ CSSプロパティ

種　　類	名　　称
【よく使うもの】

■ 使用例

HTMLソース
HTML <body> ～ </body>	Hello <bdi>イロハ</bdi>！