CSS unicode-bidi Tutorial

CSS unicode-bidi

The unicode-bidi CSS property specifies the level of embedding with respect to the direction of text.

There are three possible values for unicode-bidi:

  1. normal: Indicates that the element does not open an additional level of embedding with respect to the bidirectional algorithm.
  2. embed: Creates an additional level of embedding with respect to the bidirectional algorithm.
  3. bidi-override: Creates an override. This means that the direction specified in the element will be followed.

The unicode-bidi property is often used in conjunction with the direction property to control the direction of text within an element.

Let's see some examples:

Result:

Hello, 你好, مرحبا


Hello, 你好, مرحبا

In this example, we used the unicode-bidi: embed; property to create an additional level of embedding with respect to the bidirectional algorithm. The text direction was set to right-to-left using direction: rtl;.

Result:

Hello, 你好, مرحبا


Hello, 你好, مرحبا

In this example, we used the unicode-bidi: bidi-override; property to create an override. The direction of the text within the element will be followed as specified, in this case, left-to-right.

Experiment with different values of unicode-bidi and direction to see how they affect the direction of text within an element.