dir 属性

3.2.5.6 dir 属性

dir 属性は要素のテキストの方向性を指定します。この属性は、次のキーワードと状態を持った列挙属性です:

ltr キーワード: ltr 状態に相当

該当の要素のコンテンツは、明示的に、方向に関して隔離された、左から右に向かうテキストである、ということを表します。

rtl キーワード: rtl状態に相当

該当の要素のコンテンツは、明示的に、方向に関して隔離された、右から左に向かうテキストである、ということを表します。

auto キーワード: auto状態に相当

該当の要素のコンテンツは、明示的に方向に関して隔離されたテキストだが、その方向は該当の要素のコンテンツを使ってプログラム的に決定される、ということを表します(後述の通り)。

この状態によって使われる経験則は、まったく正確ではありません(双方向アルゴリズムにおける段落レベル判定に類似した方法では、強い方向性を持つ最初の文字を見るに過ぎません)。ウェブ制作者は、テキストの方向が本当に分からず、サーバー側にも使えそうな経験則がない場合にのみ、最後の手段として、この値を使うにとどめることが推奨されます。 [BIDI]

textareapre 要素には、経験則に段落レベル判定が適用されます。

この属性は、不正な値が指定されたときのデフォルトや、値の指定がなかったときのデフォルトを持ちません。


要素(HTML 要素だけでなくあらゆる要素)の方向性は 'ltr' もしくは 'rtl' のいずれかになります。そして、次の一覧にある手順のうち最初に適合する値に決定されます:

要素の dir 属性が ltr 状態にある場合
要素がルート要素dir 属性が定義された状態にない場合 (つまり存在しないか不正な値を持つ場合)
要素が input 要素でその type 属性が Telephone 状態にあり、かつ、dir 属性が定義された状態にない場合 (つまり存在しないか不正な値を持つ場合)

この要素の方向性は 'ltr'。

要素がの dir 属性が rtl 状態にある場合

この要素の方向性は 'rtl'。

要素が input 要素でその type 属性が Text, Search, Telephone, URL, E-mail 状態のいずれかにあり、かつ、dir 属性が auto 状態にある場合
要素が textarea 要素で、dir 属性が auto 状態にある場合

要素のに双方向性文字タイプ AL か R の文字が含まれており、かつ、その要素のの中でそれより前に双方向性文字タイプが L の文字が存在しないなら、その要素の方向性は 'rtl' です。[BIDI]

上記に該当しない場合、要素のが空文字列ではない、または、要素がルート要素なら、その要素の方向性は 'ltr' です。

上記に該当しない場合、その要素の方向性は、その要素の親要素の方向性と同じになります。

要素の dir 属性が auto 状態にある場合
要素が bdi 要素で dir 属性が定義された状態にない場合 (つまり存在しないか不正な値を持つ場合)

ツリー順で次の基準に一致する最初の文字を探す:

  • その文字は、方向性を確定しようとしている要素の子孫となる Text ノードからのものである。

  • その文字の双方向性文字タイプが L, AL, R のいずれかである。 [BIDI]

  • その文字は、方向性を確定しようとしている要素の子孫であり、かつ、次のいずれかに該当する祖先要素を持つ Text ノードにはない:

該当する文字が見つかり、その双方向性文字タイプが AL または R なら、その要素の方向性は 'rtl' になります。

該当する文字が見つかり、その双方向性文字タイプが L なら、その要素の方向性は 'ltr' になります。

上記に該当しない場合、該当の要素が空で、かつ、ルート要素でないなら、その要素の方向性は、その要素の親要素の方向性と同じになります。

上記に該当しない場合、該当の要素の要素の方向性は 'ltr' になります。

要素が親要素を持ち、dir 属性が定義された状態にない場合 (つまり存在しないか不正な値を持つ場合)

その要素の方向性は、その要素の親要素の方向性と同じになります。

dir 属性は HTML 要素に対してのみ定義されているため、他の名前空間の要素には存在することができません。ゆえに、他の名前空間の要素は、常にその親要素から方向性を継承するだけになります。それがなければ、'ltr' がデフォルトになります。


HTML 要素属性の方向性は、その属性のテキストが何かしらの方法でレンダリングに含まれることになったときに使われますが、次のリストの手順のうち最初に当てはまるものに決定されます:

その属性が方向性対応属性であり、かつ、その要素の dir 属性が auto 状態にある場合

その属性値から、双方向性文字タイプが L, AL, R のいずれかである最初の文字(論理順)を見つける。 [BIDI]

該当の文字が見つかり、その双方向性文字タイプが AL または R なら、その属性の方向性は 'rtl' になります。

そうでなければ、その属性の方向性は 'ltr' となります。

上記に該当しない場合
その属性の方向性は、その要素の方向性と同じになります。

次の属性は方向性対応属性です:


document . dir [ = value ]

該当の html 要素dir 属性があれば、その値を返します。

"ltr", "rtl", or "auto" のいずれかの値をセットして、該当の html 要素dir 属性の値を置き換えることができます。

html 要素がなければ、空文字列を返し、新たな値は無視されます。

要素の dir IDL 属性は、その要素の dir コンテント属性を反映しなければいけません。ただし、既知の値のみに限定されます

Document オブジェクトの dir IDL 属性は、該当の html 要素dir コンテント属性があれば、それを反映しなければいけません。ただし、既知の値のみに限定されます。該当の要素がなければ、その属性は空文字列を返さなければいけません。セットされても何もしてはいけません。

ウェブ制作者は、テキストの方向を表すために CSS を使うのではなく、dir 属性を使うことが強く推奨されます。なぜなら、そうすることで、たとえ CSS がなくても、ドキュメントを適切にレンダリングし続けられるからです(例えば、検索エンジンによる解釈など)。

このマークアップは、IM での会話を表しています。

<p dir=auto class="u1"><b><bdi>Student</bdi>:</b> How do you write "What's your name?" in Arabic?</p>
<p dir=auto class="u2"><b><bdi>Teacher</bdi>:</b> ما اسمك؟</p>
<p dir=auto class="u1"><b><bdi>Student</bdi>:</b> Thanks.</p>
<p dir=auto class="u2"><b><bdi>Teacher</bdi>:</b> That's written "شكرًا".</p>
<p dir=auto class="u2"><b><bdi>Teacher</bdi>:</b> Do you know how to write "Please"?</p>
<p dir=auto class="u1"><b><bdi>Student</bdi>:</b> "من فضلك", right?</p>

適切なスタイルシートと p 要素のデフォルトのアライメントのスタイル、つまり、テキストを段落の開始辺 (start edge) に調整するスタイルが与えられれば、レンダリング結果は次のようになります:

Each paragraph rendered as a separate block, with the paragraphs left-aligned except the second paragraph and the last one, which would  be right aligned, with the usernames ('Student' and 'Teacher' in this example) flush right, with a colon to their left, and the text first to the left of that.

前述の通り、auto という値は万能薬ではありません。この例の最後の段落は右から左向きのテキストだと誤まって解釈されています。なぜなら、それはアラビア語文字で始まるからです。そのため、"right?" がアラビア語テキストの左側に来てしまうのです。


※ 原文:http://www.w3.org/TR/2014/REC-html5-20141028/dom.html#the-dir-attribute