Bidi isolation

A boundary that keeps an embedded Arabic, Hebrew, English, URL, or username run from rearranging the punctuation and text around it.

stop an Arabic name moving the punctuationkeep mixed direction text containedEnglish text scrambles an RTL sentencethe question mark jumped to the wrong enda username broke the rest of the sentencehow to safely put a URL inside Hebrew textdirection boundary for embedded textbidi isolatebidi isolaton

What it is

Bidi isolation puts a boundary around one run of text so its direction cannot reorder the surrounding sentence. It matters when an Arabic or Hebrew message contains an English product name, URL, file path, or user-supplied value. In HTML, the bdi element provides that boundary; CSS offers unicode-bidi: isolate, and Unicode provides FSI and PDI control characters for plain text.

Use isolation around every interpolated value whose direction is unknown or may differ from the sentence. Pair bdi with dir='auto' when the browser should determine the value's direction from its contents. UAX #9 then resolves the characters inside without letting their strong or neutral characters pull punctuation across the boundary.

Gotcha: setting direction: rtl or adding a bare LRM or RLM does not create an isolation boundary. Those older fixes can repair one sample while breaking the next value. Test both an Arabic name inside an English sentence and an English path inside an Arabic sentence, with parentheses and trailing punctuation visible. The tell is a stray question mark or closing bracket that has slid to the far end of the line, which is why the bdi element exists at all.

Ask AI for it

Wrap every interpolated user name, title, search term, URL, and file path in an HTML <bdi dir='auto'> element. Where markup is unavailable but CSS applies, use unicode-bidi: isolate and set the correct base direction on the parent. For plain text output, surround the value with Unicode FSI and PDI controls. Remove ad hoc LRM and RLM fixes, then add fixtures for Arabic inside English and English inside Arabic with parentheses, slashes, numbers, and trailing punctuation.

You might have meant

bidirectional textright to left layoutrtl layout mirroringlogical propertiescharacter encoding

Go deeper