unicode-bidi

  • Revision slug: CSS/unicode-bidi
  • Revision title: unicode-bidi
  • Revision id: 239054
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

Revision Content

{{ CSSRef() }}

Summary

The unicode-bidi CSS property together with the {{ Cssxref("direction") }} property relates to the handling of bidirectional text in a document. For example, if a block of text contains both left-to-right and right-to-left text then the user-agent uses a complex Unicode algorithm to decide how to display the text. This property overrides this algorithm and allows the developer to control the text embedding.

Note: This property is intended for DTD designers. Web designers and similar authors should not override it.
  • {{ Xref_cssinitial() }}: {{ Cssxref("normal") }}
  • Applies to: all elements
  • {{ Xref_cssinherited() }}: no
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: as specified

Syntax

unicode-bidi: [ normal | embed | [ isolate || bidi-override ] | plaintext | inherit ] ;

Values

normal
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.
embed
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.
bidi-override
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.
isolate
This keyword indicates that the element's container directionality should be calculated without considering the content of this element. The element is therefore isolated from its siblings. When applying its bidirectional-resolution algorithm, its container element treats it as one or several U+FFFC Object Replacement Character, i.e. like an image. This keyword can be combined with bidi-override.
plaintext
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.
This value allows to display data which has already formatted using a tool following the Unicode Bidirectional Algorithm.

Examples

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

Specification

Specification Status Comment
CSS Writing Modes Level 3 {{ Spec2('CSS3 Writing Modes') }} Added plaintext and isolate keywords
CSS 2 Level 1 {{ Spec2('CSS2.1') }}  

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 2.0 {{ CompatGeckoDesktop("1.0") }} 5.5 9.2 1.3
isolate 16 {{ property_prefix("-webkit") }} (See note) {{ CompatGeckoDesktop("10") }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
plaintext {{ CompatNo() }} {{ CompatGeckoDesktop("10") }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 1.0 {{ CompatGeckoMobile("1.0") }} 6 8 3.1
isolate {{ CompatUnknown() }} {{ CompatGeckoMobile("10") }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
plaintext {{ CompatNo() }} {{ CompatGeckoMobile("10") }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}

Chrome note

The isolate keyword can be used together with bidi-override. Due to a limitation in WebKit, this wasn't possible until Chrome 19.

See also

  • {{ Cssxref("direction") }}

Revision Source

<p>{{ CSSRef() }}</p>
<h2 id="Summary">Summary</h2>
<p>The <code>unicode-bidi</code> <a href="/en/CSS" title="CSS">CSS</a> property together with the {{ Cssxref("direction") }} property relates to the handling of bidirectional text in a document. For example, if a block of text contains both left-to-right and right-to-left text then the user-agent uses a complex Unicode algorithm to decide how to display the text. This property overrides this algorithm and allows the developer to control the text embedding.</p>
<div class="note">
  <strong>Note:</strong> This property is intended for DTD designers. Web designers and similar authors should not override it.</div>
<ul class="cssprop">
  <li><dfn>{{ Xref_cssinitial() }}:</dfn> {{ Cssxref("normal") }}</li>
  <li><dfn>Applies to:</dfn> all elements</li>
  <li><dfn>{{ Xref_cssinherited() }}:</dfn> no</li>
  <li><dfn>Media:</dfn> {{ Xref_cssvisual() }}</li>
  <li><dfn>{{ Xref_csscomputed() }}:</dfn> as specified</li>
</ul>
<h2 id="Syntax">Syntax</h2>
<pre>unicode-bidi: [ normal | embed | [ isolate || bidi-override ] | plaintext | inherit ] ;
</pre>
<h2 id="Values">Values</h2>
<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></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. This keyword can be combined with <code>bidi-override<em>.</em></code></dd>
  <dt>
    <code>plaintext</code></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>
<h2 id="Examples">Examples</h2>
<pre class="brush: css">.bible-quote {
  direction: rtl;   
  unicode-bidi: embed;
} 
</pre>
<h2 id="Specification">Specification</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><a class="external" href="http://dev.w3.org/csswg/css3-writing-modes/#unicode-bidi" title="http://dev.w3.org/csswg/css3-writing-modes/#unicode-bidi">CSS Writing Modes Level 3</a></td>
      <td>{{ Spec2('CSS3 Writing Modes') }}</td>
      <td>Added <code>plaintext</code> and <code>isolate</code> keywords</td>
    </tr>
    <tr>
      <td><a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#direction" title="http://www.w3.org/TR/CSS21/visuren.html#direction">CSS 2 Level 1</a></td>
      <td>{{ Spec2('CSS2.1') }}</td>
      <td> </td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>2.0</td>
        <td>{{ CompatGeckoDesktop("1.0") }}</td>
        <td>5.5</td>
        <td>9.2</td>
        <td>1.3</td>
      </tr>
      <tr>
        <td><code>isolate</code></td>
        <td>16 {{ property_prefix("-webkit") }} (See note)</td>
        <td>{{ CompatGeckoDesktop("10") }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
      </tr>
      <tr>
        <td><code>plaintext</code></td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatGeckoDesktop("10") }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>1.0</td>
        <td>{{ CompatGeckoMobile("1.0") }}</td>
        <td>6</td>
        <td>8</td>
        <td>3.1</td>
      </tr>
      <tr>
        <td><code>isolate</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatGeckoMobile("10") }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
      </tr>
      <tr>
        <td><code>plaintext</code></td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatGeckoMobile("10") }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h3 id="Chrome_note">Chrome note</h3>
<p>The <code>isolate</code> keyword can be used together with <code>bidi-override</code>. Due to a limitation in WebKit, this wasn't possible until Chrome 19.</p>
<h2 id="See_also">See also</h2>
<ul><li>{{ Cssxref("direction") }}</li></ul>
Revert to this revision