Path // www.yourhtmlsource.com → Reference → <bdi>

<bdi>

by Ross Shannon

The <bdi> element (Bidirectional Isolate) isolates a span of text that might be formatted in a different direction from the surrounding text. This is crucial when embedding user-generated content or data that might contain text in right-to-left (RTL) languages like Arabic or Hebrew within left-to-right (LTR) content, or vice versa. The element prevents the bidirectional algorithm from incorrectly affecting adjacent text.

Clock This page was last updated on 2025-11-17


Syntax

<p>User <bdi>username_here</bdi> posted a comment.</p>

The element requires both opening and closing tags. It automatically applies unicode-bidi: isolate to its contents, which prevents the text direction from "leaking" into the surrounding content. The browser determines the text direction based on the first strong directional character within the element.

Attributes

  • dir - Explicitly sets the text direction:
    • ltr - Left-to-right
    • rtl - Right-to-left
    • auto - Let the browser decide (default behavior)
  • Global attributes - The <bdi> element supports all global attributes such as id, class, style, lang, and dir.

The default behavior of <bdi> is equivalent to setting dir="auto", which automatically detects the text direction.

Examples

User-Generated Usernames

<ul>
  <li>User <bdi>JohnDoe</bdi>: 15 posts</li>
  <li>User <bdi>محمد</bdi>: 22 posts</li>
  <li>User <bdi>אברהם</bdi>: 8 posts</li>
</ul>

Product Names from Database

<p>Top seller: <bdi class="product-name">{{product_name}}</bdi> - $49.99</p>

Mixed Direction Content

<p>The article "<bdi>السلام عليكم</bdi>" was published yesterday.</p>

When to Use

Use the <bdi> element when:

  • Displaying user-generated content (usernames, comments, titles)
  • Showing data from databases where text direction is unknown
  • Embedding content that may contain RTL text in LTR pages
  • Listing items that could have mixed directional text
  • Preventing numbers or punctuation from being misplaced
  • Building internationalized applications

Why <bdi> is important:

  • Without isolation, RTL text can cause punctuation and numbers to display incorrectly
  • User-generated content is unpredictable and may contain any language
  • The Unicode bidirectional algorithm can produce unexpected results
  • Essential for proper display in multilingual applications

Common problem without <bdi>:

<!-- Without bdi - numbers may appear incorrectly positioned -->
<p>User محمد: 15 posts</p>

<!-- With bdi - correct display guaranteed -->
<p>User <bdi>محمد</bdi>: 15 posts</p>

  • <bdo> - Bidirectional override (forces direction)
  • <span> - Generic inline container
  • <data> - Machine-readable data annotation
  • <em> - Emphasis that may need isolation