Bidirectional text (bidi)
What happens when English words, numbers, or URLs sit inside Arabic or Hebrew text and the browser decides which way each run should go.
See it
What it is
One string can hold runs going both ways: an Arabic sentence with an English product name in it, a Hebrew paragraph quoting a URL, a username dropped into a translated message. Unicode's Bidirectional Algorithm (UAX #9) sorts this out using the characters themselves plus a base direction for the paragraph. It gets the letters right on its own. The trouble is everything that is not a letter. Spaces, most punctuation, parentheses, and slashes are neutral: no direction of their own, so they attach to whatever sits nearby. Digits are not neutral, they carry a weak direction and reorder by their own rules, which is why a number next to Arabic text moves in ways a neutral character would not.
The classic symptom is a trailing question mark or a user-supplied name teleporting to the far end of the sentence, or a file path rendering as 'txt.report' inside an RTL line. The fix is isolation, not escaping: wrap each foreign-direction run in a bdi element, or apply unicode-bidi: isolate, or use the Unicode FSI and PDI control characters. Anywhere you interpolate user-generated text into a sentence, isolate it.
Gotcha: this bites left-to-right products too. Put an Arabic display name into an English comment thread with no isolation and the surrounding punctuation reorders itself. Also, the older tools (unicode-bidi: embed, bare RLM and LRM marks) are weaker than isolation and leak across boundaries. Reach for bdi first.
Ask AI for it
Fix mixed-direction text in this component. Wrap every interpolated user-generated or foreign-language value (names, titles, file paths, URLs, search terms) in a <bdi> element or apply unicode-bidi: isolate, so it cannot reorder the sentence around it. Set dir='auto' on inputs and any field that may hold either direction. Do not strip or escape directional characters. Then render test rows: an Arabic name inside an English sentence and an English brand name inside an Arabic sentence, both with trailing punctuation, shown in an ltr page and an rtl page.