---
title: unicode-bidi
slug: Web/CSS/unicode-bidi
tags:
  - CSS
  - CSS Eigenschaft
  - NeedsLiveSample
  - Reference
  - Referenz
translation_of: Web/CSS/unicode-bidi
---
<div>{{CSSRef}}</div>

<h2 id="Zusammenfassung">Zusammenfassung</h2>

<p>Die <strong><code>unicode-bidi</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> Eigenschaft zusammen mit der {{Cssxref("direction")}} Eigenschaft hat damit zu tun wie bidirektionaler Text in einem Dokument behandelt wird. Zum Beispiel, wenn ein Textblock sowohl Text der von links nach recht als auch von rechts nach links läuft enthält, dann entscheidet das System mithilfe eines komplexen Unicode Algorithmus wie es den Text darstellen soll. Diese Eigenschaft überschreibt den Algorithmus und gibt dem Entwickler die Kontrolle über die Textdarstellung.</p>

<p>Die <code>unicode-bidi</code> und{{cssxref("direction")}} Eigenschaften sind die einzigen zwei Werte welche nicht von der {{cssxref("all")}} Kurzform betroffen sind.</p>

<div class="note"><strong>Hinweis:</strong> Die Eigenschaft ist für DTD Designer gedacht. Web Designer und ähnliche sollten es nicht überschreiben.</div>

<p>{{cssinfo}}</p>

<h2 id="Syntax">Syntax</h2>

<pre class="brush:css">/* Schlüsselwerte */
unicode-bidi: normal;
unicode-bidi: embed;
unicode-bidi: isolate;
unicode-bidi: bidi-override;
unicode-bidi: isolate-override;
unicode-bidi: plaintext;

/* Globale Werte*/
unicode-bidi: inherit;
unicode-bidi: initial;
unicode-bidi: unset;
</pre>

<h3 id="Werte">Werte</h3>

<dl>
 <dt><code>normal</code></dt>
 <dd>The element does not offer a additional level of embedding with respect to the bidirectional algorithm. For inline elements implicit reordering works across element boundaries.</dd>
 <dt><code>embed</code></dt>
 <dd>If the element is inline, this value opens an additional level of embedding with respect to the bidirectional algorithm. The direction of this embedding level is given by the {{Cssxref("direction")}} property.</dd>
 <dt><code>bidi-override</code></dt>
 <dd>For inline elements this creates an override. For block container elements this creates an override for inline-level descendants not within another block container element. This means that inside the element, reordering is strictly in sequence according to the {{Cssxref("direction")}} property; the implicit part of the bidirectional algorithm is ignored.</dd>
 <dt><code>isolate</code> {{experimental_inline}}</dt>
 <dd>This keyword indicates that the element's container directionality should be calculated without considering the content of this element. The element is therefore <em>isolated</em> from its siblings. When applying its bidirectional-resolution algorithm, its container element treats it as one or several <code>U+FFFC Object Replacement Character</code>, i.e. like an image.</dd>
 <dt><code>isolate-override</code>{{experimental_inline}}</dt>
 <dd>This keyword applies the isolation behavior of the <code>isolate</code> keyword to the surrounding content and the override behavior of the <code>bidi-override</code> keyword to the inner content.</dd>
 <dt><code>plaintext</code>{{experimental_inline}}</dt>
 <dd>This keyword makes the elements directionality calculated without considering its parent bidirectional state or the value of the {{cssxref("direction")}} property. The directionality is calculated using the P2 and P3 rules of the Unicode Bidirectional Algorithm.<br>
 This value allows to display data which has already formatted using a tool following the Unicode Bidirectional Algorithm.</dd>
</dl>

<h3 id="Formaler_Syntax">Formaler Syntax</h3>

{{csssyntax}}

<h2 id="Beispiele">Beispiele</h2>

<pre class="brush: css">.bible-quote {
  direction: rtl;
  unicode-bidi: embed;
}
</pre>

<h2 id="Spezifikation">Spezifikation</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Writing Modes', '#unicode-bidi', 'unicode-bidi')}}</td>
   <td>{{Spec2('CSS3 Writing Modes')}}</td>
   <td>Added <code>plaintext</code>, <code>isolate</code>, and <code>isolate-override</code> keywords</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'visuren.html#propdef-unicode-bidi', 'unicode-bidi')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>

{{Compat("css.properties.unicode-bidi")}}

<h2 id="Siehe_auch">Siehe auch</h2>

<ul>
 <li>{{Cssxref("direction")}}</li>
</ul>