`unicode-bidi` CSS property

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.

The unicode-bidi CSS property, together with the direction property, determines how bidirectional text in a document is handled. For example, if a block of content contains both left-to-right and right-to-left text, the user-agent uses a complex Unicode algorithm to decide how to display the text. The unicode-bidi property overrides this algorithm and allows the developer to control the text embedding.

Try it

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>

The unicode-bidi and direction properties are the only properties that are not affected by the all shorthand.

Warning: This property is intended for Document Type Definition (DTD) designers. Web designers and similar authors should not override it.

Syntax

/* 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;

Values

normal: The element does not offer an 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 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 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.
isolate-override: This 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.
plaintext: This 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. This value allows the display of data that is already formatted using a tool following the Unicode Bidirectional Algorithm.

Formal definition

Initial value	normal
Applies to	all elements, though some values have no effect on non-inline elements
Inherited	no
Computed value	as specified
Animation type	Not animatable

Formal syntax

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

Examples

CSS

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

HTML

<div class="bible-quote">A line of text</div>
<div>Another line of text</div>

Result

Specifications

Specification
CSS Writing Modes Level 4 # unicode-bidi

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet	WebView Android	WebView on iOS
`unicode-bidi`	2	12	1	9.2	1.3	18	4	10.1	1	1.0	4.4	1
`bidi-override`	2	12	1	15	1.3	18	4	14	1	1.0	4.4	1
`embed`	2	12	1	15	1.3	18	4	14	1	1.0	4.4	1
`isolate`	48 16 Before Chrome 47, `-webkit-isolate` could lock up the browser. Since Chrome 19, the syntax from a previous version of the specification, where the `isolate` keyword could be used together with `bidi-override`, is allowed.	79 79	50 10–54 From Firefox 10 to Firefox 16 (inclusive), the `isolate` keyword could be used together with `bidi-override`, which was the syntax from a previous version of the specification. From Firefox 17, only one value is allowed. Use `isolate-override` instead the previous `isolate bidi-override`.	35 15 Before Opera 34, `-webkit-isolate` could lock up the browser. Since Opera 15, the syntax from a previous version of the specification, where the `isolate` keyword could be used together with `bidi-override`, is allowed.	11 6 Before Safari 9, `-webkit-isolate` could lock up the browser.	48	50 10–54 From Firefox for Android 10 to Firefox for Android 16 (inclusive), the `isolate` keyword could be used together with `bidi-override`, which was the syntax from a previous version of the specification. From Firefox for Android 17, only one value is allowed. Use `isolate-override` instead the previous `isolate bidi-override`.	35	11 6 Before Safari on iOS 9, `-webkit-isolate` could lock up the browser.	5.0	48	11 6 Before WebView on iOS 9, `-webkit-isolate` could lock up the browser.
`isolate-override`	48	79	50 17–54	35	11 7	48	50 17–54	35	11 7	5.0	48	11 7
`normal`	2	12	1	15	1.3	18	4	14	1	1.0	4.4	1
`plaintext`	48	79	50 10–54 Before Firefox 50, the `plaintext` value was ignored for vertical writing modes (bug 1302734). Before Firefox 15, `plaintext` didn't do anything to an inline element. The specification changed and the implementation was changed in Firefox 15.	35	11 6	48	50 10–54 Before Firefox for Android 50, the `plaintext` value was ignored for vertical writing modes (bug 1302734). Before Firefox for Android 15, `plaintext` didn't do anything to an inline element. The specification changed and the implementation was changed in Firefox for Android 15.	35	11 6	5.0	48	11 6