testland/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.
76
95%
Does it follow best practices?
Run evals on this skill
Adds up to 20 points to the overall score
View guide
Passed
No findings from the security scan
rtl-checks.mdreferences/
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:
- Text overflowing because RTL didn't auto-mirror padding.
- Icons not mirrored.
- Sidebar on the wrong side.
- Form fields in the wrong order.
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: "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');
});