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
How to represent text that must be isolated from its surrounding for bidirectional text formatting in HTML?
The <bdi> (Bidirectional Isolate) HTML element tells the browser's bidirectional algorithm to treat the text it contains independently from its surrounding content. This is essential when embedding text of unknown directionality, such as user-generated content or dynamic text from databases.
Languages like Arabic, Hebrew, and Urdu are written from right-to-left (RTL), while English and most other languages are written left-to-right (LTR). When mixing these text directions in a single document, proper isolation prevents text rendering issues and ensures correct display order.
Syntax
Following is the basic syntax for the <bdi> element −
<bdi>text content</bdi>
The <bdi> element can also include the dir attribute to explicitly specify text direction −
<bdi dir="auto">text content</bdi> <bdi dir="ltr">left-to-right text</bdi> <bdi dir="rtl">right-to-left text</bdi>
How Bidirectional Text Isolation Works
Without proper isolation, mixing LTR and RTL text can cause display problems. The <bdi> element creates a boundary that prevents the bidirectional algorithm from affecting surrounding text. This is particularly important when displaying user names, addresses, or any dynamic content where text direction is unknown.
Example − Wrestling Championship Results
Following example demonstrates how <bdi> isolates names with different text directions in a competition list −
<!DOCTYPE html>
<html>
<head>
<title>Bidirectional Text Isolation</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h1>World Wrestling Championships</h1>
<ul>
<li><bdi class="name">Akshay</bdi>: 1st place</li>
<li><bdi class="name">Balu</bdi>: 2nd place</li>
<li><span class="name">Mani</span>: 3rd place</li>
<li><bdi class="name">????? ????? ????</bdi>: 4th place</li>
<li><span class="name" dir="auto">??? ???</span>: 5th place</li>
</ul>
</body>
</html>
The output shows how <bdi> properly isolates Arabic names from affecting the surrounding English text −
World Wrestling Championships ? Akshay: 1st place ? Balu: 2nd place ? Mani: 3rd place ? ????? ????? ????: 4th place ? ??? ???: 5th place
Example − User Comments with Mixed Languages
Following example shows how <bdi> handles user-generated content with unknown text direction −
<!DOCTYPE html>
<html>
<head>
<title>Mixed Language Comments</title>
<style>
.comment {
border: 1px solid #ddd;
margin: 10px 0;
padding: 10px;
border-radius: 5px;
}
.username { font-weight: bold; color: #007bff; }
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>User Comments</h2>
<div class="comment">
<span class="username"><bdi>John Smith</bdi></span> says:
<p>This tutorial is very helpful!</p>
</div>
<div class="comment">
<span class="username"><bdi>???? ????</bdi></span> says:
<p><bdi>???? ?? ??? ????? ??????</bdi></p>
</div>
<div class="comment">
<span class="username"><bdi>??? ???</bdi></span> says:
<p><bdi>?????? ???? ??????</bdi></p>
</div>
</body>
</html>
Each username and comment is properly isolated, ensuring correct text flow regardless of language direction.
Using BDI vs DIR Attribute
While both <bdi> and the dir attribute handle bidirectional text, they serve different purposes −
| <bdi> Element | dir Attribute |
|---|---|
| Automatically isolates content from surrounding text | Explicitly sets text direction for an element |
| Ideal for dynamic or unknown content direction | Best when text direction is known in advance |
| Creates bidirectional isolation boundary | Sets directional formatting without isolation |
| Uses Unicode Bidirectional Algorithm | Requires manual direction specification |
Example − Dynamic Content with Unknown Direction
Following example demonstrates handling dynamic content where text direction is unknown −
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Bidirectional Content</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Product Reviews</h2>
<div id="reviews"></div>
<button onclick="addReview()">Add Sample Reviews</button>
<script>
const sampleReviews = [
{ user: "Alice Johnson", review: "Great product, highly recommended!" },
{ user: "???? ?????", review: "???? ???? ????? ?????" },
{ user: "David Lee", review: "Fast shipping and excellent quality." }
];
function addReview() {
const container = document.getElementById('reviews');
container.innerHTML = '';
sampleReviews.forEach(item => {
const reviewDiv = document.createElement('div');
reviewDiv.style.cssText = 'border: 1px solid #ccc; margin: 10px 0; padding: 15px; border-radius: 5px;';
reviewDiv.innerHTML = `
<strong><bdi>${item.user}</bdi></strong><br>
<bdi>"${item.review}"</bdi>
`;
container.appendChild(reviewDiv);
});
}
</script>
</body>
</html>
When clicking "Add Sample Reviews", each review is properly isolated using <bdi>, ensuring correct display regardless of the text direction.
Browser Support and Best Practices
The <bdi> element is supported in all modern browsers. For best results −
Use <bdi> when embedding user-generated content or dynamic text of unknown direction.
Combine with
dir="auto"for automatic direction detection based on content.Use <bdo> (Bidirectional Override) when you need to force a specific text direction.
Apply <bdi> to the smallest meaningful text unit to maintain proper isolation.
Conclusion
The <bdi> element is essential for properly handling mixed-direction text content in web applications. It automatically isolates text from its surroundings, preventing bidirectional text rendering issues. Use <bdi> when dealing with dynamic content of unknown text direction, such as user names, comments, or any multilingual data.
331 Views
