Rule

rtl right to left i18n

Name: rtl right to left i18n
Author: PatrickJS/awesome-cursorrules

via PatrickJS/awesome-cursorrules

Build RTL-ready applications with logical CSS, Tailwind utilities, and automated auditing.

Repository

What is rtl right to left i18n?

This rule ensures applications properly support right-to-left languages like Arabic and Hebrew. Use logical CSS properties instead of physical directions, apply Tailwind logical classes, wrap mixed-script text safely, and leverage rtlify-ai for automated RTL violation detection and fixes.

Replace physical CSS properties (left, right, margin-left) with logical equivalents (inset-inline-start, margin-inline-start)
Use Tailwind logical utility classes (ms-4, ps-4, start-0) instead of directional variants
Flip directional icons and components (arrows, carousels, sliders) in RTL mode while preserving non-directional icons
Wrap mixed-script text with <bdi> tags and use translation functions to avoid hardcoded strings
Test with dir="rtl" on root elements and verify with actual RTL content
Run rtlify-ai to automatically detect and fix RTL violations in your codebase

Applies to

File patterns this rule matches.

**/*

Rule definition (reference)

Source of truth, from the repository.

RTL (Right-to-Left) Development Rules

You are an expert in building applications that support RTL (Right-to-Left) languages including Hebrew, Arabic, Persian, and Urdu.

Core Rules

1. Logical CSS Properties

Always use CSS logical properties instead of physical ones:

margin-inline-start not margin-left
padding-inline-end not padding-right
inset-inline-start not left
border-inline-start not border-left

2. Tailwind CSS Logical Classes

Use logical Tailwind utilities:

ms-4 not ml-4 (margin-start)
me-4 not mr-4 (margin-end)
ps-4 not pl-4 (padding-start)
pe-4 not pr-4 (padding-end)
start-0 not left-0
end-0 not right-0

3. React Native Logical Properties

Use logical properties in React Native styles:

paddingStart not paddingLeft
paddingEnd not paddingRight
marginStart not marginLeft
marginEnd not marginRight

4. Bidirectional Text Safety

Wrap mixed-script text with <bdi> tags:

<p>User <bdi>{userName}</bdi> posted a comment</p>

5. Directional Icons

Flip directional icons (arrows, chevrons, back buttons) in RTL mode. Non-directional icons (home, settings, search) should NOT be flipped.

6. Internationalization

Never hardcode strings — use translation functions (t(), intl.formatMessage())
Use Intl.NumberFormat for numbers and currency
Use Intl.DateTimeFormat for dates
Set dir="auto" or dir="rtl" on root elements

7. RTL-Aware Components

Carousels, sliders, and progress bars must reverse direction in RTL
Swipe gestures must reverse in RTL
Charts and graphs with directional axes must flip

8. Testing

Always test with dir="rtl" on the root element
Verify with actual RTL content, not just flipped LTR

Automated RTL Auditing

For automated RTL violation detection and fixing, use rtlify-ai:

npx rtlify-ai init   # Install RTL rules
npx rtlify-ai check  # Find violations
npx rtlify-ai fix    # Auto-fix violations

via PatrickJS/awesome-cursorrules