unicode-bidi

Avatar of Chris Coyier
Chris Coyier am

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

  1. 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.
  2. 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.
  3. 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-bidi ist "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-bidi technisch 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

ChromeSafariFirefoxOperaIEAndroidiOS
FunktioniertFunktioniertFunktioniertFunktioniert8.0+FunktioniertFunktioniert

Weitere Ressourcen