rtl-rendering-tester
Build-an-X workflow for verifying RTL (right-to-left) layouts - runs the test suite under Arabic / Hebrew / Persian / Urdu locales, asserts the `dir="rtl"` attribute is set, verifies layout mirrors correctly (text alignment, icon positions, scrollbar location), uses logical CSS properties (`start`/`end` over `left`/`right`) per W3C guidance, captures per-locale screenshots for visual review. Use when the app supports RTL languages.
Install with skills.sh (any agent)
npx skills add testland/qa --skill rtl-rendering-testerrtl-rendering-tester
Overview
Per w3-rtl (opens in new window), dir="rtl" on the <html> tag is the standard signal for right-to-left direction: blocks align right, bidi text flows right-to-left, table columns progress right-to-left, and form inputs start at the right. This skill verifies the app handles those under Arabic, Hebrew, Persian, and Urdu.
When to use
Step 1 - Verify dir attribute presence
import { test, expect } from '@playwright/test';
test.use({ extraHTTPHeaders: { 'Accept-Language': 'ar' } });
test('Arabic locale sets dir=rtl on <html>', async ({ page }) => {
await page.goto('/');
const dir = await page.locator('html').getAttribute('dir');
expect(dir).toBe('rtl');
});
test('Hebrew locale sets dir=rtl on <html>', async ({ page }) => {
await page.goto('/?lng=he');
await expect(page.locator('html')).toHaveAttribute('dir', 'rtl');
});Per w3-rtl (opens in new window): the html-level dir is the canonical signal; CSS-only direction setting is incorrect:
"Do not use CSS to apply base direction in HTML pages. Direction is semantic content and should reside in markup, not styling."
Step 2 - Verify text alignment
test('text aligns right in RTL', async ({ page }) => {
await page.goto('/?lng=ar');
const heading = page.locator('h1').first();
const align = await heading.evaluate(el => getComputedStyle(el).textAlign);
expect(['right', 'start']).toContain(align); // 'start' resolves to right in RTL
});Per w3-rtl (opens in new window): prefer logical properties (start, end) over directional (left, right) so the layout flips automatically.
Step 3 - Verify icon positions
Directional icons (back/forward and pagination arrows, direction chevrons) must mirror in RTL; brand logos and icons with embedded text must not.
test('back arrow mirrors in RTL', async ({ page }) => {
await page.goto('/cart?lng=ar');
const backArrow = page.getByRole('link', { name: /back/i });
const transform = await backArrow.evaluate(el => getComputedStyle(el).transform);
// RTL should apply scaleX(-1) (or use a different mirrored asset)
expect(transform).toContain('-1');
});Step 4 - Bidi text in mixed contexts
Mixed LTR + RTL content is a common bidi issue:
"My order #ORD-12345 has shipped."In Arabic locale, the order number "ORD-12345" must remain LTR inside the RTL paragraph. Without proper bidi markers, the ordering can flip.
test('order number preserves LTR direction inside RTL paragraph', async ({ page }) => {
await page.goto('/orders/ORD-12345?lng=ar');
const paragraph = page.locator('p').filter({ hasText: 'ORD-12345' });
const orderNumber = paragraph.locator('bdi, [dir="ltr"]');
await expect(orderNumber).toBeVisible();
await expect(orderNumber).toHaveText('ORD-12345');
});The <bdi> element or dir="ltr" on a span isolates LTR text within an RTL block - without it, browser bidi heuristics may flip.
Step 5 - Form input behavior
Per w3-rtl (opens in new window): in RTL, "Form inputs start at the right by default."
test('form inputs start at right in RTL', async ({ page }) => {
await page.goto('/checkout?lng=he');
const emailField = page.getByLabel(/email/i);
await emailField.click();
// Cursor / placeholder text should be at the right edge
// (assert via screenshot or computed-style direction)
await expect(emailField).toHaveCSS('text-align', /(right|start)/);
});Step 6 - Supplementary checks
Three checks that extend the core assertions above: references/rtl-checks.md covers per-locale visual regression (screenshots per RTL locale to catch un-mirrored padding, icons, sidebars, and field order), CI integration across desktop and mobile profiles, and dirname form-submission direction.
Anti-patterns
| Anti-pattern | Why it fails | Fix |
|---|---|---|
| CSS-only direction | Per w3-rtl (opens in new window): "Do not use CSS to apply base direction." | dir="rtl" on the html tag (Step 1). |
Hardcoded left / right in CSS | Doesn't mirror in RTL. | Logical properties (start / end) per w3-rtl (opens in new window). |
| Mirroring brand logos / icons with embedded text | Brand recognition + readability suffer. | Per-asset decision; not all icons mirror. |
Order numbers / IDs without <bdi> / dir="ltr" isolation | Bidi heuristics may flip; "ORD-12345" becomes "12345-ORD". | Wrap in <bdi> (Step 4). |
| Skipping per-locale visual regression | Regressions visible only when RTL activated. | Per-locale screenshots (Step 6). |
Limitations
References
Supplementary RTL checks
View source (opens in new window)Supplementary RTL checks
Extends the core direction assertions in SKILL.md (dir attribute, text alignment, icon mirroring, bidi isolation, form input start).
Per-locale visual regression
test('home page Arabic snapshot', async ({ page }) => {
await page.goto('/?lng=ar');
await expect(page).toHaveScreenshot('home-ar.png');
});
test('home page Hebrew snapshot', async ({ page }) => {
await page.goto('/?lng=he');
await expect(page).toHaveScreenshot('home-he.png');
});RTL screenshots catch regressions like:
CI integration
- name: RTL rendering tests
run: npx playwright test e2e/rtl/ --project=mobile-iphone-15 --project=desktop-chromium
- uses: actions/upload-artifact@v4
if: failure()
with:
name: rtl-screenshots
path: test-results/Run on both desktop and mobile profiles - RTL handling can differ per breakpoint.
dirname for form submission
Per w3-rtl (opens in new window): "Use dir='auto' to automatically detect text direction from the first strongly-typed character. Pair with the dirname attribute to send information about direction to the server in addition to the usual form data."
Verify forms submitted from RTL contexts include the direction information when needed:
test('comment form sends direction with submission', async ({ page }) => {
await page.goto('/post/123?lng=ar');
await page.getByLabel(/comment/i).fill('مرحبا - hello');
// Listen for the form submission
const responsePromise = page.waitForResponse('/api/comments');
await page.getByRole('button', { name: /submit/i }).click();
const response = await responsePromise;
// The form's `dirname` attribute should send a separate field with the direction
expect(response.request().postData()).toContain('comment.dir=rtl');
});Related skills
i18n-string-coverage
Build-an-X workflow that scans source code for untranslated strings - finds hardcoded user-facing text not wrapped in the i18n function (`t()`, `i18n.t`, `gettext`, `__()`, etc.), maps gaps to the team's translation file, reports per-language coverage (en: 100%; fr: 87%; es: 60%), gates per-PR for new untranslated strings. Use when the product ships in multiple locales and the team needs continuous coverage tracking.
locale-format-validator
Build-an-X workflow that verifies locale-specific format rendering - dates (US `5/4/2026` vs ISO `2026-05-04` vs DE `04.05.2026` vs JP `2026/05/04`), numbers (US `1,234.56` vs DE `1.234,56` vs FR `1 234,56`), currencies (US `$1,234.56` vs JP `¥1,235` vs DE `1.234,56 €`), times, durations. Use when the product displays locale-sensitive data and the team needs assurance the formatting matches per-locale conventions.
pseudo-localization-runner
Configures pseudo-localization for the app (replaces translatable strings with accented variants like "Submit" → "Şüƀɱîţ" + 35% length expansion) - surfaces UI issues without needing actual translators: hardcoded strings, truncation, encoding, and bidi handling. Use when preparing an app for translation (i18n / internationalization), validating l10n infrastructure, or when the user mentions pseudo-localization or localization testing.