R030: Direction-sensitive physical properties without an RTL override

Where the stylesheet shows signs of being written left-to-right first, margin-left, padding-right or left leave Arabic spacing and offsets on the wrong side; otherwise it is reported as a lower-confidence risk.

The check

Id: R030
Category: Physical CSS
Default severity: medium

When it fires

highmedium confidence
The stylesheet shows it was written left-to-right first: the page has an en or x-default hreflang, the sheet uses [dir=ltr] or [dir=rtl] selectors, or different selectors set the same value on opposite sides, such as margin-left on one and margin-right on another. On a right-to-left page, a rule sets margin-left, margin-right, padding-left, padding-right, left, right or a side border width with no right-to-left override for its selector, and an element it styles has more than 8px between its left and right margin or padding. The spacing visibly leans the wrong way.
Fix: Logical rewrite: each physical property replaced by its logical equivalent, such as margin-left: 12px → margin-inline-start: 12px.
mediummedium confidence
The same physical properties on a sheet written left-to-right first, without that visible asymmetry.
Fix: Logical rewrite: each physical property replaced by its logical equivalent, such as margin-left: 12px → margin-inline-start: 12px.
mediumlow confidence
The same physical properties, with nothing on the page saying the sheet was written left-to-right first. On an Arabic-only site that may be exactly the spacing intended, so this reports a risk at low confidence and never escalates, whatever the asymmetry.
Fix: Logical rewrite: each physical property replaced by its logical equivalent, such as margin-left: 12px → margin-inline-start: 12px.

What it leaves alone

Left-to-right pages, rules whose selector has a [dir=rtl] counterpart, and rules that match nothing visible on the page. Logical properties such as margin-inline-start are never reported.

Broken, then fixed

before.css

.card .icon {
  margin-left: 12px;
}

after.css

.card .icon {
  margin-inline-start: 12px;
}

Check it by hand

Run [...document.styleSheets].flatMap((s) => { try { return [...s.cssRules]; } catch { return []; } }).filter((r) => /(margin|padding)-(left|right)\s*:|border-(left|right)(-width)?\s*:|[;{]\s*(left|right)\s*:/.test(r.cssText)).map((r) => r.selectorText) in the DevTools console to list the rules that set a physical side. Stylesheets from another origin cannot be read this way; the Computed pane shows their values on a selected element.

What the report shows you

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

cssSelector: The selector of the rule that sets the physical properties.
source: The stylesheet the rule came from.
props: Each physical property the rule sets, with its value.
affectedElements: Up to three visible elements the rule styles on this page.
asymmetric: Whether one of them has more than 8px between its left and right margin or padding.
ltrFirstEvidence: What says the sheet was written left-to-right first, or nothing when no signal was found.

Does your page trip R030?

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