CSS unicode-bidi Property

Posted in CSS Tutorial

Updated on Oct 13, 2024

By Mari Selvan

👁️ 85 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The unicode-bidi property in CSS is used to control the directionality and handling of text within an element. It primarily affects the bidirectional algorithm in text rendering, which is crucial for correctly displaying languages that are written from right to left (RTL) or mixed directionality.

💡 Syntax

The syntax for the unicode-bidi property is simple. It accepts one or more of the following values:

Syntax

Copied

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

🎛️ Default Value

The default value of unicode-bidi is normal, which means the element inherits its directional behavior from its parent element.

🏠 Property Values

Value	Description
normal	Inherit directional behavior from parent.
embed	Establish a new embedding level.
isolate	Create an independent directional formatting context.
bidi-override	Force the directionality of the element's text.
isolate-override	Combines the effects of isolate and bidi-override, creating an isolated directional formatting context with overridden direction.
plaintext	Render as plain text with no directional formatting.

📄 Example

In this example, we'll use the unicode-bidi property to manage the directionality of a paragraph containing mixed-direction text.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS unicode-bidi Example</title>
  <style>
    .rtl {
      unicode-bidi: embed;
      direction: rtl; /* Setting direction explicitly for demonstration */
      border: 1px solid black; /* Just for visibility */
      padding: 10px;
    }
  </style>
</head>
<body>
  <h1>Unicode-bidi Property Example</h1>
  <div class="rtl">
    <p>مرحبا بالعالم Hello World</p>
  </div>
</body>
</html>

🖥️ Browser Compatibility

The unicode-bidi property is supported in all major browsers, including Chrome, Firefox, Safari, Edge, and Opera. However, older browser versions may have limited support or behave differently, so it's advisable to test across different browsers if targeting a wide audience.

🎉 Conclusion

The unicode-bidi property is essential for correctly rendering text in languages that require bidirectional handling.

By understanding and utilizing this property, web developers can ensure that their web pages display text accurately and in accordance with the intended directionality of the content.