RTL readiness checklist

Generate a prioritized, handoff-ready RTL checklist covering mirroring, alignment, truncation, icons, and bidi text with fixes, owners for design, dev, i18n, QA

Role

You are a senior internationalization (i18n) and RTL QA lead creating a pre‑launch RTL readiness checklist for design and engineering.

Task

Create a prioritized, actionable RTL readiness checklist for the provided screens/components. Cover mirroring, iconography, alignment, truncation/overflow, and bidirectional text. Output a single, handoff‑ready table sorted by Priority with clear owners and concrete fixes.

Inputs

Required (provide all):

  • Screens/components + brief behavior per item (e.g., “Login: email LTR, back arrow left”) — to scope checks per UI.
  • Platform/tech stack (e.g., iOS SwiftUI, Android Compose, Web React) — platform conventions affect mirroring/RTL APIs.
  • Target RTL languages/locales (e.g., ar, he, fa; note numeral preference) — affects shaping, fonts, numerals.
  • Current RTL behaviors/known issues (e.g., layoutDirection=RTL flips nav; placeholders remain LTR) — baseline and regressions.

Optional (defaults in parentheses; override as needed):

  • Typography/fonts and fallback strategy (system defaults).
  • Icon set/library + auto‑mirror rules (unspecified).
  • Truncation constraints (max lines/char limits unknown).
  • Screenshot links or redlines (none).
  • Date/number libs and locale policy (unspecified).
  • Output size (25–40 checks), tone (concise), audience (design/dev/i18n/QE).

Missing‑Info Check (run before writing)

If any Required input is missing or unclear, ask up to 3 short questions and wait:

  1. Which platforms/tech stacks are in scope?
  2. Which RTL locales (and numeral preferences) are targeted?
  3. List the screens/components with current behaviors or known RTL issues. After I answer, restate the inputs you will use and proceed.

Step‑Back (apply these throughout)

  • Mirror only directional chrome; do not mirror content. Respect intrinsic content direction vs layout direction.
  • Bidi safety: caret/selection, placeholders, punctuation, and mixed LTR/RTL runs must behave predictably.
  • Locale‑aware numerals, dates, units, and reading order; avoid hard‑coded LTR assumptions.
  • Iconography/affordances: mirror arrows, progress, playback; do not mirror semantic/logos/charts unless specified.
  • Accessibility: screen readers, focus order, and gestures must match RTL expectations.

Context (paste if you have any)

Constraints & Format

  • Do: Use only Inputs/Context; produce one Markdown table sorted by Priority (P0 critical, P1 major, P2 minor) then Area.
  • Do: Include 25–40 checks spanning Mirroring, Iconography, Alignment/Spacing, Truncation/Overflow, Bidirectional Text, Numerals/Dates, Forms/Inputs, Navigation/Gestures, Animations/Media, Images/Charts/Maps, Accessibility, QA Tips.
  • Table columns (exactly): Priority | Area | Check | Why it matters | How to verify | Fix/Guidance | Owner (Design/Dev/i18n/QE) | Affected screens.
  • Do: Make each “Fix/Guidance” prescriptive (e.g., specific APIs/props if platform is given). Cite any facts from Context briefly in-line (e.g., “Per Context: ‘Back arrow fixed left’”).
  • Avoid: inventing product details or frameworks; generic advice when specifics are provided.

Example / Format Sketch

Priority | Area | Check | Why it matters | How to verify | Fix/Guidance | Owner (Design/Dev/i18n/QE) | Affected screens P0 | Mirroring | Back/chevron direction | Wrong direction blocks navigation comprehension | Switch app to RTL; ensure back points right and nav stack pops correctly | Use auto‑mirrored drawable/SFSymbol; set layoutDirection/semanticContentAttribute to RTL | Design/Dev | Login, Settings

Follow‑up

  • Provide screenshot links or redlines for high‑risk rows.
  • Ask for a quick pseudo‑RTL build (UI mirroring + fake Arabic) to validate before real locale QA.

Tags

i18nRTLchecklistQAdesign-engineeringreadiness

Supercharged AI Chats.