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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
|
---
title: <bdi>
slug: Web/HTML/Element/bdi
translation_of: Web/HTML/Element/bdi
---
<p>Das <strong>HTML <code><bdi></code> Element</strong> (engl. für <em>bidirectional isolation</em>) isoliert einen Textauszug der in einer anderen Richtung erscheinen soll, als der Text der ihn umgibt.</p>
<p>Dieses Element ist nützlich, wenn Text in einen Text eingebunden werden soll, z. B. von einer Datenbank, aber die Schreibrichtung anders sein kann, als der bestehende Text.</p>
<table class="properties">
<tbody>
<tr>
<th scope="row"><a href="/en-US/docs/HTML/Content_categories">Inhaltskategorien</a></th>
<td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Fließender Inhalt</a>, gestaltender Inhalt, eindeutiger Inhalt.</td>
</tr>
<tr>
<th scope="row">Erlaubter Inhalt</th>
<td>Ausdrucksinhalt.</td>
</tr>
<tr>
<th scope="row">Tag Wegfall</th>
<td>keiner</td>
</tr>
<tr>
<th scope="row">Erlaubte Elternelemente</th>
<td>Irgend ein Element, das den Ausdrucksinhalt akzeptiert.</td>
</tr>
<tr>
<th scope="row">Erlaubte ARIA-Rollen</th>
<td>Beliebig</td>
</tr>
<tr>
<th scope="row">DOM interface</th>
<td>{{domxref("HTMLElement")}}</td>
</tr>
</tbody>
</table>
<h2 id="Attribute">Attribute</h2>
<p>Wie alle anderen HTML Elemente hat dieses Element globale Attribute mit einer leicht anderen Bedeutung: das <strong>dir</strong> Attribut wird nicht geerbt. Wenn es nicht gesetzt wurde, ist der Standardwert <code>auto</code>. Das lässt den Browser an Hand des Inhalts entscheiden, welche Richtung er für den Text innerhalb des <code><bdi></code> Element setzt.</p>
<h2 id="Gebrauchshinweise">Gebrauchshinweise</h2>
<p>Obwohl der gleiche visuelle Effekt mit der CSS Regel {{cssxref("unicodes-bidi")}}<code>: isolate</code> auf einem {{HTMLElement("span")}} oder einem anderen textformatierenden Element erziehlt werden kann, wird die semantische Bedeutung nur mit dem <code><bdi></code> Element übermittelt. Zumal es Browsern erlaubt ist, CSS-Styling zu ignorieren. In einem solchen Fall würde der Text unter dem genannten Element richtig angezeigt, die Methode mit CSS würde hingegen Müll erzeugen.</p>
<h2 id="Beispiel">Beispiel</h2>
<pre class="brush: html"><p dir="ltr">Das arabische Wort <bdi>ARABISCHER_PLATZHALTER</bdi>
wird automatisch von rechts nach links geschrieben.</p>
</pre>
<h3 id="Ergebnis">Ergebnis</h3>
<p dir="ltr">Das arabische Wort RETLAHZTALP_REHCSIBARA wird automatisch von rechts nach links geschrieben..</p>
<h2 id="Spezifikationen">Spezifikationen</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specifikation</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', 'semantics.html#the-bdi-element', '<bdi>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-bdi-element', '<bdi>')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Basic support</td>
<td>16</td>
<td>{{CompatGeckoDesktop("10.0")}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatNo}}</td>
<td>{{CompatGeckoMobile("10.0")}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<h2 dir="ltr" id="Siehe_auch">Siehe auch</h2>
<ul>
<li>Ähnliches HTML Element: bdo</li>
<li>Ähnliche HTML Eigenschaften: direction, unicode-bidi</li>
</ul>
<p>HTMLRef</p>
|
