<bdi> - 双方向テキスト

概要

bdi は bidirectional(双方向)の略で、英語などの左から右に読む言語と、アラビア語などの右から左に読む言語が混在するテキストにおいて、周囲の方向と独立して存在する区分を示します。

例えば、アラビアの محمد(モハメッド) さんが 82ポイント、米国の Smith(スミス) さんが 75ポイントの場合に下記の様に記述したとします。

<div>محمد : 80 points</div>
<div>Smith : 75 points</div>

この時ブラウザは「 : 80」が左から読む文書の一部なのか、右から読む文書の一部なのかを判断することができず、下記の様に表示してしまいます。

محمد : 80 points

Smith : 75 points

محمد を <bdi>～</bdi> で囲むことによりこの問題を防ぐことができます。

HTML

<div><bdi>محمد</bdi> : 80 points</div>
<div>Smith : 75 points</div>

表示

محمد : 80 points

Smith : 75 points

初版:2011年5月29日最終更新:2024年12月29日

https://www.tohoho-web.com/html/bdi.htm