Skip to content
ENالعربية

R055: Latin display styling (uppercase + tracking) applied to Arabic

Arabic has no letter case, so a text-transform on Arabic text has no effect on its letters and signals a selector styled for Latin headings that nobody reviewed for the Arabic side.

The check

Id
R055
Category
Typography
Default severity
low

When it fires

  1. low

    Visible text with at least 3 Arabic letters has a text-transform other than none, such as uppercase or capitalize. Arabic has no case, so the transform changes nothing and marks a selector styled for Latin display type that nobody reviewed for Arabic.

    Fix: Define an Arabic-specific display style for this element.

What it leaves alone

Text with fewer than 3 Arabic letters. The tracking often paired with a transform is R051's finding; this one is only about the transform. Up to four per page.

Broken, then fixed

before.css
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
after.css
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
:lang(ar) .eyebrow {
  text-transform: none;
  letter-spacing: 0;
}

Check it by hand

Select the text and run getComputedStyle($0).textTransform in the DevTools console. Anything but none on Arabic is the finding.

What the report shows you

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

textTransform
The computed text-transform.
letterSpacingPx
The computed tracking, in pixels.
trackingAlsoReportedByR051
Whether the element also carries tracking, which R051 reports separately. The two findings are about different things.

More typography checks

Does your page trip R055?

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