The unicode-bidi property in CSS is a powerful yet often underused feature that controls the embedding levels of bidirectional text. This property is essential when dealing with languages that use right-to-left (RTL) scripts, such as Arabic and Hebrew, especially when mixed with left-to-right (LTR) scripts like English. Understanding and correctly using the unicode-bidi property ensures that text displays in the correct reading order, providing a better user experience for multilingual websites.
The term “bidi” stands for bidirectional, indicating the property’s primary use for handling the directionality of text. Combined with the direction property, unicode-bidi can override the default text layout behavior, offering more granular control over how text flows on a webpage.
Understanding the unicode-bidi Property
The unicode-bidi property is used to control the inline directionality of text in a document. This property is particularly useful for embedding right-to-left (RTL) text within left-to-right (LTR) text, or vice versa. It works alongside the direction property to handle the complexities of bidirectional text, ensuring that the order of characters and words aligns with the intended reading direction.
The Basics of unicode-bidi
In essence, unicode-bidi tells the browser how to handle the directionality of text. It can create embedding levels, isolate sections of text, or override the default bidirectional algorithm, depending on the value assigned.
Syntax and Values
The syntax for the unicode-bidi property is straightforward:
.element {
unicode-bidi: value;
}Available Values
normal: This is the default value. The element does not open an additional level of embedding with respect to the bidirectional algorithm.embed: The element opens an additional level of embedding. The direction of this embedding level is specified by thedirectionproperty.bidi-override: The element opens an additional level of embedding, but within this level, the bidirectional algorithm is ignored and replaced with the direction specified by thedirectionproperty.isolate: The element creates an isolated bidirectional text segment.plaintext: The element makes all its text segments and those of its descendants bidirectionally isolated.
Practical Examples
Example 1: Basic Usage of unicode-bidi
Let’s start with a basic example where we embed RTL text within an LTR context.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Unicode Bidi Example</title>
<style>
.rtl-text {
direction: rtl;
unicode-bidi: embed;
}
</style>
</head>
<body>
<p>This is an English sentence with <span class="rtl-text">مرحبا بكم في عالم البرمجة</span> embedded.</p>
</body>
</html>In this example, the .rtl-text class applies the direction: rtl and unicode-bidi: embed properties to the Arabic text. This ensures the Arabic text is displayed correctly within the English sentence, maintaining the proper reading order for both languages.
Example 2: Controlling Text Direction with unicode-bidi
In some cases, you may need to override the default bidirectional algorithm to enforce a specific text direction.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Unicode Bidi Override</title>
<style>
.override-text {
direction: rtl;
unicode-bidi: bidi-override;
}
</style>
</head>
<body>
<p>This is a mixed language sentence with <span class="override-text">1234 مرحبا</span> embedded.</p>
</body>
</html>Here, the .override-text class uses direction: rtl and unicode-bidi: bidi-override to ensure that the embedded text segment (which includes numbers and Arabic text) is displayed in a right-to-left order, regardless of the bidirectional algorithm’s default behavior.
Conclusion
The unicode-bidi property is a critical tool for web developers working with multilingual content, especially when handling bidirectional text. By understanding and effectively using this property, you can ensure that text displays correctly and maintains the intended reading order, providing a seamless and accessible experience for users worldwide.
In this article, we explored the unicode-bidi property, its syntax, and various values, along with practical examples to demonstrate its application. Whether you are embedding RTL text within an LTR context or overriding the default bidirectional algorithm, mastering the unicode-bidi property will enhance your web development toolkit and improve your site’s usability for diverse audiences.
