css
  1. css-unicode-bidi
PreviousNext

CSS Unicode Bidi

  • The CSS Unicode Bidi property is used to set the direction of the text based on the directionality of the characters.
  • It is useful when working with multilingual websites that use different writing systems, such as Arabic or Hebrew.

Syntax

unicode-bidi: normal | embed | bidi-override;

Values

  • normal: the default value, which sets the directionality of the text to the parent element.
  • embed: sets the directionality of the text to the language of the text. This value is used when embedding content from another language.
  • bidi-override: sets the directionality of the text to the direction specified in the element property.

Example

Here is an example of using the CSS Unicode Bidi property:

<!DOCTYPE html>
<html>
<head>
    <title>CSS Unicode Bidi Example</title>
    <style>
        #example1 {
            unicode-bidi: embed;
        }
        #example2 {
            unicode-bidi: bidi-override;
            direction: rtl;
        }
    </style>
</head>
<body>
    <h1>CSS Unicode Bidi Example</h1>
    <p id="example1">This text is in English and Arabic: مرحبا Hello</p>
    <p id="example2">This text is in Hebrew: שלום</p>
</body>
</html>
Try Playground

Explanation

In this example, we use the CSS Unicode Bidi property to set the directionality of the text in two paragraphs. The first paragraph (#example1) contains text in both English and Arabic, so we use the embed value to set the directionality to the language of the text. The second paragraph (#example2) contains text in Hebrew, so we use the bidi-override value to set the directionality to rtl (right-to-left), which is the direction of the Hebrew language.

Use

The CSS Unicode Bidi property is useful when working with multilingual websites that use different writing systems. It allows you to set the directionality of the text based on the context in which it is used, ensuring that the text is displayed correctly and is easy to read.

Important Points

  • The default value of the CSS Unicode Bidi property is normal.
  • The bidi-override value overrides the direction of the parent element, so it should be used with caution.
  • The embed value is used when displaying text from multiple writing systems within the same paragraph.

Summary

The CSS Unicode Bidi property is a useful tool for setting the directionality of text on multilingual websites. With its simple syntax and powerful capabilities, it can help ensure that your text is displayed correctly and is easy to read, regardless of the language or writing system.

Transform StyleUser Select
Published on: