R043: Fixed-pixel-width container whose Arabic text exceeds the space

Traces clipped text back to a hard-coded pixel width, inline or in a matching stylesheet rule, the usual result of sizing a box for English and filling it with longer Arabic.

The check

Id: R043
Category: Layout
Default severity: medium

When it fires

medium
Text is clipped exactly as R042 finds it, in an element whose width is a fixed pixel value, set in its inline style or in a stylesheet rule that matches it. It names the declaration to change, and R042's finding on the same element is dropped in its favour.
Fix: Replace width: its fixed pixel value with max-width or fit-content sizing on the rule or inline style that sets it.

What it leaves alone

Boxes under 8px, like visually hidden labels; text under 4 characters; and the image-replacement pattern, text pushed out on purpose with text-indent: -9999px or font-size: 0 so a background image stands in for it. Also widths in %, em, rem or viewport units, and widths from stylesheets that could not be read, such as one served from another origin. Up to eight per page.

Broken, then fixed

before.css

.plan-name {
  width: 140px;
  overflow: hidden;
}

after.css

.plan-name {
  inline-size: fit-content;
  max-inline-size: 100%;
}

Check it by hand

Select the clipped element and run [$0.style.width, getComputedStyle($0).width] in the DevTools console: a value in the first slot is an inline width. Otherwise find width in the Computed pane and expand it to see the rule that sets it.

What the report shows you

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

widthValue: The fixed width, as written.
widthSource: Where it is set: inline style, or the selector of the stylesheet rule.
scrollWidth: How wide the text is, in pixels.
clientWidth: How wide the box is, in pixels.
sample: The text, cut to 120 characters.

Components that pass it by construction

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

Does your page trip R043?

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