HTML の dir 属性
HTMLの要素に指定するdir属性とは、文章の流れる方向を指定する属性です。文章の流れる方向は言語によって異なります。英語のように左から右へ流れる言語もあれば、アラビア語のように右から左へ流れる言語もあります。dir属性は、この文書の表示方向を指定します。
構文
dir 属性は、要素のテキストの方向性を指定する。dir 属性は、以下のキーワードと状態からなる列挙型属性である。
- ltr
- 要素の内容が明示的に方向性を持った左から右へのテキストであることを示す。(left-to-right)
次に示す言語は、左から右へ書く。
左から右書く言語 言語 lang 英語 en 日本語 ja 韓国語 ko ポルトガル語 pt 中国語 zh - rtl
- 要素の内容が明示的に方向性を持った右から左へのテキストであることを示す。(right-to-left)
次に示す言語は、右から左へ書く。
右から左へ書く言語 文字 言語 lang アラビア文字 アラビア語 ar ウルドゥー語 ur クルド語 ダリ―語 ペルシア語 fa ヘブライ文字 ヘブライ語 he イディッシュ語 yi シリア文字 シリア語 - auto
- 要素の内容が明示的に方向性を持ったテキストであることを示すが、方向性は要素の内容を用いてプログラム的に決定されるべきものである。
テキストの方向を自動的に判定する。
<tag dir="auto">テキストの方向を左から右 (left to right) に設定する。
<tag dir="ltr">テキストの方向を右から左 (right to left) に設定する。
<tag dir="rtl">サンプル
HTML の dir 属性に ltr を指定するサンプルを次に示す。
<p dir="ltr">Hello!</p>Hello!
<ul dir="ltr">
<li>English</li>
<li>日本語</li>
</ul>- English
- 日本語
<fieldset dir="ltr">
<legend>Account</legend>
<label for="i1">Name</label>
<input type="text" id="i1">
</fieldset>HTML の dir 属性に rtl を指定するサンプルを次に示す。
<p dir="rtl">שָׁלוֹם</p>שָׁלוֹם
<ul dir="rtl">
<li>עברית</li>
<li>العربية</li>
</ul>- עברית
- العربية
<fieldset dir="rtl">
<legend>שָׁלוֹם</legend>
<label for="i2">שָׁלוֹם</label>
<input type="text" id="i2">
</fieldset>グローバル属性
dirはHTMLにおける全ての要素に指定できるグローバル属性である。
省略可能
全ての要素において、dir属性の指定は省略できる。dir属性の指定を省略した場合、テキストの方向は自動的に判定される。
CSS
dir 属性の代わりに CSS の direction プロパティで文章が流れる方向を指定することもできる。
<p style="direction: rtl">שָׁלוֹם</p>שָׁלוֹם
JavaScript
JavaScript からは element オブジェクトの dir プロパティで dir 属性を参照できる。
<p id="example">Hello!</p>
<script>
document.getElementById('example').dir = 'ltr'
</script>関連記事
関連記事
参考文献
Web Hypertext Application Technology Working Group (2022) "Semantics, structure, and APIs of HTML documents" HTML Living Standard