CSS unicode-bidi Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

Description

The unicode-bidi property is used in conjunction with the direction property to set whether the text should be redefined to support multiple languages ​​in one document (for example, if the text contains both text from left to right and right to left).

Initial value
normal
Applies to
All elements
Inherited
No
Computed value
As specified
Animatable
No
JavaScript syntax
object.style.unicodeBidi

Interactive Demo

בָּרוּךְ שֵׁם כְּבוֹד מַלְכוּתוֹ לְעוֹלָם וָעֶד.

Syntax

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

Values

  • normalElement does not open an additional level of embedding. For inline elements, implicit reordering works across element boundaries.
  • embedElement opens an additional level of embedding. The value of the direction property specifies the embedding level. Reordering is implicit inside the element.
  • isolateThis keyword indicates that the element's container directionality should be calculated without considering the content of this element.
  • bidi-overrideSame as the embed value, except that, inside the element, reordering is strictly in sequence according to the direction property. This value overrides the implicit bidirectional algorithm.
  • isolate-overrideThis keyword applies the isolation behavior of the isolate keyword to the surrounding content and the override behavior of the bidi-override keyword to the inner content.
  • plaintextThis keyword makes the elements directionality calculated without considering its parent bidirectional state or the value of the direction property. The directionality is calculated using the P2 and P3 rules of the Unicode Bidirectional Algorithm.
  • inherit

Example

<p> A paragraph that does not use a bidirectional text display algorithm.  </p> 
<p class="test"> A paragraph that uses a bidirectional text display algorithm and the direction of the letter from right to left. </p>
.test {
   direction: rtl;
   unicode-bidi: bidi-override;
}

Browser Support

The following table will show you the current browser support for the CSS unicode-bidi property.

Desktop
Edge Chrome Firefox Opera Safari
12219.21.3
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
18410.1114.4

Last updated by CSSPortal on: 2nd January 2024