HTML5タグリファレンス
bdi

投稿 | | カテゴリー タグリファレンス, HTML5
HTML5で追加

<bdi>要素は、それが双方向テキスト(bidiテキスト)の中で周囲から隔離されるべきテキストの範囲であることを表します。主に、ユーザーからの入力値など未知の言語で作成される可能性のあるコンテンツを組み込む場合に使用します。
デフォルトでは、要素の内容の最初の強く型付けされた文字を見て表記の方向がどちらになるかを判断します(auto)。そのままでうまくいかない場合はdir属性で文字の表記方向を指定します。


カテゴリ
フロー・コンテンツ、フレージング・コンテンツ、パルパブル・コンテンツ
配置場所
フレージング・コンテンツが置ける場所。
内容
フレージング・コンテンツ
属性
グローバル属性

accesskey, class, contenteditable, data-*, dir, hidden, id, lang, spellcheck, style, tabindex, title, translate

<bdi>要素のdir属性は特別な意味を持ちます。

サンプル

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>HTML5 › bdi</title>
</head>
<body>
<h1>HTML5 › bdi</h1>
<p>
下の例では、ユーザ名はユーザが提出した記事の数とともに表示されます。もしBDI要素がなければ、アラビア語のユーザー名は記事数の3とともに右から左へ表記された混乱を来す結果になるでしょう。もちろん上の2つにBDI要素は必要ありませんが、何か支障があるわけでもありません。
</p>
<ul>
<li>User <bdi>jcranmer</bdi>: 12 posts.
<li>User <bdi>hober</bdi>: 5 posts.
<li>User <bdi>إيان</bdi>: 3 posts.
</ul>
</body>
</html>