HTML Bi-Directional Text is used when a webpage contains text written in different writing directions. Most languages such as English, Hindi, and many European languages are written from left to right (LTR), while languages such as Arabic, Hebrew, and Persian are generally written from right to left (RTL).

HTML provides the dir attribute and the <bdi> and <bdo> elements to control and manage text direction. These features are especially useful when building multilingual websites where both left-to-right and right-to-left languages appear on the same page.

What Is Bi-Directional Text in HTML?

Bi-directional text, often called BiDi text, refers to content that contains text flowing in different directions.

For example, English is written from left to right:

Hello World

Arabic is written from right to left:

مرحبا بالعالم

When both languages appear on the same webpage, the browser needs information about the correct direction of each piece of content.

HTML provides tools that allow developers to specify whether text should be displayed from left to right or right to left.

HTML dir Attribute

The dir attribute specifies the direction of text inside an HTML element.

It can have three commonly used values:

• ltr – Left to right
• rtl – Right to left
• auto – Let the browser determine the direction

For example:

<p dir="ltr">This text is written from left to right.</p>

For right-to-left text:

<p dir="rtl">هذا نص باللغة العربية</p>

The dir attribute can be applied to many HTML elements.

HTML Left-to-Right Text

The ltr value means left to right.

It is commonly used for languages such as:

• English
• Spanish
• French
• German
• Italian

Example:

<p dir="ltr">
  Welcome to Web4Learners.
</p>

The browser displays the text from the left side toward the right side.

In most cases, browsers already use left-to-right direction by default for languages such as English, so specifying dir="ltr" is not always necessary.

HTML Right-to-Left Text

The rtl value means right to left.

It is commonly used for languages such as:

• Arabic
• Hebrew
• Persian
• Urdu

Example:

<p dir="rtl">
  مرحبًا بك في موقعنا
</p>

The browser displays the text from the right side toward the left side.

This is useful when creating websites that support Arabic, Hebrew, Persian, Urdu, or other RTL languages.

HTML dir="auto"

The auto value allows the browser to determine the direction based on the text.

For example:

<p dir="auto">
  Welcome to Web4Learners.
</p>

The browser determines the appropriate text direction automatically.

This can be useful when the content is generated dynamically and the direction of the text is not known beforehand.

HTML <bdi> Element

The <bdi> element stands for Bi-Directional Isolation.

It is used to isolate a section of text that may have a different text direction from the surrounding content.

This is particularly useful when displaying dynamic content, such as usernames, product names, comments, or user-generated text.

For example:

<p>
  User: <bdi>Ahmed</bdi>
</p>

The <bdi> element helps prevent the direction of the surrounding text from affecting the isolated content.

Why Use the <bdi> Element?

The <bdi> element is especially useful when you do not know the language or writing direction of dynamically generated content.

Consider a website displaying usernames:

<ul>
  <li>User: <bdi>John</bdi></li>
  <li>User: <bdi>محمد</bdi></li>
  <li>User: <bdi>David</bdi></li>
</ul>

The usernames can contain different scripts and writing directions.

Using <bdi> helps the browser handle each piece of content independently.

HTML <bdi> Example

Here is a simple example:

<p>
  Username: <bdi>محمد</bdi>
</p>

The surrounding text may be written in English while the username is written in Arabic.

The <bdi> element isolates the username’s direction from the surrounding text.

This is particularly useful for websites with user-generated content.

HTML <bdo> Element

The <bdo> element stands for Bi-Directional Override.

It is used when you want to explicitly override the normal direction of text.

The dir attribute is required when using <bdo>.

For example:

<bdo dir="rtl">
  This text is displayed from right to left.
</bdo>

Here, dir="rtl" forces the text direction to right-to-left.

HTML <bdo> With LTR

You can also force text to display from left to right.

<bdo dir="ltr">
  This text is displayed from left to right.
</bdo>

The <bdo> element is useful when you deliberately need to override the normal text direction.

However, it should not be used simply for styling. Use it when a genuine directional override is required.

Difference Between <bdi> and <bdo>

Although both elements deal with bi-directional text, they have different purposes.

Element	Purpose
<bdi>	Isolates text from surrounding direction
<bdo>	Overrides the normal text direction

For example, <bdi> is useful for dynamic usernames:

<p>User: <bdi>محمد</bdi></p>

While <bdo> can explicitly reverse the direction:

<bdo dir="rtl">Hello World</bdo>

Use <bdi> when you want isolation and <bdo> when you intentionally want to override direction.

HTML Bi-Directional Text Example

The following example demonstrates different text directions:

<!DOCTYPE html>
<html>
<head>
  <title>HTML Bi-Directional Text</title>
</head>
<body>

  <h1>Bi-Directional Text</h1>

  <p dir="ltr">
    This text is written from left to right.
  </p>

  <p dir="rtl">
    هذا النص مكتوب من اليمين إلى اليسار.
  </p>

  <p>
    Username: <bdi>محمد</bdi>
  </p>

  <p>
    <bdo dir="rtl">Hello World</bdo>
  </p>

</body>
</html>

This example demonstrates the three main HTML features used for bi-directional text.

HTML dir Attribute on the <html> Element

You can specify the default direction for an entire webpage by placing the dir attribute on the <html> element.

For a left-to-right website:

<html lang="en" dir="ltr">

For a right-to-left website:

<html lang="ar" dir="rtl">

This is useful when an entire website is primarily written in one direction.

Individual elements can then override the default direction when necessary.

HTML Bi-Directional Text With Mixed Languages

A webpage can contain both LTR and RTL languages.

For example:

<p>
  Welcome to our website.
</p>

<p dir="rtl">
  مرحبًا بكم في موقعنا.
</p>

The first paragraph uses left-to-right text, while the second uses right-to-left text.

This approach is useful for multilingual websites.

If you are creating multilingual webpages, you should also use the appropriate lang attribute.

For example:

<p lang="ar" dir="rtl">
  مرحبًا بكم
</p>

The lang attribute identifies the language, while the dir attribute identifies the writing direction.

HTML Bi-Directional Text and CSS

Text direction can also be controlled with CSS using the direction property.

For example:

<style>
  .rtl-text {
    direction: rtl;
  }
</style>

<p class="rtl-text">
  مرحبًا بكم
</p>

However, when the direction represents the actual language and document structure, the HTML dir attribute is generally more appropriate because it provides semantic information.

CSS can then be used for presentation and layout.

HTML Bi-Directional Text Best Practices

Follow these practices when working with bi-directional text:

• Use dir="ltr" for left-to-right text when explicitly needed.
• Use dir="rtl" for right-to-left text.
• Use dir="auto" when the direction needs to be determined automatically.
• Use <bdi> for dynamically generated content with an unknown direction.
• Use <bdo> when you intentionally need to override text direction.
• Use the lang attribute to identify the language.
• Set the default direction on the <html> element when appropriate.
• Test multilingual content on different browsers and screen sizes.

For example:

<html lang="ar" dir="rtl">

This establishes Arabic as the primary language and right-to-left as the default direction.

HTML Bi-Directional Text Common Mistakes

One common mistake is using CSS alone to control language direction when the direction is actually part of the document’s meaning.

Another mistake is using <bdo> when <bdi> would be more appropriate.

For example, dynamically generated usernames generally benefit from isolation:

<p>
  User: <bdi>محمد</bdi>
</p>

rather than forcing a direction with <bdo>.

Another common mistake is forgetting to specify the language:

<p dir="rtl">مرحبا</p>

A better approach can be:

<p lang="ar" dir="rtl">مرحبا</p>

This provides both language and direction information.