Das HTML <bdi> Element (engl. für bidirectional isolation) isoliert einen Textauszug der in einer anderen Richtung erscheinen soll, als der Text der ihn umgibt.
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.
| Inhaltskategorien | Fließender Inhalt, gestaltender Inhalt, eindeutiger Inhalt. |
|---|---|
| Erlaubter Inhalt | Ausdrucksinhalt. |
| Tag Wegfall | keiner |
| Erlaubte Elternelemente | Irgend ein Element, das den Ausdrucksinhalt akzeptiert. |
| Erlaubte ARIA-Rollen | Beliebig |
| DOM interface | HTMLElement |
Attribute
Wie alle anderen HTML Elemente hat dieses Element globale Attribute mit einer leicht anderen Bedeutung: das dir Attribut wird nicht geerbt. Wenn es nicht gesetzt wurde, ist der Standardwert auto. Das lässt den Browser an Hand des Inhalts entscheiden, welche Richtung er für den Text innerhalb des <bdi> Element setzt.
Gebrauchshinweise
Obwohl der gleiche visuelle Effekt mit der CSS Regel unicodes-bidi: isolate auf einem <span> oder einem anderen textformatierenden Element erziehlt werden kann, wird die semantische Bedeutung nur mit dem <bdi> 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.
Beispiel
<p dir="ltr">Das arabische Wort <bdi>ARABISCHER_PLATZHALTER</bdi>
wird automatisch von rechts nach links geschrieben.</p>
Ergebnis
Das arabische Wort RETLAHZTALP_REHCSIBARA wird automatisch von rechts nach links geschrieben..
Spezifikationen
| Specifikation | Status | Comment |
|---|---|---|
| HTML Living Standard Die Definition von '<bdi>' in dieser Spezifikation. |
Lebender Standard | |
| HTML5 Die Definition von '<bdi>' in dieser Spezifikation. |
Empfehlung |
Browserkompatibilität
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | 16 | 10.0 (10.0) | Nicht unterstützt | Nicht unterstützt | Nicht unterstützt |
| Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | Nicht unterstützt | 10.0 (10.0) | Nicht unterstützt | Nicht unterstützt | Nicht unterstützt |
Siehe auch
- Ähnliches HTML Element: bdo
- Ähnliche HTML Eigenschaften: direction, unicode-bidi
HTMLRef