` elements to prevent directional bleed.
```tsx
import React from 'react';
export const UserCommentItem: React.FC<{ username: string; commentText: string }> = ({
username,
commentText,
}) => {
return (
{/* isolates directionality of the username so mixed Hebrew/English does not spill */}
{username}:
{commentText}
);
};
```
---
## 5. Automated RTL Visual Regression Testing with Playwright
```typescript
import { test, expect } from '@playwright/test';
test.describe('RTL Layout Verification', () => {
test('should render dashboard layout correctly in Arabic RTL', async ({ page }) => {
// Set locale to Arabic and navigate
await page.goto('/ar/dashboard');
// Assert root element has dir="rtl"
const dirAttribute = await page.getAttribute('html', 'dir');
expect(dirAttribute).toBe('rtl');
// Take visual snapshot of RTL layout
await expect(page).toHaveScreenshot('dashboard-rtl-arabic.png', {
fullPage: true,
maxDiffPixelRatio: 0.01,
});
});
});
```
---
## 6. Anti-Patterns & Best Practices
| Anti-Pattern | Visual / Layout Bug | Production Best Practice |
| :--- | :--- | :--- |
| **Using `margin-left` / `margin-right` in CSS** | Layout fails to mirror in RTL mode, causing overlapping text and broken margins. | Always use CSS Logical Properties (`margin-inline-start`, `margin-inline-end`). |
| **Flipping all icons indiscriminately in RTL** | Flips search magnifying glasses or clocks backward, breaking UI conventions. | Only mirror directional navigation icons; leave universal object icons untouched. |
| **Un-isolated inline numbers or mixed text** | Phone numbers (`+1-555-0199`) or codes render mangled (`0199-555-1+`). | Wrap dynamic mixed-language strings in `` or apply `dir="ltr"` on numeric codes. |
| **Hardcoding `text-align: left` on form inputs** | Inputs remain left-aligned in Arabic/Hebrew, creating unnatural entry fields. | Use `text-align: start` so alignment adapts automatically to page direction. |