1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
|
---
title: dir
slug: Web/HTML/Global_attributes/dir
tags:
- BiDi
- Global attributes
- HTML
- Reference
translation_of: Web/HTML/Global_attributes/dir
---
<div>{{HTMLSidebar("Global_attributes")}}</div>
<p><code><strong>dir</strong></code> <a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>は、要素のテキストの書字方向を示す列挙型属性です。</p>
<div>{{EmbedInteractiveExample("pages/tabbed/attribute-dir.html","tabbed-standard")}}</div>
<p class="hidden">この対話型サンプルのソースファイルは GitHub リポジトリに格納されています。対話型サンプルプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
<p>次の値を使用することができます。</p>
<ul>
<li><code>ltr</code>: <em>left to right</em> を表し、左書きの言語 (英語など) に対して使用します。</li>
<li><code>rtl</code>: <em>right to left</em> を表し、右書きの言語 (アラビア語など) に対して使用します。</li>
<li><code>auto</code>: ユーザーエージェントに決定させます。書字方向が明確な文字が見つかるまで要素内の文字を解釈して、その方向を要素全体に適用する基本的なアルゴリズムを使用します。</li>
</ul>
<div class="note">
<p><strong>使用上の注意:</strong> この属性は、意味論的な位置づけが異なる場所を示す {{HTMLElement("bdo")}} 要素で必須です。</p>
<ul>
<li>
<p>この属性は {{HTMLElement("bdi")}} 要素に<em>継承されません</em>。属性を設定しない場合の値は <code>auto</code> になります。</p>
</li>
<li>
<p>この属性は、 CSS の {{cssxref("direction")}} プロパティや {{cssxref("unicode-bidi")}} プロパティで上書きできます。ただし、 CSS が有効かつ要素がこれらのプロパティに対応する場合に限ります。</p>
</li>
<li>
<p>テキストの書字方向はその表示ではなく、内容に対して意味論的な関係がありますので、ウェブ開発者には、可能であれば関連する CSS プロパティの代わりにこの属性を使用することを推奨します。これにより、 CSS に対応しないブラウザーや CSS を無効化したブラウザーでもテキストが正しく表示されます。</p>
</li>
<li>
<p>値 <code>auto</code> は、ユーザーが入力して最終的にデータベースへ保存するデータなど、書字方向が不定のデータに対して使用してください。</p>
</li>
</ul>
</div>
<div class="note">
<p>ブラウザーではユーザーが {{ HTMLElement("input") }} や {{ HTMLElement("textarea") }} の書字方向を変更することを許可して、コンテンツの執筆を支援していることがあります。 Chrome と Safari は入力フィールドのコンテキストメニューに書字方向のオプションを提供している一方、 Internet Explorer と Edge はキーバインド <kbd>Ctrl</kbd> + <kbd>Left Shift</kbd> および <kbd>Ctrl</kbd> + <kbd>Right Shift</kbd> を使用します。 Firefox は <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>X</kbd> を使用しますが、 <code><strong>dir</strong></code> 属性の値は変更しません。</p>
</div>
<h2 id="Specifications" name="Specifications">仕様書</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">仕様書</th>
<th scope="col">状態</th>
<th scope="col">備考</th>
</tr>
<tr>
<td>{{SpecName('HTML WHATWG', "dom.html#the-dir-attribute", "dir")}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td>最新のスナップショットである {{SpecName('HTML5.1')}} から変更なし。</td>
</tr>
<tr>
<td>{{SpecName('HTML5.1', "dom.html#the-dir-attribute", "dir")}}</td>
<td>{{Spec2('HTML5.1')}}</td>
<td>{{SpecName('HTML WHATWG')}} のスナップショットであり、{{SpecName('HTML5 W3C')}} から変更はありません。</td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', "dom.html#the-dir-attribute", "dir")}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td>{{SpecName('HTML WHATWG')}} のスナップショットであり、{{SpecName('HTML4.01')}} の仕様に値 <code>auto</code> を追加、および真にグローバルな属性になりました。</td>
</tr>
<tr>
<td>{{SpecName('HTML4.01', "dirlang.html#h-8.2", "dir")}}</td>
<td>{{Spec2('HTML4.01')}}</td>
<td>{{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}} を除くすべての要素で対応します。</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<p>{{Compat("html.global_attributes.dir")}}</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li>すべて<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a></li>
<li>{{domxref("HTMLElement.dir")}} は、この属性を反映します。</li>
</ul>
|
