dir 属性

3.2.3.5 dir 属性

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

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

該当の要素のコンテンツには、明示的に左から右向きに組み込まれたテキストである、ということを表します。

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

該当の要素のコンテンツには、明示的に右から左向きに組み込まれたテキストである、ということを表します。

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

該当の要素のコンテンツは、明示的に組み込まれたテキストではあるが、その方向はその要素のコンテンツを使ってプログラム的に決定すべき、ということを表します（後述の通り）。

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

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

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

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

要素の方向性は 'ltr' です。

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

要素の方向性 は 'rtl' です。

要素の dir 属性が auto 状態にある場合
要素が bdi 要素で、かつ、dir 属性が規定の状態にない場合（つまり、存在しない、または、妥当な値ではない)

次の基準に一致する文字のうち、ツリー順で最初の文字を見つけます。

  • その文字は、方向性を決めようとしている要素の子孫となるテキスト・ノードから得られるものです。

  • その文字は、双方向文字タイプ L, AL, OR となる文字です。[BIDI]

  • その文字は、次に該当する祖先要素を持つテキスト・ノードから得られるものではありません。その祖先要素とは、方向性を決めようとしている要素の子孫となる要素で、以下のいずれかに該当する：

    • bdi 要素
    • script要素
    • style要素
    • 規定の状態にある dir 属性を伴う要素

そのような文字が見つかり、それが双方向文字タイプ AL または R となる文字であれば、該当の要素の方向性は 'rtl' です。

そうでなければ該当の要素の方向性は 'ltr' です。

要素が root 要素であり、かつ、dir 属性が規定の状態にない場合（つまり、存在しない、または、妥当な値でない）

該当の要素の方向性は 'ltr' です。

要素が親要素を持ち、かつ、dir 属性が規定の状態にない場合（つまり、存在しない、または、妥当な値でない）

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

この属性の効果は、主にプレゼンテーション層に現れます。例えば、本仕様のレンダリングのセクションでは、この属性から CSS の 'direction' と 'unicode-bidi' プロパティを対応付けする方法が定義されています。CSS は、これらのプロパティに関するレンダリング方法を定義しています。

document . dir [ = value ]

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

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

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

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

HTMLDocument オブジェクトの 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/2011/WD-html5-20110113/elements.html#the-dir-attribute