CSS unicode-bidi Property

Description

The unicode-bidi CSS property controls how the Unicode Bidirectional Algorithm is applied to an element’s inline content, letting authors influence the directional embedding and reordering of text that mixes left-to-right and right-to-left scripts. It operates at the inline formatting level: when applied, it can create a new directional context for the element’s contents, force an overriding direction for characters that would otherwise follow surrounding text, or prevent an element’s internal directionality from affecting its surroundings. In short, unicode-bidi is the tool that tells the browser how strictly to treat the element as its own bidi unit versus letting it participate in the bidi resolution of the surrounding text.

Because it manipulates embedding levels and overrides inside the Unicode bidi algorithm, the property can change only the visual ordering of characters and runs — it does not reorder DOM nodes or alter the logical content. That distinction matters for selection, cursor movement, and accessibility: screen readers and the document source keep the original logical order even when the rendering is visually rearranged. Also, unicode-bidi acts on inline-level boxes (text runs and inline elements); its effects are realized during the bidi resolution pass that determines embedding levels, neutrals, and reordering for display, which means it can influence how punctuation, numbers, and adjacent neutral characters adopt surrounding directions.

In practical authoring, unicode-bidi is normally used alongside a base direction declaration — for example, set the element’s base direction to LTR or RTL via direction and then scope or override bidi processing with unicode-bidi. For cases where you need to fully isolate an element’s directionality from the rest of the document (so its internal ordering never affects adjacent text), consider the more recent scoping mechanisms such as isolation or applying logical layout adjustments via writing-mode; each approach has slightly different implications for layout, inheritance, and how inline runs are resolved. Finally, use unicode-bidi sparingly and test interactive behaviors (selection, caret movement, copy/paste), since visual-only reordering can surprise users and assistive technologies if not combined with appropriate semantic markup.

Definition

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

Interactive Demo

unicode-bidi: normal;

unicode-bidi: bidi-override;

unicode-bidi: plaintext;

unicode-bidi: isolate-override;

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

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

HTML

<div class="container">

    <h2>unicode-bidi examples</h2>



    <div class="block normal">

        <h3>Normal (direction: ltr)</h3>

        <p>English Hello, عربي مرحبا, numbers 123 (mix: ( [ ) ])</p>

    </div>



    <div class="block embed">

        <h3>unicode-bidi: embed; direction: rtl</h3>

        <p class="embed">English Hello, عربي مرحبا, numbers 123 (mix: ( [ ) ])</p>

    </div>



    <div class="block override">

        <h3>unicode-bidi: bidi-override; direction: rtl</h3>

        <p class="override">English Hello, عربي مرحبا, numbers 123 (mix: ( [ ) ])</p>

    </div>



    <div class="block isolate">

        <h3>unicode-bidi: isolate</h3>

        <p>Surrounding LTR text <span class="isolate">عربي Hello 123</span> continues here.</p>

    </div>

</div>

CSS

body {
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    padding: 20px;
    line-height: 1.4;
}

.container {
    max-width: 800px;
}

.block {
    border: 1px solid #ddd;
    padding: 12px;
    margin: 12px 0;
    border-radius: 6px;
    background: #fafafa;
}

.block h3 {
    margin: 0 0 8px 0;
    font-size: 14px;
}

.normal {
    direction: ltr; /* default behavior */
}

.embed .embed {
    direction: rtl;
    unicode-bidi: embed; /* embed the RTL context for this element */
}

.override .override {
    direction: rtl;
    unicode-bidi: bidi-override; /* override character ordering to RTL */
}

.isolate .isolate {
    unicode-bidi: isolate; /* isolate this span from surrounding bidi text */
    direction: rtl;
    background: #fff8e1;
    padding: 2px 6px;
    border-radius: 4px;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS unicode-bidi property. Hover over a browser icon to see the version that first introduced support for this CSS property.