HTML Component: bdi

The HTML <bdi> factor is used to isolate part of the textual content that is likely to be formatted in a unique course from different textual content in the identical block of textual content.

The abbreviation “bdi” stands for “Bi-Directional Isolation.”

The <bdi> factor was launched in HTML5 and is a useful instrument for making certain that textual content is displayed appropriately. It’s notably helpful when coping with blended scripts in bi-directional languages, resembling Arabic or Hebrew, the place textual content is written from proper to left and numbers from left to proper.

Syntax

The syntax for the <bdi> factor is easy:

This syntax creates an inline factor that can be utilized to isolate bi-directional textual content.

Instance

Right here is an instance of how the <bdi> factor can be utilized in an HTML doc. That is English content material, displayed left-to-right (LTR), however it incorporates some Arabic script which is learn right-to-left (RTL). This could generally confuse browsers.

Discover how, when <bdi> isn’t used, owing to the presence of characters with “impartial or weak directionality” (numbers, on this case) the browser doesn’t appropriately interpret the mixed Arabic and English content material:

1

<ul>

2

  <li><bdi>ابراهيم</bdi>: 3 days</li>

3

  <li><span>Barry</span>: 10 days</li>

4

</ul>

Attributes

The <bdi> factor doesn’t have any attributes.

Content material

The <bdi> factor can comprise any textual content or HTML components.

• The <bdo> (Bidirectional Textual content Override) factor can be utilized to isolate textual content in the same technique to the <bdi> factor, the exception being that it forces its contents to show in the wrong way to the movement of the encircling content material.