R020: Forced-LTR container, or a bidi override, over Arabic content

Under a dir="ltr" or direction: ltr box, mostly Arabic text starts at the wrong edge with punctuation out of order, and a bidi-override can mirror its letters or reverse embedded numbers.

The check

Id: R020
Category: Direction and bidi
Default severity: high

When it fires

high
On a right-to-left page, an element carries dir="ltr" and the text that inherits its direction is mostly Arabic, at least 20 Arabic letters. That Arabic starts at the wrong edge, and its punctuation lands on the wrong side.
Fix: Remove dir="ltr" so the container inherits the page's RTL direction (or use dir="auto" for mixed user content).
highmedium confidence
The same, but the direction comes from CSS: the element renders direction: ltr inside a right-to-left parent, with no dir attribute saying so.
Fix: Remove the direction: ltr override in CSS for this container.
critical
An element sets unicode-bidi: bidi-override or isolate-override with direction: ltr over at least 10 Arabic letters. The bidi algorithm is switched off, so the Arabic renders mirrored, letter by letter, not merely left-aligned.
Fix: Remove the unicode-bidi override. To isolate a run of unknown language use unicode-bidi: isolate with dir="auto", which keeps the bidi algorithm ON inside the isolated run - the override variants are for rendering text deliberately backwards and almost never what a layout wants.
high
The same override inside a right-to-left element holding at least 10 Latin letters. The Arabic is fine; the Latin runs and the numbers around them, the brand names, prices and addresses a reader needs to copy, render reversed.
Fix: Remove the unicode-bidi override. To isolate a run of unknown language use unicode-bidi: isolate with dir="auto", which keeps the bidi algorithm ON inside the isolated run - the override variants are for rendering text deliberately backwards and almost never what a layout wants.

What it leaves alone

Left-to-right pages, which are R001's finding; dir="auto"; code blocks; form controls, which R023 and R072 check; a left-to-right container under a non-Arabic lang; and the descendants of the element that set the direction, which are counted once through it. Text that switches back to right-to-left inside it, like the slides of a left-to-right carousel track, does not count.

Broken, then fixed

before.html

<div class="card" dir="ltr">
  <p>أدر مشاريعك ومهامك بسهولة من لوحة تحكم واحدة.</p>
</div>

after.html

<div class="card">
  <p>أدر مشاريعك ومهامك بسهولة من لوحة تحكم واحدة.</p>
</div>

Check it by hand

Select the suspect element in the Elements panel and run [getComputedStyle($0).direction, getComputedStyle($0).unicodeBidi, $0.closest('[dir]')?.dir] in the DevTools console. Over Arabic text you want rtl, and a unicode-bidi of normal, embed or isolate. ltr, or any value ending in -override, is the finding.

What the report shows you

Each R020 finding carries the fields below that apply to it, so you can see why it fired without rerunning the scan.

dirAttr: Left-to-right container: its dir attribute as written, or nothing when the direction comes from CSS.
subtreeArabicChars: The Arabic letters under the element. For a left-to-right container, only the text that inherits its direction.
subtreeLatinChars: The Latin letters, counted the same way.
unicodeBidi: Override: the unicode-bidi value that switched the algorithm off.
direction: Override: the element's computed direction, which decides which half of the text reverses.

Components that pass it by construction

These Ritla UI components satisfy R020 by how they are built. Used as documented, they do not bring this defect onto your page.

Does your page trip R020?

Paste a URL. Ritla renders the page on desktop, tablet and mobile, runs every check, and shows the top issues with screenshot evidence.

Scan a page free Browse the checks