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>

Account Name

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