dir
試してみましょう
次の値を使用することができます。
ltr
: left to right を表し、左書きの言語(英語など)に対して使用します。rtl
: right to left を表し、右書きの言語(アラビア語など)に対して使用します。auto
: ユーザーエージェントに決定させます。書字方向が明確な文字が見つかるまで要素内の文字を解釈して、その方向を要素全体に適用する基本的なアルゴリズムを使用します。
メモ: auto
の値は、ユーザー入力や外部データなど、書字方向が不明なデータに使用すべきです。
指定されていない場合、値は親要素から継承されます。
この属性は、 CSS の direction
プロパティや unicode-bidi
プロパティで上書きできます。ただし、 CSS が有効かつ要素がこれらのプロパティに対応する場合に限ります。
テキストの書字方向はその表示ではなく、内容に対して意味論的な関係がありますので、ウェブ開発者には、可能であれば関連する CSS プロパティよりもこの属性を使用することを推奨します。これにより、CSS に対応しないブラウザーや CSS を無効化したブラウザーでもテキストが正しく表示されます。
継承
要素に dir
属性が指定されていない場合、その親ノードに設定された dir
の値を継承します。さらにその親ノードから継承している場合もあります。
使用上の注意
画像の dir
プロパティを "rtl"
に設定すると、HTML の title
および alt
属性が "rtl"
として整形および定義されます。
表の dir
が "rtl"
に設定されている場合、列の順序は右から左に並べられます。
この属性は、意味論的な位置づけが異なる場所を示す <bdo>
要素で必須です。
この属性は、<bdi>
要素には継承されません。設定されていない場合、その値は auto
です。
ブラウザーではユーザーが <input>
や <textarea>
の書字方向を変更することを許可して、コンテンツの執筆を支援していることがあります。Chrome と Safari は入力フィールドのコンテキストメニューに書字方向のオプションを提供しています。Firefox は Ctrl/Cmd + Shift + X を使用しますが、dir
属性の値は変更しません。
仕様書
Specification |
---|
HTML Standard # the-dir-attribute |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- すべてグローバル属性
HTMLElement.dir
は、この属性を反映します。