bdi - 双方向テキスト書式の範囲

書字方向の異なる言語が混在する文書において、括弧やコロン、ピリオドが意図されない場所に配置されることがあります。
Unicodeの双方向アルゴリズムが働いた結果なのですが、これを「隔離」させ、周辺の文字から影響を受けないようします。
Unicode制御文字を挿入することでこの問題は解決できるのですが、どういったデータが入力されるか分からないWebアプリケーションにおいてはマークアップレベルでの解決が望まれることがあるため定義されています。
双方向アルゴリズムにおける bdi要素の扱いに関する要件は、CSSのunicode-bidiプロパティなどにより、間接的に実装しても構いません。

bdi要素のブラウザ別サポート状況

- ie6 ie7 ie8 ie9 firefox4 chorme safari5 opera10
bdi

コンテンツ属性

グローバル属性 すべての要素で共通に使える属性。HTML5で新たに定義された属性もあります。

「基本」のサンプル

HTMLコード

<p>この例では、ユーザー名が、そのユーザーが投稿した数と合わせて表示されています。
もし bdi要素が使われなかったとしたら、アラビア語のユーザーのユーザー名は、分かりにくいテキストになってしまうでしょう(双方向アルゴリズムでは、コロンと数字の "3" は、"posts" の次ではなく、"User" の次に来てしまいます。)。</p>
<ul>
 <li>User <bdi>jcranmer</bdi>: 12 posts.
 <li>User <bdi>hober</bdi>: 5 posts.
 <li>User <bdi>إيان</bdi>: 3 posts.
</ul>

プレビュー

対応していないブラウザでは正しくプレビューされません。

別ウィンドウで「基本」のサンプルプレビューを確認

原文(英語):(http://www.w3.org/TR/2011/WD-html5-20110113/text-level-semantics.html#the-bdi-element)