CSS

CSS

🎯 What is unicode-bidi?

The unicode-bidi property controls how the text direction (set by the direction property) behaves inside an HTML element.

In other words, it determines whether the text flow defined by direction should be:

  • Applied normally
  • Preserved independently
  • Completely overridden

This property is mainly used in multilingual content (for example, English + Arabic text) to ensure that text direction is displayed correctly.

🔹 Basic Usage

CSS

p { 
    direction: ltr;
    unicode-bidi: embed; 
}

➡️ In this example, the text flows from right to left ( RTL ) and is processed in an embedded way.

This is the default direction for languages like English or Turkish.

🔹 Values

1. normal

This is the default behavior.

The browser displays the text direction normally according to the direction property.

Example:

CSS

p { 
    unicode-bidi: normal; 
}

✳️ No additional direction control is applied.

2. embed

Means “embedded direction.”

This value allows the element’s content to maintain its own independent text direction.

The direction setting applies only to that specific element without affecting the outer content.

🔍 Example

HTML

<div style="direction: ltr;">
    <p style="direction: rtl; unicode-bidi: embed;">
        مرحباً (Hello)
    </p>
</div>

➡️ Here, the outer <div> flows left-to-right ( LTR ), while the inner <p> keeps its own right-to-left ( RTL ) direction.

3. bidi-override

Means “force direction override.”

This value completely overrides the natural text direction.

The browser forces the text to follow the specified direction, even if the characters naturally belong to another writing system.

🔍 Example

HTML

<p style="direction: rtl; unicode-bidi: bidi-override;">
    This text is forced RTL.
</p>

➡️ In this case, even English text will appear reversed and aligned from right to left.

4. initial

Resets the property to its default value ( normal ).

🔍 Example

CSS
unicode-bidi: initial;

✳️ Restores the browser’s normal text-direction behavior.

5. inherit

The element inherits the unicode-bidi value from its parent element.

🔍 Example

CSS
unicode-bidi: inherit;

💡 Summary Table

Value Meaning
normal Default direction behavior
embed Keeps the element’s own text direction
bidi-override Forces text to follow a specific direction
initial Resets to the default value
inherit Inherits the value from the parent element

  • 🧠 Summary

  • The unicode-bidi property is used together with the direction property to precisely control text flow direction.
  • Common Usage:
  • normal → Lets the browser handle text direction naturally
  • embed → Preserves the element’s internal direction
  • bidi-override → Forces text to display in a specific direction
  • This property is especially useful in multilingual documents containing mixed writing systems such as:
CSS _direction
CSS writing-mode