Urdu mixed into left-to-right contexts often renders with its words or punctuation in the wrong visual order — numbers end up on the wrong side, punctuation migrates, and multi-word phrases reverse. The root cause is the Unicode Bidirectional Algorithm (UBA) making incorrect assumptions about “neutral” characters like spaces, digits, and punctuation when they appear between RTL and LTR runs. This tool inserts the explicit Unicode control characters that give the algorithm the right direction signal, without any visible change to the rendered text.
The Unicode Bidirectional Algorithm and why it goes wrong
The UBA assigns each character a direction category. Urdu letters are “strong RTL.” English letters are “strong LTR.” Spaces, digits, and most punctuation are “neutral” or “weak.” The algorithm resolves neutrals by looking at the surrounding strong characters, but in a mixed-direction paragraph the surrounding context can pull a neutral character the wrong way.
For example, the sentence Report: نتیجہ 42 approved contains a neutral digit and punctuation. Without bidi controls, the number 42 may visually attach to the Urdu run (appearing as 24 in display order) or the colon may jump to the wrong side. These bugs are invisible to authors working in a single-direction environment and invisible to automated tests that check only the stored characters — but they are immediately obvious and embarrassing to Urdu-fluent readers.
The three bidi control methods
The tool wraps each RTL run with one of three Unicode mechanisms:
Isolate (RLI … PDI): U+2067 … U+2069 Recommended for new content
Embed (RLE … PDF): U+202B … U+202C Legacy; still widely supported
Mark (RLM): U+200F Lightweight; nudges neutrals only
Isolate (RLI — Right-to-Left Isolate / PDI — Pop Directional Isolate) treats the wrapped run as a self-contained directional unit. Content inside the isolate does not affect the direction of surrounding text, and surrounding text does not bleed into the isolate. This is the modern, recommended mechanism defined in Unicode 6.3 and supported in all major browsers and rendering engines.
Embed (RLE — Right-to-Left Embedding / PDF — Pop Directional Formatting) is the older mechanism from the original bidi specification. It works in most contexts but has a known failure mode: multiple nested embeds can interact and affect text direction beyond their intended scope. Use it only when targeting legacy systems that pre-date isolate support.
Mark (RLM — Right-to-Left Mark) is the lightest intervention: a single invisible RTL character placed before or around a neutral to nudge it into the correct direction. It is appropriate when a platform strips the heavier pair controls or when only a single neutral character (a digit, a parenthesis) is misbehaving.
When to use this tool
- HTML content editors that do not set
dir="rtl"on Urdu-containing elements — adding the isolates fixes the visual rendering without touching the HTML structure - JSON and database strings where Urdu is stored alongside LTR metadata fields
- Chat and messaging platforms that render Urdu correctly in a standalone message but incorrectly when the message contains an English word, product name, number, or URL
- Code comments and string literals containing inline Urdu documentation in an otherwise LTR codebase
Worked example
Mixed input: The book کتاب is on the میز table.
Without controls, the Urdu words may render in the wrong visual position depending on the paragraph’s base direction. With RLI/PDI isolates inserted around each Urdu run:
کتابis treated as a right-to-left island; its letters render correctly right-to-left while the surrounding English stays left-to-rightمیزreceives the same treatment independently
The stored text gains a handful of invisible code points; the rendered text looks exactly right to a Urdu reader. The tool’s visualization panel shows the inserted controls as labelled brackets so you can confirm what was added and where.
Practical tips
- Prefer the isolate method for any new content — it is the current standard and avoids the bleed-through failures of the older embed mechanism.
- Use mark only when the target platform is known to strip U+2067/U+2069, such as some SMS gateways or legacy CMS systems.
- Always test on a device where Urdu text displays correctly by default — the bugs are invisible in developer tools but immediately visible in a real rendering context.
- If an entire document or interface is in Urdu, setting
dir="rtl"on the root element is a better solution than wrapping every run with controls.