Introduction to <bdi>

The <bdi>(Bidirectional Isolation) tag in HTML is an element designed to manage the direction of text, particularly when mixing languages with different writing directions. This feature is essential for creating a better reading experience on multilingual websites, where content needs to be displayed in a specific order, regardless of the surrounding text’s direction.

Why Use the <bdi>Tag?

When you have content that mixes languages with different directionalities, such as embedding an Arabic phrase in an English <paragraph>, it can lead to display issues. Text might not render in the intended direction, leading to confusion or misinterpretation. The <bdi>tag allows you to isolate the text to ensure that the browser displays it in its correct direction without being affected by surrounding content.

How to Use the <bdi>Tag?

To use the <bdi>tag, you simply wrap the text that you want to isolate. This ensures that the text within the <bdi>tag maintains its directionality independent of the surrounding content. Below is an example of how to implement the <bdi>tag with a modern, stylish design using HTML and CSS.

Copy to clipboard
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>title of <bdi> tag</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
    <h2>Exploring the `<bdi>` Tag in HTML</h2>
    
    <div class="content-section">
        The `<bdi>` tag in HTML is a powerful tool for managing the display of text with different directional properties. 
 It's especially useful when embedding snippets from languages with different writing directions within the same line of text. 
 For instance, displaying an Arabic name within an English sentence.
    </div>

    <!-- Example box with left-to-right text -->
    <div class="example-box">
        <p>Order information in English: <bdi class="bdi-highlight">Order#1234XYZ</bdi></p>
    </div>

    <!-- Example box with right-to-left text -->
    <div class="example-box rtl">
        <p>معلومات الطلب باللغة العربية: <bdi class="bdi-highlight">رقم الطلب#1234XYZ</bdi></p>
    </div>

    <div class="content-section">
        As illustrated above, the <bdi> tag effectively isolates the text, ensuring it maintains the correct reading order. 
 This makes it an essential tag for web developers aiming to enhance readability and accessibility on multilingual websites.
    </div>
</div>
</body>
</html>
Copy to clipboard
/* Basic styling for the body */
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f0f2f5;
            margin: 0;
            padding: 0;
            display: flex; /* Using Flexbox to center the container */
            justify-content: center; /* Center horizontally */
            align-items: center; /* Center vertically */
            min-height: 100vh; /* Ensure the body takes up the full height of the viewport */
        }
        
        /* Styling for the main content container */
        .container {
            max-width: 600px;
            background-color: #fff;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            text-align: center; /* Center text inside the container */
        }
        
        /* Header styling */
        h2 {
            font-size: 28px;
            color: #0066cc;
            margin-bottom: 20px;
        }
        
        /* Styling for text content sections */
        .content-section {
            font-size: 18px;
            line-height: 1.8;
            margin-bottom: 20px;
        }
        
        /* Styling for example boxes */
        .example-box {
            background-color: #e7f3ff;
            border-left: 6px solid #0066cc;
            padding: 15px;
            margin: 20px 0;
            border-radius: 6px;
        }
        
        /* Custom styling for text direction */
        .rtl {
            direction: rtl;
        }
        
        /* Styling for the isolated text within <bdi> */
        .bdi-highlight {
            font-weight: bold;
            color: #d9534f;
            background-color: #f8d7da;
            padding: 4px 10px;
            border-radius: 4px;
            display: inline-block; /* To keep padding and background consistent */
        }

Global Attributes

AttributesDescription
accesskeySpecifies a shortcut key to activate or focus an element.
autocapitalizeControls whether and how text input is automatically capitalized.
classSpecifies one or more class names for the element, allowing CSS styling and JavaScript manipulation.
contenteditableSpecifies whether the content of an element is editable or not.
contextmenuSpecifies a context menu for the element.
dirDefines the text direction. Possible values are "ltr" (left-to-right), "rtl" (right-to-left), and "auto".
draggableSpecifies whether an element is draggable. Possible values are "true" or "false".
enterkeyhintSpecifies the action label or icon to be shown for the enter key on virtual keyboards.
hiddenIndicates that the element is not yet, or is no longer, relevant. The browser does not display elements that have the `hidden` attribute set.
idSpecifies a unique identifier for the element.
inputmodeProvides a hint to browsers for which virtual keyboard configuration to use when editing this element or its descendants.
isAllows you to specify the type of custom element.
langSpecifies the language of the element's content.
nonceA cryptographic nonce ("number used once") that can be used by Content Security Policy (CSP) to determine whether or not a given fetch will be allowed to proceed.
partSpecifies the element’s part in the shadow DOM.
slotAssigns a slot in a shadow DOM shadow tree.
spellcheckIndicates whether the element is subject to spell checking.
styleProvides inline CSS styling for the element.
tabindexSpecifies the tab order of the element.
titleAdds extra information about the element, displayed as a tooltip when hovering over the element.
translateSpecifies whether the content of the element should be translated. Possible values are "yes" or "no".
HTML AttributesGlobal AttributesEvent Attributes
To view the full list
To view the full list
To view the full list
elementsChrome BrowsersMicrosoft Edge BrowserFirefox BrowsersSafari BrowserOpera Browser
<bdi>16.079.010.0No15.0