dir=""
| 更新日 | |
|---|---|
| 仕様 | HTML Living Standard |
| 分類 | グローバル属性 |
dir属性は、要素内容の書字方向を指定します。
- html要素にdir属性を指定すると、文書全体の書字方向を示すことができます。
<p dir="ltr">書字方向を指定します</p>
| 属性 | 値 | ||
|---|---|---|---|
| グローバル属性 | |||
dir="" |
書字方向 | ltr |
左から右へを指定 |
rtl |
右から左へを指定 | ||
auto |
書字方向が不明 | ||
- 左から右へ
- 日本語や英語などの場合は、左から右へ記述するので
ltrを指定します。 - 右から左へ
- アラビア語やヘブライ語などの場合は、右から左へ記述するので
rtlを指定します。
1つの文書内に複数の言語が含まれる場合は、この属性でそれぞれの書字方向を示すことができます。
次の例では、引用したアラビア文に rtl（右から左へ）を指定しています。
<p>日本語の文章の中に<q lang="ar" dir="rtl">（ここがアラビア語だと思ってください。）</q>アラビア文を引用する時はこうなります。</p>
autoについて
値に auto を指定すると、書字方向が自動的に判断されることになります。しかし、厳密に判定している訳ではないので、誤った解釈になってしまう場合もあるようです。
そのため、この値は最後の手段としてのみ使用することが推奨されています。
特殊なケース
基本的にはdir属性は既定値を持ちませんが、bdi要素に対してこの属性を指定する場合には、既定値が auto になります。
また、bdo要素ではdir属性の指定が必須となり、値に auto を指定することはできません。
指定できる要素
dir属性はグローバル属性のため、全てのHTML要素に指定することができます。
- ただし、属性と要素の組み合わせによっては効果がない場合もあります。
使用例
<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
<title>文書のタイトル</title>
</head>
<body>
<p>文書全体は「左から右へ」を指定。</p>
<p>これは日本語の文章です。</p>
<p>日本語の文章の中に<q lang="ar" dir="rtl">（ここがアラビア語だと思ってください。）</q>アラビア文を引用する時はこうなります。</p>
</body>
</html>
- 表示例
-
文書全体は「左から右へ」を指定。
これは日本語の文章です。
日本語の文章の中に
（ここがアラビア語だと思ってください。）
アラビア文を引用する時はこうなります。