Rtl Right To Left I18n

Cursor-Regel für RTL/i18n: UI-Code funktioniert von Anfang an auch in Rechts-nach-links-Sprachen.

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

Die Regel

---
description: "Cursor rules for RTL development with logical CSS properties, Tailwind logical classes, bidirectional text, and automated auditing via rtlify-ai."
globs: **/*
alwaysApply: false
---
# 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:
```html
<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

## So nutzt du sie

Die Regel kopieren (Button oben) oder als Datei herunterladen und im Projekt unter `.cursor/rules/` ablegen — Cursor lädt sie beim nächsten Start automatisch. Ältere Cursor-Versionen lesen alternativ eine einzelne `.cursorrules`-Datei im Projektstamm; dort einfach den Regel-Text ohne den Kopfblock zwischen den `---`-Zeilen einfügen.

Der Regel-Text ist englisch — Cursor versteht ihn unabhängig von der Sprache, in der Sie mit dem Editor chatten.


## Im Detail

Diese Cursor-Regel sorgt dafür, dass UI-Code von Anfang an auch für Rechts-nach-links-Sprachen wie Arabisch oder Hebräisch funktioniert. Sie schreibt CSS-Logical-Properties statt physischer Richtungsangaben vor (z. B. margin-inline-start statt margin-left), verlangt gespiegelte Icons und Layouts sowie i18n-taugliche Textkomponenten. Lohnt sich für Projekte, die internationale Zielgruppen bedienen oder RTL-Support nachrüsten müssen, weil sie verhindert, dass später jede Komponente einzeln umgebaut werden muss. Im Gegensatz zu nachträglichen RTL-Patches spart die Regel Aufwand, weil KI-generierter Code direkt richtungsunabhängig geschrieben wird.

## Praxis-Tipp

Lassen Sie Cursor Komponenten von Anfang an mit dieser Regel generieren, statt RTL-Support erst nachträglich mit dir/ltr-Overrides zu flicken.

## Lizenz & Quelle

- **Lizenz:** CC0 1.0
- **Quelle:** [PatrickJS/awesome-cursorrules (GitHub)](https://github.com/PatrickJS/awesome-cursorrules)

Lade …