Unicode-bidi in CSS Language

Cascading Style Sheets (CSS) is a fundamental technology for web development, allowing developers to control the visual presentation of

their web pages. One aspect of CSS that is essential for handling text and languages is the unicode-bidi property. In this post, we’ll delve into what unicode-bidi is and provide examples of its usage.

What is unicode-bidi in CSS?

unicode-bidi is a CSS property that stands for “Unicode bidirectional algorithm.” It is used to control the bidirectional text flow in a document, which is especially important for languages that are read from right to left, like Arabic or Hebrew, in conjunction with left-to-right languages, such as English.

The unicode-bidi Property Values:

• normal (default): The browser uses the Unicode Bidirectional Algorithm to determine the direction of text based on the text content.
• embed: This value is used to embed a span of text with a different directionality within the surrounding text.
• isolate: This value isolates a span of text, ensuring that its directionality is not affected by the surrounding text.
• bidi-override: This value allows you to override the Unicode Bidirectional Algorithm’s decision for a particular span of text.

Examples of unicode-bidi Usage:

Let’s explore a few examples to understand how unicode-bidi works in practice.

1. Embedding Right-to-Left (RTL) Text within Left-to-Right (LTR) Text:

<style>
  p {
    unicode-bidi: embed;
  }
</style>
<p>This is an <span style="unicode-bidi: bidi-override; direction: rtl;">embedded RTL</span> example.</p>

In this example, the unicode-bidi property is set to embed for the paragraph. This allows the embedded span with RTL text to be displayed correctly within LTR text.

2. Isolating Right-to-Left (RTL) Text:

<style>
  p {
    unicode-bidi: isolate;
  }
</style>
<p>This is an <span style="direction: rtl;">isolated RTL</span> example.</p>

Setting unicode-bidi to isolate ensures that the isolated RTL span isn’t affected by the surrounding text’s directionality.

3. Overriding Text Direction:

<style>
  p {
    unicode-bidi: bidi-override;
  }
</style>
<p>This is an <span style="direction: rtl;">overridden RTL</span> example.</p>

Using unicode-bidi: bidi-override allows you to explicitly override the text direction for the specified span.

Why is unicode-bidi Important?

In a globalized world where websites are accessible to diverse audiences, it’s crucial to properly handle text directionality. The unicode-bidi property ensures that text in different languages and scripts is displayed correctly, maintaining readability and user experience.