unicode-bidi

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Die unicode-bidi CSS-Eigenschaft bestimmt zusammen mit der direction-Eigenschaft, wie bidirektionaler Text in einem Dokument behandelt wird. Wenn ein Inhaltsblock beispielsweise sowohl von links nach rechts als auch von rechts nach links geschriebenen Text enthält, verwendet der User-Agent einen komplexen Unicode-Algorithmus, um zu entscheiden, wie der Text angezeigt werden soll. Die unicode-bidi-Eigenschaft überschreibt diesen Algorithmus und ermöglicht es dem Entwickler, die Einbettung des Textes zu steuern.

Probieren Sie es aus

unicode-bidi: normal;

unicode-bidi: bidi-override;

unicode-bidi: plaintext;

unicode-bidi: isolate-override;

<section class="default-example" id="default-example">
  <p class="transition-all" id="example-element">
    בְּרֵאשִׁ֖ית בָּרָ֣א אֱלֹהִ֑ים אֵ֥ת הַשָּׁמַ֖יִם וְאֵ֥ת הָאָֽרֶץ.
  </p>
</section>

Die unicode-bidi- und die direction-Eigenschaften sind die einzigen Eigenschaften, die von der all-Kurzform nicht beeinflusst werden.

Warnung: Diese Eigenschaft ist für Designer von Dokumenttypspezifikationen (DTD) gedacht. Webdesigner und ähnliche Autoren sollten sie nicht überschreiben.

Syntax

css

/* Keyword values */
unicode-bidi: normal;
unicode-bidi: embed;
unicode-bidi: isolate;
unicode-bidi: bidi-override;
unicode-bidi: isolate-override;
unicode-bidi: plaintext;

/* Global values */
unicode-bidi: inherit;
unicode-bidi: initial;
unicode-bidi: revert;
unicode-bidi: revert-layer;
unicode-bidi: unset;

Werte

normal: Das Element bietet keinen zusätzlichen Einbettungsgrad in Bezug auf den bidirektionalen Algorithmus. Für Inline-Elemente funktioniert die implizite Neuordnung über Elementgrenzen hinweg.
embed: Wenn das Element inline ist, öffnet dieser Wert einen zusätzlichen Einbettungsgrad in Bezug auf den bidirektionalen Algorithmus. Die Richtung dieser Einbettungsebene wird durch die direction-Eigenschaft bestimmt.
bidi-override: Für Inline-Elemente erstellt dies eine Überschreibung. Für Block-Container-Elemente erstellt dies eine Überschreibung für Inline-Ebenen-Nachfolger, die sich nicht innerhalb eines anderen Block-Container-Elements befinden. Dies bedeutet, dass innerhalb des Elements die Neuordnung streng in der Reihenfolge gemäß der direction-Eigenschaft erfolgt; der implizite Teil des bidirektionalen Algorithmus wird ignoriert.
isolate: Dieses Schlüsselwort zeigt an, dass die Richtung des Container-Elements ohne Berücksichtigung des Inhalts dieses Elements berechnet werden sollte. Das Element ist daher von seinen Geschwistern isoliert. Bei Anwendung seines bidirektionalen Auflösungsalgorithmus behandelt das Container-Element es als ein oder mehrere U+FFFC Object Replacement Character, also wie ein Bild.
isolate-override: Dieses Schlüsselwort wendet das Isolationsverhalten des isolate-Schlüsselworts auf den umgebenden Inhalt und das Überschreibungsverhalten des bidi-override-Schlüsselworts auf den inneren Inhalt an.
plaintext: Dieses Schlüsselwort berechnet die Richtung des Elements, ohne den bidirektionalen Zustand des Elternteils oder den Wert der direction-Eigenschaft zu berücksichtigen. Die Richtung wird unter Verwendung der P2- und P3-Regeln des Unicode-Bidirektionalen Algorithmus berechnet. Dieser Wert ermöglicht die Anzeige von Daten, die bereits mit einem Werkzeug formatiert wurden, das dem Unicode-Bidirektionalen Algorithmus folgt.

Formale Definition

Anfangswert	`normal`
Anwendbar auf	Alle Elemente, einige Werte haben keine Wirkung bei non-inline Elementen
Vererbt	Nein
Berechneter Wert	wie angegeben
Animationstyp	Not animatable

Formale Syntax

unicode-bidi = 
  normal            |
  embed             |
  isolate           |
  bidi-override     |
  isolate-override  |
  plaintext

Beispiele

CSS

css

.bible-quote {
  direction: rtl;
  unicode-bidi: embed;
}

HTML

html

<div class="bible-quote">A line of text</div>
<div>Another line of text</div>

Ergebnis

Spezifikationen

Specification
CSS Writing Modes Level 4 # unicode-bidi

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

direction
SVG unicode-bidi-Attribut