Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
CSS unicode-bidi Property
The CSS unicode-bidi property controls the bidirectional text algorithm, determining how text with mixed left-to-right and right-to-left content should be displayed. This property is essential when working with multilingual content that includes languages like Arabic, Hebrew, or Persian alongside Latin-based languages.
Syntax
selector {
unicode-bidi: value;
}
Possible Values
| Value | Description |
|---|---|
normal |
Default behavior, follows Unicode bidirectional algorithm |
embed |
Creates an additional level of embedding |
bidi-override |
Forces text direction override based on direction property |
isolate |
Isolates element from surrounding text for bidirectional calculations |
isolate-override |
Combines isolate and bidi-override behaviors |
Example: Comparing Different Unicode-bidi Values
The following example demonstrates how different unicode-bidi values affect text rendering with right-to-left direction −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
margin: 20px 0;
padding: 10px;
border: 1px solid #ccc;
}
.normal {
direction: rtl;
unicode-bidi: normal;
background-color: #f0f0f0;
}
.bidi-override {
direction: rtl;
unicode-bidi: bidi-override;
background-color: #e6f3ff;
}
.isolate {
direction: rtl;
unicode-bidi: isolate;
background-color: #fff2e6;
}
</style>
</head>
<body>
<h2>Unicode-bidi Property Comparison</h2>
<div class="container">
<h3>Normal (default):</h3>
<p class="normal">Hello World 123 Arabic ???????</p>
</div>
<div class="container">
<h3>Bidi-override:</h3>
<p class="bidi-override">Hello World 123 Arabic ???????</p>
</div>
<div class="container">
<h3>Isolate:</h3>
<p class="isolate">Hello World 123 Arabic ???????</p>
</div>
</body>
</html>
Three paragraphs with different text rendering: - Normal: Text follows natural bidirectional algorithm with mixed content - Bidi-override: Forces complete right-to-left character reversal - Isolate: Treats the element as isolated from surrounding bidirectional context Each paragraph is displayed in a bordered container with different background colors.
Key Points
Direction vs Unicode-bidi: The direction property sets the base text direction, while unicode-bidi controls how the bidirectional algorithm processes the text within that direction.
Browser Support: This property is well-supported across modern browsers and is crucial for proper internationalization.
Conclusion
The unicode-bidi property is essential for creating websites that properly handle multilingual content with mixed text directions. Use bidi-override for complete directional control or isolate for better bidirectional text handling.
104 Views
