HTML <bdi> Tag
➔ The <bdi> element tells the browser's bidirectional algorithm to treat the text contained in it to isolate from the surrounding text.
➔ This is useful when a website dynamically inserts some text and does not know the direction of text insertion.
The bdi tag syntax
<p>
Surrounding text <bdi>embeded text with different directionality</bdi> is here.
</p>
Key aspects and best practices
➔ The bdi tag uses text that is isolated from the text around it.
➔ The text inside this tag may later be formatted in a different direction (right-to-left, or left-to-right) than the surrounding text.
➔ This is especially useful when a user embeds text in other text, such as comments, user descriptions where the user's input direction is unknown.
The bdi tag example.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML bdi tag example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content='charset=utf-8' />
</head>
<body>
<h2>HTML bdi tag example</h2>
<p>User Maria 100 post in a month. (Normal output number after name. as expected.)</p>
<h3>Problem in mixed language</h3>
<p>User إنايا 100 post in a month.(In output number goes before the name, not expected.)</p>
<h3>Solution 1 with HTML bdi tag example</h3>
<p>User<bdi> إنايا </bdi>100 post in a month.(Normal output number after name expected.)</p>
<h3>Solution 2 with HTML bdo tag example</h3>
<p>User<bdo dir="rtl"> إنايا </bdo>100 post in a month.(Normal output number after name expected.)</p>
</body>
</html>
Copy the code and click on the "Try it Now" button to see how it works.
Purpose and use
➔ The browser uses the Unicode bidirectional algorithm to handle the direction of different languages such as Arabic, Hebrew, English, etc.
➔ In mixed texts of two different directional languages, the directionality of one may be affected by the other. To prevent the embedding text from affecting surrounding text, the bdi tag surrounds the embedded text.
➔ For example, Arabic text placed in English sentences without the bdi tag can confuse browser algorithms, causing surrounding text elements to appear in the wrong place.
➔ Therefore, it is recommended to use the bdi tag to avoid confusion about the display of surrounding text when the direction of the embedded text is unknown.
Supported Global attributes
Global attributes may be applied on all elements, although some elements may have no effect on them.
<accesskey>,
<class>,
<contenteditable>,
<contextmenu>,
<data-*>,
<dir>,
<draggable>,
<dropzone>,
<hidden>,
<id>,
<lang>,
<spellcheck>,
<style>,
<tabindex>,
<title>,
<translate>.
Supported Global Event Handler Attributes
Global Event Handler attributes may be applied on all elements, although some elements may have no effect on them.
<onabort>,
<onautocomplete>,
<onautocompleteerror>,
<onblur>,
<oncancel>,
<oncanplay>,
<oncanplaythrough>,
<onchange>,
<onclick>,
<onclose>,
<oncontextmenu>,
<oncuechange>,
<ondblclick>,
<ondrag>,
<ondragend>,
<ondragenter>,
<ondragleave>,
<ondragover>,
<ondragstart>,
<ondrop>,
<ondurationchange>,
<onemptied>,
<onended>,
<onerror>,
<onfocus>,
<oninput>,
<oninvalid>,
<onkeydown>,
<onkeypress>,
<onkeyup>,
<onload>,
<onloadeddata>,
<onloadedmetadata>,
<onloadstart>,
<onmousedown>,
<onmouseenter>,
<onmouseleave>,
<onmousemove>,
<onmouseout>,
<onmouseover>,
<onmouseup>,
<onmousewheel>,
<onpause>,
<onplay>,
<onplaying>,
<onprogress>,
<onratechange>,
<onreset>,
<onresize>,
<onscroll>,
<onseeked>,
<onseeking>,
<onselect>,
<onshow>,
<onsort>,
<onstalled>,
<onsubmit>,
<onsuspend>,
<ontimeupdate>,
<ontoggle>,
<onvolumechange>,
<onwaiting>.
Learning with HTML Editor "Try it Now"
You can edit the HTML code and view the result using online editor.
Example
<ul>
<li>Manager <bdi>Steven King</bdi>: 1st Place</li>
<li>Employee <bdi>Diana Lorentz</bdi>: 2nd Place</li>
<li>Employee <bdi>تیز سمی</bdi>: 3rd Place</li>
</ul>
Click on the "Try it Now" button to see how it works.