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
|
---
title: dir
slug: Web/HTML/Globale_Attribute/dir
tags:
- Globales Attribut
- HTML
- Referenz
- Textrichtung
translation_of: Web/HTML/Global_attributes/dir
---
<p>{{HTMLSidebar("Global_attributes")}}</p>
<p>Das globale Attribut <strong>dir</strong> ist ein Attribut, das die Richtung des Elementtextes angibt. Es kann folgende Werte haben:</p>
<ul>
<li><code>ltr</code>, von <strong>links nach rechts</strong> (englisch: <em>left to right</em>). Wird für Sprachen, die von links nach rechts geschrieben werden (z.B. deutsch) verwendet;</li>
<li><code>rtl</code>, von <strong>rechts nach links</strong> (englisch: <em>right to left</em>). Wird für Sprachen, die von rechts nach links geschrieben werden (z.B. arabisch) verwendet;</li>
<li><code>auto</code>, lässt den Browser des Nutzers entscheiden. Es benutzt einen simplen Algorithmus, indem es die Zeichen im Element einliest, bis es ein Zeichen mit einer bekannten Richtung findet und dann diese Richtung auf das gesamte Element anwendet.</li>
</ul>
<div class="note">
<p><strong>Nutzungsinformationen</strong></p>
<p>Dieses Attribut ist verpflichtend für das {{ HTMLElement("bdo") }}-Element, bei dem es eine andere Bedeutung hat.</p>
<ul>
<li>
<p>Dieses Attribut wird nicht vom {{ HTMLElement("bdi") }}-Element geerbt. Sein Standardwert ist <code>auto</code>.</p>
</li>
<li>
<p>Dieses Attribut kann von den CSS-Eigenschaften {{ cssxref("direction") }} and {{ cssxref("unicode-bidi") }} überschrieben werden, sofern eine CSS-Seite eingebunden ist und das Element diese Eigenschaften unterstützt.</p>
</li>
<li>
<p>Da die Richtung eines Textes sprachlich zu seinem Inhalt und nicht zu seiner Darstellung gehört, ist es zu empfehlen, dass Web-Entwickler - sofern möglich - dieses Attribut anstatt der zugehörigen CSS-Eigenschaft zu verwenden. So kann der Text auch in einem Browser, der die CSS-Eigenschaften nicht unterstützt oder in dem CSS deaktiviert ist, korrekt dargestellt werden.</p>
</li>
<li>
<p>Der <code>auto</code> Wert sollte für Daten mit einer unbekannten Richtung verwendet werden, wie zum Beispiel Daten aus Benutzereingaben, möglicherweise in einer Datenbank gespeichert.</p>
</li>
</ul>
</div>
<h2 id="Spezifikationen">Spezifikationen</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('HTML WHATWG', "dom.html#the-dir-attribute", "dir")}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('HTML5.1', "dom.html#the-dir-attribute", "dir")}}</td>
<td>{{Spec2('HTML5.1')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', "dom.html#the-dir-attribute", "dir")}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('HTML4.01', "dirlang.html#h-8.2", "dir")}}</td>
<td>{{Spec2('HTML4.01')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>
<p>{{Compat("html.global_attributes.dir")}}</p>
<h2 id="Siehe_auch">Siehe auch</h2>
<ul>
<li>Alle <a href="/de-DE/docs/Web/HTML/Global_attributes">globalen Attribute</a>.</li>
<li>{{domxref("HTMLElement.dir")}}, das auf dieses Attribut zurückgreift</li>
</ul>
|
