HTML dir attribute

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>
<fieldset dir="ltr">
  <legend>Account</legend>
  <label for="i1">Name</label>
  <input type="text" id="i1">
</fieldset>
Account

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 属性の代わりに CSSdirection プロパティで文章が流れる方向を指定することもできる。

<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