# 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

```text
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

```bash
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

```bash
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

```bash
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

```bash
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/pst_St2cvXqtgZHWK605_PJqJQ