<bdi>: The Bidirectional Isolate element - HTML

`No bdi with RTL text`

This example lists the winners of a competition using elements only, and one of the winners has a name consisting of RTL text. In this case the - 1, which consists of characters with neutral or weak directionality, will adopt the directionality of the RTL text, and the result will be garbled:

html اَلأَعْشَى - 1st place Jerry Cruncher - 2nd place body { border: 1px solid #3f87a6; max-width: calc(100% - 40px - 6px); padding: 20px; width: calc(100% - 40px - 6px); border-width: 1px 1px 1px 5px; }

`Using bdi with LTR and RTL text`

This example lists the winners of a competition using elements. These elements instruct the browser to treat the name in isolation from its embedding context, so the example output is properly ordered:

`Technical summary`

Content categories	Flow content, phrasing content, palpable content.
Permitted content	Phrasing content.
Tag omission	None, both the starting and ending tag are mandatory.
Permitted parents	Any element that accepts phrasing content.
Implicit ARIA role	`generic`
Permitted ARIA roles	Any
DOM interface	`HTMLElement`

`Specifications`

Specification
HTML # the-bdi-element

`Browser compatibility`

See also Inline markup and bidirectional text in HTML Unicode Bidirectional Algorithm basics Localization Related HTML element: Related CSS properties: direction, unicode-bidi Help improve MDN Was this page helpful to you? Learn how to contribute.This page was last modified on Apr 10, 2025 by MDN contributors. View this page on GitHub • Report a problem with this content