DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Die Eigenschaft unicode-bidi ist eine von zwei CSS-Eigenschaften, die das Rendering von bidirektionalem Text in HTML und ähnlichen Markup-basierten Sprachen (z. B. XML) steuern. Die andere Eigenschaft ist direction, und die beiden werden zusammen verwendet, um Ebenen von eingebettetem Text mit unterschiedlichen Textrichtungen (von rechts nach links und von links nach rechts) in einem einzelnen DOM-Element zu erstellen.
.bilingual-excerpt {
direction: rtl;
unicode-bidi: embed;
}
Der Browser bestimmt normalerweise, in welcher Richtung Inline-Text fließt, abhängig vom lang-Attribut von Elementen, der Browsersprache und der font-family bestimmter Elemente. unicode-bidi ist nützlich, wenn ein Element sowohl LTR-Text als auch RTL-Text enthält.
Der User-Agent wendet einen komplexen Algorithmus an, der durch den Unicode-Standard definiert ist, um zu bestimmen, wie der Text erscheinen soll. Diese Eigenschaft steuert speziell die Einbettungsebenen und Überschreibungen für den Unicode-bidirektionalen Algorithmus.
Die Eigenschaft unicode-bidi hat drei weit verbreitete Werte
- das Schlüsselwort "normal", das keine zusätzlichen Ebenen von eingebettetem bidirektionalem Text bietet (das Standardverhalten des Browsers). Ein Element mit dieser Eigenschaft enthält nur LTR- oder RTL-Text.
- das Schlüsselwort "embed", das bidirektionalen Text in einem Element ermöglicht (z. B. RTL-Text inmitten von LTR-Text). Dies wird durch die
direction-Eigenschaft bestimmt und muss auf ein Inline-Element angewendet werden. - das Schlüsselwort "bidi-override", das auf Inline-Elemente angewendet genauso funktioniert wie "embed". Auf Block-Level-Elementen überschreibt es den bidirektionalen Textalgorithmus des Browsers und lässt den Text in allen Inline-Kindelementen streng gemäß der
direction-Eigenschaft fließen.
Interessante Punkte
- Die Eigenschaft
unicode-bidiist "für DTD-Designer gedacht. Webdesigner und ähnliche Autoren sollten sie nicht überschreiben." Entscheiden Sie sorgfältig, ob Sie sie verwenden müssen. - Während Internet Explorer
unicode-biditechnisch seit Version 5.5 unterstützt, gibt es "ernsthafte Fehler in Bezug auf gefloatete Elemente", und die Verwendung ist in IE 8+ zuverlässig (siehe unten).
Browser-Unterstützung
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Funktioniert | Funktioniert | Funktioniert | Funktioniert | 8.0+ | Funktioniert | Funktioniert |
Das ist wirklich cool! Habe gerade etwas daraus gelernt!
Dito!
Ich kannte
U+202DundU+202E, aber ich wusste nicht, dass es CSS gibt, um dasselbe lesbarer zu tun!Was mich verwirrt, ist, wenn Unicode und HTML dasselbe tun (z. B. Zeichen-Tabulator
U+0009und HTML-Tabellen; ich dachte, HTML würde den Text nur in der Tabelle anzeigen und nicht die Tabelle um den Text herum formatieren?)btw rtl ist Right to Left
U+202Eund ltr ist Left to Right
U+202D