Designers
ToolsDocsProAll the Possibles

All 141 tools / International and inclusive design

Find the left and right CSS that will break in Arabic or Hebrew, with the logical property to use instead

RTL readinessFreeFor developers and designers

25/day

free runs a day, no sign-in.

Before: what you give it

The example input, as typed in. You paste text, CSS, markup or notes.

<html lang="ar"><style>.nav{margin-left:16px;padding-right:8px;text-align:left;float:right}.card{border-top-left-radius:8px;left:12px;letter-spacing:0.05em}.slide{transform:translateX(24px)}p{margin:0 4px 0 12px;font-style:italic}</style><body><button class="icon-arrow-right" aria-label="Next"></button><svg class="icon-search"></svg><p>مرحبا بالعالم</p><span>+1 (555) 010-0100</span><input type="text" name="q"></body></html>

After: what comes back

The first lines of a real run on that input. Nothing here is edited by hand.

RTL READINESS
Physical left/right declarations: 7. RTL script in sample: Arabic 
Findings: 1 high, 3 medium, 4 low, 0 info

[HIGH] Direction: Arabic or Hebrew text present, but nothing sets dir="rtl"
  Punctuation and layout will render in LTR context.
  Fix: Set dir="rtl" on the container or html.

[MEDIUM] CSS Logical Properties (convention for RTL): 7 physical left/right declarations
  These stay on the same physical side when dir flips, so spacing, alignment and floats end up on the wrong side in Arabic or Hebrew.
  Seen in: .nav { margin-left: 16px } -> margin-inline-start | .nav { padding-right: 8px } -> padding-inline-end | .nav { text-align: left } -> start | .nav { float: right } -> inline-start or inline-end | .card { border-top-left-radius: 8px } -> border-start-start-radius | .card { left: 12px } -> inset-inline-start
  Fix: Use margin-inline-start/end, padding-inline, inset-inline-start, border-inline-*, text-align: start/end, float: inline-start/end.

[MEDIUM] Arabic shaping (convention): letter-spacing set on text that may be Arabic
... full output on the tool page

What you get

Counts of physical declarations, each with its logical replacement, plus direction and bidi findings

What it cannot do

Static review of pasted source; it does not render a mirrored layout or judge translations.

Who it is for

  • Developers
  • Designers

Free and Pro

Free25 runs a day per IP address, up to 100,000 characters a run.
ProNo daily limit, 300 requests a minute, up to 200,000 characters a run.

What each plan includes

Use it from your assistant

The tool is called check_rtl_readiness. Connect the server once, then ask for it by name or just describe the job. Install steps for each app.

claude mcp add --transport http designers https://designers.allthepossibles.com/mcp
curl -X POST https://designers.allthepossibles.com/api/rtl-readiness -H 'content-type: application/json' -d '{"source":"<html lang=\"ar\"><style>.nav{margin-left:16px;padding-right:8px;text-align:left;float:right}.card{border-top-left-radius:8px;left:12px;letter-spacing:0.05em}.slide{transform:translateX(24px)}p{margin:0 4px 0 12px;font-style:italic}</style><body><button class=\"icon-arrow-right\" aria-label=\"Next\"></button><svg class=\"icon-search\"></svg><p>مرحبا بالعالم</p><span>+1 (555) 010-0100</span><input type=\"text\" name=\"q\"></body></html>"}'

Try it here

The form starts with the same example input, so you can run it first and then swap in your own.

More in international and inclusive design

All international and inclusive design tools