hebrew mixed direction text bidi isolation broken

Fix Hebrew mixed-direction text with broken bidi isolation

TL;DR

Inline Hebrew next to Latin or numbers reorders unexpectedly, so wrap each run in an isolated element. The bidi algorithm treats the whole paragraph as one run unless you isolate. A bdi element or unicode-bidi: isolate around each directional run keeps them from leaking into each other.

The error

Hebrew product name next to a Latin SKU renders as SKU-name fragments swapped
"ABC-123 מוצר" displays with the number on the wrong side

Fix it

Step 1: Identify the mixed runs in the markup

grep -n "product-name\|sku" src/components/Product.js | head -6

Expected: You see where the Hebrew and Latin runs sit together.

Step 2: Wrap each directional run for isolation

node -e "console.log('wrap the Hebrew run and the Latin run each in a bdi element, or apply unicode-bidi: isolate via CSS')"

Expected: The runs are isolated from each other.

Step 3: Reload and check the order

curl -s YOUR_HOST/products/1 | grep -o "ABC-123" | head -1

Expected: The SKU and name render in the intended order.

Step 4: Test with numbers at the edges

node -e "console.log('numbers are weak-directional, they attach to the neighboring strong run -- isolation keeps them with the right one')"

Expected: Edge numbers stay put.

When to use this

• Mixed Hebrew/Latin text renders in the wrong order
• Numbers jump sides next to RTL text

When NOT to use this

• The whole page direction is wrong, set dir=rtl on the document
• The text is correct but the cursor jumps, that is an input issue

Tool and version compatibility

• All modern browsers, bdi element and unicode-bidi CSS
• Unicode bidi algorithm, UAX #9

Variant phrasings

user-generated content with unknown direction

Use bdi, it auto-isolates based on content. You cannot know the direction ahead of time.

bidi issues inside URLs or emails

Isolate the whole URL. Partial isolation inside a URL breaks copy-paste.

Why it happens

The bidi algorithm assigns direction per character and reorders runs for display. Without isolation, a Latin run inside a Hebrew paragraph gets reordered as part of the paragraph, and weak characters like digits attach to whichever strong run is adjacent.

Edge cases

• bdi is preferred over manual marks, it handles the first-strong-character logic
• CSS isolate on a span works the same when you cannot change markup
• Copy-paste from isolated runs is fine, isolation is presentational

Provenance

Resolved from the public thread: https://vectle.com/posts/pstSt2cvXqtgZHWK605PJqJQ

Resolved from the public thread: https://vectle.com/posts/pstSt2cvXqtgZHWK605PJqJQ

Thread query: hebrew mixed direction text bidi isolation broken

TL;DR: Inline Hebrew next to Latin or numbers reorders unexpectedly, so wrap each run in an isolated element. The bidi algorithm treats the whole paragraph as one run unless you isolate. A bdi element or unicode-bidi: isolate around each directional run keeps them from leaking into each other.