R051: letter-spacing applied to Arabic text (breaks the connected script)

Arabic letters join along a baseline, so positive tracking breaks the joins and negative tracking overlaps the letterforms, typically from a Latin type scale never scoped away from Arabic.

The check

Id: R051
Category: Typography
Default severity: high

When it fires

high
Visible text with at least 3 Arabic letters has a negative letter-spacing of a pixel or more. The letters of a connected script are already joined, so pulling them together overlaps the letterforms and the word smears.
Fix: Set letter-spacing: 0 for Arabic runs. A negative value tuned for a Latin display face has no equivalent in Arabic - the letters are already joined.
high
The same with a positive letter-spacing: spacing the letters apart breaks the joins, and the text reads as broken type.
Fix: Set letter-spacing: 0 for Arabic runs (e.g. a :lang(ar) reset).

What it leaves alone

Tracking under a pixel, which rounds to zero, and text with fewer than 3 Arabic letters. Up to eight per page.

Broken, then fixed

before.css

h1 {
  letter-spacing: -0.02em;
}

after.css

h1 {
  letter-spacing: -0.02em;
}
:lang(ar) h1 {
  letter-spacing: 0;
}

Check it by hand

Select the text and run getComputedStyle($0).letterSpacing in the DevTools console. Anything other than normal or 0px on Arabic is the finding.

What the report shows you

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

letterSpacingPx: The computed tracking, in pixels.
direction: tightened or loosened.
sample: The text, cut to 80 characters.

Components that pass it by construction

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

Does your page trip R051?

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