<bdi>

アラビア語のような右から左に書かれる文書と左から右の文書を混ぜて使用する場合に使用します。

Unicodeでは、アラビア語は普通に右から左に表示されますが、
アラビア数字等のアラビア語でも他の言語でも使われるような文字や記号がアラビア文字に続いた場合、
右から左に表示されておかしな表示になってしまいます。
それを避けるために使用し、<bdi>で囲まれた部分は前後の文章の方向と隔離されます。

HTML5から新規導入された要素ですが、比較的古いブラウザでも機能するようです。

例

<ul>
<li>User <bdi>jcranmer</bdi>: 12 posts.
<li>User <bdi>hober</bdi>: 5 posts.
<li>User <bdi>إيان</bdi>: 3 posts.
<li>User إيان: 3 posts.
</ul>

実際の表示

User jcranmer: 12 posts.
User hober: 5 posts.
User إيان: 3 posts.
User إيان: 3 posts.

例は、W3Cの例に、わかりにくいので<bdi>を外した行を追加しています。
"posts" は英字なので左から右に表示されますが、": 3"はアラビア語でも使われる？ため右から左になってしまいます。
<bdi>を適用すると、その部分だけ文字方向が隔離されます。