Skip to content
ENالعربية

R032: Direction-sensitive shadow x-offsets without an RTL counterpart

A box-shadow or text-shadow offset sideways falls the same way in Arabic, so the light it implies can contradict a layout that has otherwise been mirrored.

The check

Id
R032
Category
Physical CSS
Default severity
low

When it fires

  1. lowlow confidence

    On a right-to-left page whose stylesheets carry no [dir=rtl] overrides at all, a visible element's box-shadow is offset 4px or more to one side, or its text-shadow 2px or more. One finding stands for every element sharing the same shadow.

    Fix: Mirror the x-offset for RTL or use symmetric values.

What it leaves alone

Any page whose stylesheets carry [dir=rtl] overrides anywhere, on the view that its author already has a mirroring strategy; shadows offset only up or down; and text-indent, which is logical and needs no mirroring.

Broken, then fixed

before.css
.card {
  box-shadow: 10px 6px 18px rgba(0, 0, 0, 0.1);
}
after.css
.card {
  box-shadow: 10px 6px 18px rgba(0, 0, 0, 0.1);
}
[dir="rtl"] .card {
  box-shadow: -10px 6px 18px rgba(0, 0, 0, 0.1);
}

Check it by hand

Select the element and run [getComputedStyle($0).boxShadow, getComputedStyle($0).textShadow] in the DevTools console. The first length after the colour is the sideways offset: rgba(0, 0, 0, 0.1) 10px 6px 18px 0px falls 10px to the right.

What the report shows you

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

problems
Each sideways offset found, with its size.
boxShadow
The element's computed box-shadow, to find the rule that sets it.

More physical CSS checks

Does your page trip R032?

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 freeBrowse the checks