Other .mdc

Rtl Right To Left I18n

Cursor rules for RTL development with logical CSS properties, Tailwind logical classes, bidirectional text, and automated auditing via rtlify-ai.

How to use
  1. Copy the rule content.
  2. In your project root, create .cursorrules or .cursor/rules/rtl-right-to-left-i18n.mdc
  3. Paste the content and save.

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

Similar rules

More in Other →