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 zum Beispiel ein Blockinhalt sowohl von links nach rechts als auch von rechts nach links verläuft, verwendet der Benutzeragent einen komplexen Unicode-Algorithmus, um zu entscheiden, wie der Text angezeigt wird. Die unicode-bidi-Eigenschaft überschreibt diesen Algorithmus und ermöglicht es dem Entwickler, das Text-Embedding 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 Eigenschaften unicode-bidi und direction sind die einzigen Eigenschaften, die nicht von der all-Kurzform betroffen sind.

Warnung: Diese Eigenschaft ist für Designer von Document Type Definitions (DTD) vorgesehen. 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 gegenüber dem bidirektionalen Algorithmus keine zusätzliche Ebene der Einbettung. Bei Inline-Elementen funktioniert die implizite Neuanordnung über die Elementgrenzen hinweg.
embed: Wenn das Element inline ist, öffnet dieser Wert eine zusätzliche Einbettungsebene im Hinblick auf den bidirektionalen Algorithmus. Die Richtung dieser Einbettungsebene wird durch die direction-Eigenschaft bestimmt.
bidi-override: Für Inline-Elemente wird eine Überschreibung erstellt. Für Block-Container-Elemente wird eine Überschreibung für Inline-Level-Nachfolger erstellt, die sich nicht in einem anderen Block-Container-Element befinden. Das bedeutet, dass innerhalb des Elements die Neuanordnung streng gemäß der direction-Eigenschaft erfolgt; der implizite Teil des bidirektionalen Algorithmus wird ignoriert.
isolate: Dieses Schlüsselwort gibt 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 der Anwendung seines bidirektionalen Auflösungsalgorithmus behandelt es das Container-Element als 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 sorgt dafür, dass die Richtung des Elements berechnet wird, 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-Bidirektional-Algorithmus berechnet. Dieser Wert ermöglicht die Anzeige von Daten, die bereits mit einem Werkzeug formatiert sind, das dem Unicode-Bidirektional-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