Introduction

When building websites that display content in multiple languages or need to handle text from different writing systems, you might encounter text direction challenges. Some languages like Arabic and Hebrew are written from right-to-left (RTL), while others like English are written from left-to-right (LTR). HTML5 provides two specialized elements to handle these situations: <bdi> and <bdo>.

These elements give you precise control over text direction, ensuring that mixed-language content displays correctly and maintains proper readability. Whether you're building multilingual websites, displaying user-generated content, or working with international data, understanding these elements is essential for creating accessible, globally-friendly web content.

In this article, you'll learn how to use BDI and BDO elements to properly control text direction and create websites that work seamlessly with different writing systems.

What are BDI and BDO Elements?

The BDI and BDO elements are HTML5 text-level semantic elements designed to control text direction:

BDI (Bidirectional Isolate): Isolates a portion of text that might have a different direction from the surrounding text. It prevents the bidirectional algorithm from affecting the isolated text's relationship with surrounding content.

BDO (Bidirectional Override): Explicitly overrides the browser's automatic text direction detection and forces text to display in a specific direction, either left-to-right or right-to-left.

Both elements are crucial for handling mixed-direction text content, but they serve different purposes and should be used in appropriate contexts to maintain proper text flow and readability.

Key Features and Characteristics

Bidirectional Text Support

Both elements help manage bidirectional text scenarios where content contains mixed LTR and RTL text, ensuring proper display and readability.

Browser Algorithm Control

These elements work with the browser's Unicode Bidirectional Algorithm, either isolating text from the algorithm (BDI) or overriding it completely (BDO).

Semantic Meaning

Both elements provide semantic meaning about text direction intentions, helping browsers and assistive technologies understand how content should be processed.

International Compatibility

These elements are essential for creating websites that properly support international users and multilingual content.

Basic Syntax and Structure

BDI Element Syntax

JavaScript

<bdi>Text to be isolated</bdi>

BDO Element Syntax

JavaScript

<bdo dir="rtl">Text to be overridden</bdo>

Essential Attributes

dir: Specifies text direction (required for BDO, optional for BDI)
- ltr: Left-to-right direction
- rtl: Right-to-left direction
- auto: Automatic direction detection (default for BDI)

Practical Examples

User Names with Unknown Direction

JavaScript

<p>Welcome back, <bdi>أحمد</bdi>! You have 3 new messages.</p>
<p>Welcome back, <bdi>John Smith</bdi>! You have 5 new messages.</p>

Mixed Language Content

JavaScript

<p>
  The Arabic word for "book" is <bdi>كتاب</bdi> and it's pronounced "kitab".
</p>

Comment System with International Users

JavaScript

<div class="comment">
  <strong><bdi>יעקב כהן</bdi></strong> says:
  <p>This is a great article!</p>
</div>

<div class="comment">
  <strong><bdi>Sarah Johnson</bdi></strong> says:
  <p>I completely agree with the previous comment.</p>
</div>

Forcing Text Direction with BDO

JavaScript

<p>Normal text flow: Hello World</p>
<p>Reversed text: <bdo dir="rtl">Hello World</bdo></p>

Product Listings with International Names

JavaScript

<ul>
  <li>Product: <bdi>iPhone 15</bdi> - $999</li>
  <li>Product: <bdi>سامسونج جالاكسي</bdi> - $899</li>
  <li>Product: <bdi>Google Pixel</bdi> - $799</li>
</ul>

Address Display with Mixed Languages

JavaScript

<address>
  <strong>International Office:</strong><br>
  <bdi>123 Main Street</bdi><br>
  <bdi>شارع الملك فهد، الرياض</bdi><br>
  Saudi Arabia
</address>

Email Display with RTL Names

JavaScript

<p>From: <bdi>مصطفى أحمد</bdi> &lt;mustafa@example.com&gt;</p>
<p>To: <bdi>John Smith</bdi> &lt;john@example.com&gt;</p>
<p>Subject: Meeting Tomorrow</p>

Use Cases and Applications

When to Use BDI

User-Generated Content: Perfect for displaying usernames, comments, or any content where you don't know the text direction in advance.

