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 adressiert Internationalisierung mit Rechts-nach-links-Sprachen (RTL) wie Arabisch oder Hebräisch. Sie gibt vor, worauf beim Schreiben von UI-Code zu achten ist, damit Layouts, Icons und Texte auch in RTL-Kontexten korrekt funktionieren — etwa logische statt physische CSS-Eigenschaften, gespiegelte Icons oder korrekte Textausrichtung. Relevant für alle, die mehrsprachige Anwendungen mit RTL-Unterstützung bauen und nicht bei jedem Prompt erneut erklären wollen, worauf zu achten ist. Da RTL-Fehler oft erst spät auffallen (Layout sieht in LTR gut aus, bricht aber in RTL), hilft die Regel, solche Probleme direkt beim Generieren des Codes zu vermeiden statt sie später zu reparieren.

## Praxis-Tipp

In .cursor/rules/ ablegen, dann z. B. prompten: „Baue die Navigationsleiste RTL-fähig“ — Cursor nutzt automatisch logische CSS-Properties statt links/rechts-Fixierung.

## Siehe auch

- [Angular TypeScript](/ki-verzeichnis/ide-tools/angular-typescript/)
- [Android Jetpack Compose](/ki-verzeichnis/ide-tools/android-jetpack-compose/)
- [Angular Novo Elements](/ki-verzeichnis/ide-tools/angular-novo-elements/)

## Lizenz & Quelle

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

Lade …