CSS Unicode-bidi

The unicode-bidi property in CSS is used in combination with the direction property to control the embedding and overriding of text’s bidirectional algorithm. This property is particularly useful for managing the display of text that includes both left-to-right (LTR) and right-to-left (RTL) scripts, such as English mixed with Arabic or Hebrew.

Syntax

element {
    unicode-bidi: normal | embed | isolate | bidi-override | isolate-override | plaintext | initial | inherit;
}

Try It Now

Property Values

  • normal: Default value. The element does not open an additional level of embedding.
  • embed: Opens an additional level of embedding in the direction specified by the direction property.
  • isolate: Prevents the element’s content from affecting the surrounding text’s bidirectional context.
  • bidi-override: Opens an additional level of embedding, and reorders the characters strictly according to the direction property.
  • isolate-override: Combines the behavior of isolate and bidi-override.
  • plaintext: The element’s text direction is determined by the first strong directional character, not by the direction property.
  • initial: Sets the property to its default value.
  • inherit: Inherits the unicode-bidi value from the parent element.

Usage Context

  • Bidirectional text embedding: When mixing scripts that have different text directions (like English and Arabic), you might need to control how the text is embedded or displayed.
  • Overriding text direction: In cases where the text direction should strictly follow the defined direction rather than the natural reading direction of the content.

Examples

Example 1: Using unicode-bidi with embed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .embedded {
            direction: rtl;
            unicode-bidi: embed;
        }
    </style>
</head>
<body>
    <p class="embedded">This is some mixed text: ABC אבג DEF.</p>
</body>
</html>

Try It Now

In this example, the English text is embedded within an RTL context, and the text direction for the embedded content follows the surrounding text’s direction.

Example 2: Using unicode-bidi with bidi-override

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .override {
            direction: rtl;
            unicode-bidi: bidi-override;
        }
    </style>
</head>
<body>
    <p class="override">This is some mixed text: ABC אבג DEF.</p>
</body>
</html>

Try It Now

In this example, the bidi-override value forces the text to be displayed strictly according to the rtl direction, even if it disrupts the natural order of the text.

Tips

  • Use with direction: Always use unicode-bidi in combination with the direction property to achieve the desired text flow.
  • Context Matters: Be aware of the context where bidirectional text is used, as it can affect the readability and user experience.
  • Testing: Test bidirectional content on different browsers and platforms to ensure consistency and correct display.

The unicode-bidi property is a powerful tool for managing complex text layouts involving multiple writing systems, ensuring that content is displayed correctly and understandably for users.