unicode-bidi

  • Revision slug: CSS/unicode-bidi
  • Revision title: unicode-bidi
  • Revision id: 24618
  • Created:
  • Creator: McGurk
  • Is current revision? No
  • Comment Added page; page created, 287 words added

Revision Content

The unicode-bidi property togther 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
  • Percentages: n/a
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: as specified

Syntax

unicode-bidi: [ normal | embed | bidi-override | 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.

Examples

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

Specification

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 2.0 1.x 5.x 9.2 1.3
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

See also

{{ Cssxref("direction") }}

Revision Source

<p>The <code>unicode-bidi</code> property togther 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> <li>{{ Xref_cssinitial() }}: {{ Cssxref("normal") }}</li> <li>Applies to: all elements</li> <li>{{ Xref_cssinherited() }}: no</li> <li>Percentages: n/a</li> <li>Media: {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }}: as specified</li>
</ul>
<h2>Syntax</h2>
<pre>unicode-bidi: [ normal | embed | bidi-override | inherit ] ;
</pre>
<h2>Values</h2>
<dl> <dt>normal </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>embed </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>bidi-override </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>
</dl>
<h2>Examples</h2>
<pre>.bible-quote {
<code class="css">  direction: rtl;   unicode-bidi: embed;</code>
} 
</pre>
<h2>Specification</h2>
<ul> <li><a class="external" href="">CSS 2.1</a></li> <li><a class="external" href="http://www.w3.org/TR/2003/CR-css3-text-20030514/#unicode-bidi">CSS 3 Text Module</a></li>
</ul>
<h2>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>1.x</td> <td>5.x</td> <td>9.2</td> <td>1.3</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>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> </tbody>
</table>
</div>
<h2>See also</h2>
<p>{{ Cssxref("direction") }}</p>
Revert to this revision