<bdi>: The HTML Bidirectional Isolate Element

1 Description

The HTML <bdi> element is used to wrap text which may be either left-to-right or right-to-left.

When text is being inserted into a webpage, and the directionality (left-to-right, or right-to-left) is not known ahead of time text rendering issues may arise. The <bdi> element exists to solve these issues by instructing the browser to treat the text contained within the <bdi> element separately from the surrounding text.

2 Examples

<!DOCTYPE html>
<html>
    <head>
        <title>Example Page</title>
    </head>
    <body>
        <h1>Chess Tournament Competitors</h1>
        <p>
            Below is a list of names of individuals who
            will be participating in this year's chess
            tournament.
        </p>
        <ol>
            <li><bdi>James Smith</bdi></li>
            <li><bdi>刚张</bdi></li>
            <li><bdi>أحمد أبو خاطر</bdi></li>
            <li><bdi>Alejandro Hernandez</bdi></li>
        </ol>
    </body>
</html>

This document was last updated: