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
Selected Reading
Set whether the text should be overridden to support multiple languages with CSS
The CSS unicode-bidi property controls how bidirectional text is handled in HTML elements. This property is essential when working with documents that contain text in multiple languages with different writing directions, such as mixing English (left-to-right) with Arabic or Hebrew (right-to-left).
Syntax
selector {
unicode-bidi: value;
}
Possible Values
| Value | Description |
|---|---|
normal |
Default value. Does not use additional embedding level |
bidi-override |
Creates an additional level of embedding and overrides the inherent directionality |
isolate |
Isolates the element from its surroundings for bidirectional text algorithm |
embed |
Creates an additional level of embedding |
Example: Bidirectional Text Override
The following example demonstrates different unicode-bidi values with right-to-left text direction −
<!DOCTYPE html>
<html>
<head>
<style>
.normal {
direction: rtl;
unicode-bidi: normal;
border: 1px solid #ccc;
padding: 10px;
margin: 10px 0;
}
.override {
direction: rtl;
unicode-bidi: bidi-override;
border: 1px solid #ccc;
padding: 10px;
margin: 10px 0;
}
.isolate {
direction: rtl;
unicode-bidi: isolate;
border: 1px solid #ccc;
padding: 10px;
margin: 10px 0;
}
</style>
</head>
<body>
<h1>Unicode-bidi Property Examples</h1>
<p>Normal text direction (left-to-right):</p>
<p>Hello World 123</p>
<p>With unicode-bidi: normal</p>
<p class="normal">Hello World 123</p>
<p>With unicode-bidi: bidi-override</p>
<p class="override">Hello World 123</p>
<p>With unicode-bidi: isolate</p>
<p class="isolate">Hello World 123</p>
</body>
</html>
The page displays four text examples: - Normal text reads "Hello World 123" left-to-right - "normal" value maintains natural text flow despite RTL direction - "bidi-override" forces complete right-to-left character reversal: "321 dlroW olleH" - "isolate" treats the text block independently from surrounding content
Key Points
- The
unicode-bidiproperty works in conjunction with thedirectionproperty - Use
bidi-overrideto force text reversal regardless of character directionality - Use
isolatewhen you want to separate bidirectional content from surrounding text
Conclusion
The unicode-bidi property is crucial for controlling text direction in multilingual documents. It ensures proper text rendering when combining languages with different writing directions.
Updated on: 2026-03-15T13:21:27+05:30
144 Views
Advertisements