Skip to content
ENالعربية

R022: text-align: left explicitly set on majority-Arabic text

Arabic is read from the right, so a block held to the left edge gives each line a ragged starting point and pulls the text away from where the reader's eye begins.

The check

Id
R022
Category
Direction and bidi
Default severity
high

When it fires

  1. high

    Visible text that is mostly Arabic, at least 10 Arabic letters, computes to text-align: left. A browser computes an unset alignment as start, so left is always something an author wrote.

    Fix: Replace text-align: left with text-align: start.

What it leaves alone

Text that is mostly Latin, and every other alignment: start, end, center, justify and right.

Broken, then fixed

before.css
.card p {
  text-align: left;
}
after.css
.card p {
  text-align: start;
}

Check it by hand

Select the text in the Elements panel and run getComputedStyle($0).textAlign in the DevTools console. left on Arabic text is the finding, and the Styles pane shows which rule wrote it.

What the report shows you

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

sample
The text, cut to 120 characters.
cssSelectors
The selectors of the rules that set text-align: left on it, when the stylesheet could be read.

Components that pass it by construction

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

More direction and bidi checks

Does your page trip R022?

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