bdi要素

このエントリーをはてなブックマークに追加

bdi要素は双方向テキストにおいて周囲のテキストとは異なるテキストをマークアップするための要素です。

フレージングコンテンツ内で利用することができ、双方向テキストの制御が可能です。

双方向テキストとは言語による文字の並び順制御で、次のように記述した場合アラビア語の場合だけ他の言語と異なる並び順になります。

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

上記のようにマークアップを行うと以下のように表示されます。

bdi要素のサンプル

アラビア語だけ名前の表示順が代わるのがわかるでしょう。これをbdi要素で制御を行うと以下のようになります

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

bdi要素のサンプル

bdi要素ではdir属性が特別な意味をもち、デフォルトは「auto」ですが、「ltr」を指定することで左から右へ、「rtl」を指定することで右から左への書字方向を指定できます。

参考URL

4.6.24 The bdi element - W3C

登録日 : 2013年11月12日 最終更新日 : 2013年11月25日

同じカテゴリー(テキスト)のエントリー

検索

スポンサードリンク

バージョン

リファレンス