bdi and bdo

Most text on the web runs left to right, but Arabic, Hebrew, and a few other languages run right to left. Put one of those strings next to English and the browser direction logic can pull punctuation and ordering around. The bdi tag isolates a piece of text so its direction cannot leak into the rest of the sentence.

The bdo tag is the heavier tool. It forces a direction onto text that would otherwise follow the page direction, using dir="rtl" or dir="ltr". You reach for it when you know exactly which way a phrase must run, no matter what surrounds it.

Why they exist: user-generated content breaks layouts. A username in Arabic, a quote in Hebrew, an app that shows two languages side by side: without isolation the whole line can scramble. Both tags work in every browser and add nothing visually.

The classic example

User names are the classic bdi use case. A name like أحمد written next to English text can pull the whole line around without bdi. Wrapping each name in bdi keeps the layout stable no matter what language the user types in. This is why social sites wrap displayed names in bdi.

<p>Players: <bdi>Ahmed</bdi>, <bdi>أحمد</bdi>, <bdi>Anna</bdi></p>

When to use bdo

Bdo is rare and used for precise overrides, like forcing a phone number to stay left to right inside an Arabic page. A common mistake is using bdo when bdi would do: bdo overrides everything, including punctuation order, while bdi just isolates. If you are not sure you need bdo, you probably do not.

<bdo dir="rtl">This text runs right to left.</bdo>

Syntax

<bdi>User name</bdi>

Welcome, <bdi>أحمد</bdi>! [Logout] // not <bdo dir="rtl">