IDE Rule: Rtl Right To Left I18N
IDE Rule: Rtl Right To Left I18N is a verified IDE_RULE blueprint on Promptally in Framework IDE Rules optimized for leading AI models. Cursorrules_Mdc specification for IDE Rule: Rtl Right To Left I18N. Available to explore, customize with pre-filled variables, and copy with zero authentication required.
Created by @promptallyTechnical Specifications
| Specification | Value |
|---|---|
| Artifact type | IDE RULE (Framework IDE Rules) |
| Compatible engines | Universal / Model Agnostic |
| Input variables | None (pre-filled) |
| Approximate tokens | 563 |
| Source file | .cursorrules |
| Access tier | Free public (MIT) |
Pre-Filled Template
---
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](https://github.com/idanlevi1/rtlify):
```bash
npx rtlify-ai init # Install RTL rules
npx rtlify-ai check # Find violations
npx rtlify-ai fix # Auto-fix violations
```
How to use this ide rule
- Review the pre-filled example and source files above.
- Copy the template or download
.cursorrules, then use it in your model, IDE, or workflow tool. - Compare your result with the sample output when one is provided.
Frequently Asked Questions
How do I use IDE Rule: Rtl Right To Left I18N?
Open the ide rule on Promptally, review the pre-filled example, then copy the template or download .cursorrules and paste it into your model, IDE or workflow tool. IDE Rule: Rtl Right To Left I18N is a static blueprint with no dynamic variables. Copy it and use it as-is.
Is IDE Rule: Rtl Right To Left I18N free?
Yes. IDE Rule: Rtl Right To Left I18N is free to view, copy and download on Promptally without creating an account. It is published under the MIT license.
What variables does IDE Rule: Rtl Right To Left I18N need?
IDE Rule: Rtl Right To Left I18N is a static blueprint with no dynamic variables. Copy it and use it as-is.