The bdi and bdo Elements

The Unicode Bidirectional Algorithm normally handles mixed-direction text well, but sometimes you need to override it — to isolate a user-supplied name from changing the direction of surrounding text, or to force a specific direction in a code block.

<bdi> (bidirectional isolation) treats its contents as a separate bidi context. The direction of text inside <bdi> cannot affect the direction of text outside it, and vice versa.

A list of users mixing English and Arabic names risks the Arabic names "leaking" their RTL flow into the surrounding text. Wrapping each name in <bdi> isolates it: the layout stays consistent regardless of what direction each name happens to be.

<bdo dir="rtl"> (bidirectional override) forces a specific direction on its contents, overriding the natural bidi resolution. Use it when you want to display text in a non-natural direction — for example, to render code snippets in LTR within an RTL page.

The dir attribute on a regular element sets a base direction and the bidi algorithm still applies inside. <bdo> turns off the bidi algorithm for its contents — every character flows strictly in the specified direction regardless of its script.

Anytime you embed user-generated text into surrounding chrome — names in chat headers, usernames in comments, titles in feed items. The isolation guarantees the chrome layout is unaffected by what the user typed.

Rarely. The main legitimate use is teaching about bidirectional text (showing what a string looks like reversed) or correcting badly-tagged data where the natural bidi resolution produces the wrong visual order.

For user-content of unknown direction, combine <bdi dir="auto"> for double safety: the auto detection picks a base direction from the content, and the bdi prevents that direction from leaking out into surrounding text.

bdi and bdo are supported in every modern browser. They are part of HTML5 and have been stable for years. Older versions of IE lack bdi but they are functionally obsolete; modern sites can use bdi freely.

Screen readers respect bidi isolation: text inside <bdi> is announced in its own language voice (when lang is set), without the surrounding context bleeding in. bdi also helps text-to-speech generate appropriate pauses around isolated phrases.

Templates with placeholders ("Welcome, {name}") should wrap the placeholder in <bdi>: Welcome, <bdi>{name}</bdi>. Any user name — English, Arabic, mixed — renders correctly without disturbing the rest of the greeting.

What is the practical difference between and ?

bdi isolates a section's text direction from affecting its surroundings — use for embedded user content like names in templates. bdo forces a specific direction overriding bidi, rarely needed outside teaching examples. Combine bdi with dir="auto" for safe handling of user-provided text in unknown languages.