Skip to content
ENالعربية

R031: float: left/right on content elements in RTL context without override

A float written for a left-to-right layout keeps its physical side in Arabic, so an image meant to lead the text lands at the end of each line instead.

The check

Id
R031
Category
Physical CSS
Default severity
medium

When it fires

  1. mediummedium 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 floats a visible element left or right with no right-to-left override for its selector. In Arabic the float should mirror; as written, content wraps on the wrong side.

    Fix: Replace float: left or right with float: inline-start or inline-end (verify which edge was intended in LTR).

  2. mediumlow confidence

    The same float, with nothing on the page saying the sheet was written left-to-right first. It may be the side intended, so it reports at low confidence.

    Fix: Replace float: left or right with float: inline-start or inline-end (verify which edge was intended in LTR).

What it leaves alone

Left-to-right pages, floats with a [dir=rtl] counterpart, and boxes 2px or smaller, like the measurement probes scrollbar libraries add, which wrap nothing. Each element is reported once, however many rules float it.

Broken, then fixed

before.css
.post img {
  float: left;
}
after.css
.post img {
  float: inline-start;
}

Check it by hand

Select the element and run getComputedStyle($0).float in the DevTools console. left and right are physical; inline-start and inline-end follow the direction.

What the report shows you

Each R031 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 float.
float
left or right, as the rule sets it.
source
The stylesheet the rule came from.
affectedElements
Up to three visible elements the rule floats on this page.
ltrFirstEvidence
What says the sheet was written left-to-right first, or nothing when no signal was found.

More physical CSS checks

Does your page trip R031?

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