International Product Names: Ideal for e-commerce sites displaying product names in various languages and scripts.

Social Media Platforms: Essential for platforms where users might have names or content in different writing systems.

Search Results: Useful when displaying search results that might contain mixed-language content.

Database Content: Great for displaying data from international databases where text direction varies.

When to Use BDO

Text Direction Demonstration: Perfect for educational content explaining different writing systems or text directions.

Artistic Text Effects: Useful for creating specific visual effects where you need to reverse text direction.

Accessibility Testing: Helpful for testing how your layout handles different text directions.

Special Typography: Useful for specific design requirements where text needs to flow in a particular direction.

Advantages and Benefits

Improved Text Readability

Proper use of BDI and BDO ensures that mixed-language content remains readable and displays correctly, preventing text direction conflicts that can make content confusing or illegible.

Global Accessibility

These elements make your website more accessible to international users by properly handling their native languages and writing systems.

Semantic Clarity

Using BDI and BDO provides clear semantic meaning about text direction intentions, helping browsers and assistive technologies process content correctly.

Future-Proof International Support

As your website grows to serve international audiences, having proper bidirectional text support ensures your content will display correctly for all users.

Professional Appearance

Proper text direction handling creates a more professional, polished appearance for international content, showing attention to detail and cultural sensitivity.

Limitations and Considerations

Limited Visual Impact

In many cases, these elements may not create visible differences for Latin-script languages, making their importance less obvious during development.

Browser Algorithm Complexity

The Unicode Bidirectional Algorithm is complex, and understanding when to use these elements requires knowledge of how different scripts interact.

Testing Challenges

Properly testing bidirectional text requires access to RTL languages and understanding of how they should display, which can be challenging for developers unfamiliar with these writing systems.

Overuse Concerns

Using these elements unnecessarily can interfere with the browser's natural text direction handling, potentially creating problems where none existed.

Best Practices

Use BDI for Unknown Direction Content

When displaying user-generated content or data from external sources where text direction is unknown, always use BDI:

JavaScript

<!-- Good for user-generated content -->
<p>Posted by: <bdi>{{username}}</bdi></p>

<!-- Problematic without BDI -->
<p>Posted by: {{username}}</p>

Reserve BDO for Intentional Overrides

Only use BDO when you specifically need to override the browser's automatic direction detection:

JavaScript

<!-- Appropriate use of BDO -->
<p>Compare: <bdo dir="ltr">Hello World</bdo> vs <bdo dir="rtl">Hello World</bdo></p>

Test with Real Content

Always test your bidirectional text handling with actual RTL content, not just placeholder text:

JavaScript

<!-- Test with real Arabic/Hebrew text -->
<p>User: <bdi>محمد العلي</bdi> - Last login: 2 hours ago</p>

Combine with Proper Language Attributes

Use lang attributes alongside BDI/BDO for complete internationalization support:

JavaScript

<p>Arabic greeting: <bdi lang="ar">مرحبا</bdi></p>

Consider Context

Think about the surrounding content when deciding whether to use BDI or BDO:

JavaScript

<!-- BDI protects the surrounding punctuation -->
<p>Welcome, <bdi>أحمد</bdi>!</p>

Conclusion

The HTML BDI and BDO elements are essential tools for creating websites that properly support international users and multilingual content. While they might seem like minor additions to HTML5, they play crucial roles in ensuring that text displays correctly across different writing systems and cultures.

For intermediate developers, these elements demonstrate the importance of considering global audiences from the beginning of web development projects. Understanding how to handle bidirectional text is becoming increasingly important as the web becomes more international and diverse.

Start incorporating BDI elements into your projects whenever you display user-generated content or international data. Use BDO sparingly and only when you need to override the browser's automatic text direction detection for specific purposes.

Remember that proper international support isn't just about translation - it's also about respecting different writing systems and cultural conventions. BDI and BDO elements help you create more inclusive, accessible websites that work properly for users regardless of their native language or writing system.

As you continue developing web applications, consider the international implications of your text handling and use these elements to ensure your content displays correctly for all users around the world.