مرحباً Welcome to the article about RTL design
``` ## Flexbox & Grid Auto-Flip Flexbox and CSS Grid automatically respect the writing mode. Items reorder when `dir="rtl"` is set. ```css .header { display: flex; justify-content: space-between; } /* auto-flips */ .layout { display: grid; grid-template-columns: 220px 1fr; } /* auto-flips */ ``` **Gotcha**: `flex-direction: row-reverse` also reverses in RTL, causing a double-flip back to LTR order. Never use `row-reverse` to "fix" RTL layout -- flexbox handles direction automatically. **Gotcha**: explicit `order` values in flexbox do NOT auto-flip. Handle manually for RTL. ## The `:dir()` Pseudo-Class Use `:dir(rtl)` for direction-based styling. Unlike `[dir="rtl"]`, it matches elements that inherit direction from ancestors. ```css .element:dir(rtl) { /* RTL styles */ } .element:dir(ltr) { /* LTR styles */ } ``` Browser support: Firefox, Chrome, Safari 16.4+, Edge. ## Bidirectional Isolation: `` and `` - `` isolates user-generated content whose direction is unknown (prevents corrupting surrounding text) - `` forces LTR for phone numbers, credit cards, code that must stay LTR ```htmlWelcome back, Ahmed! Your score: ۳۵۰
+1 (555) 123-4567 4111-1111-1111-1111 ``` ## Tailwind `rtl:` Variant Use `rtl:` for directional icons and components that need explicit flipping: ```htmlconsole.log("hello");
```
## Bidirectional Icons
**Flip** (they indicate direction): arrows, breadcrumb separators, send icon, undo/redo, sort indicators.
**Don't flip** (universal/symmetrical): play/pause/stop, search, menu, close, plus, checkmark, home, settings, download/upload.
```css
[dir="rtl"] .icon-arrow-right {
transform: scaleX(-1);
}
```
## Arabic Typography Pitfalls
See `references/arabic-typography.md` for the full guide. Critical rules:
1. **Letter-spacing: MUST be zero** on Arabic text -- letters connect, spacing breaks them
2. **Use solid colors** for Arabic text -- `rgba()` and `opacity` cause rendering artifacts between connected letters
3. **Underlines overlap Arabic dots** -- use `text-decoration-skip-ink: auto` or `box-shadow` underlines
4. **Line height** -- Arabic needs 1.6-1.8 vs Latin 1.4-1.5 (diacritics get cut off otherwise)
5. **Word-break: never `break-all`** on Arabic -- connected letters can't break mid-word
6. **No abbreviations** in Arabic -- letters must stay connected, "Sat" for "Saturday" doesn't work
7. **Provide min-width** on buttons -- Arabic translations are often shorter or longer than English
## Component RTL Patterns
See `references/component-patterns.md` for detailed examples covering:
- Button icons (icon position flips)
- Form inputs (email/URL stay LTR, name/address RTL)
- Breadcrumbs (separator auto-flips)
- Tables, tabs, cards, toasts, blockquotes, toggle switches
- Page headers (logo and actions swap)
## Search Input with Icon
```css
.c-input--search {
background-image: url("data:image/svg+xml,...");
background-position: right 6px center;
padding-inline-end: 32px;
}
```
## Floats: Avoid Them
Floats do NOT auto-flip. If you must use them:
```css
.media__photo {
float: left;
margin-right: 16px;
}
[dir="rtl"] .media__photo {
float: right;
margin-right: 0;
margin-left: 16px;
}
```
Better: use flexbox instead.
## Transform Animations in RTL
`translateX()` does NOT auto-flip. Use `scaleX(-1)` for arrow icons:
```css
.c-link:hover svg {
transform: translateX(6px);
}
[dir="rtl"] .c-link svg {
transform: scaleX(-1);
}
[dir="rtl"] .c-link:hover svg {
transform: scaleX(-1) translateX(6px);
}
```
## CSS Naming Conventions
Use `start`/`end` in class names, not `left`/`right`:
```css
/* Bad */
.c-header__left {
}
.c-header__right {
}
/* Good */
.c-header__start {
}
.c-header__end {
}
```
## React / Next.js RTL Setup
```tsx
```
CSS-in-JS (styled-components, Emotion) requires a Stylis plugin for RTL. MUI provides `@mui/stylis-plugin-rtl`:
```tsx
import rtlPlugin from "stylis-plugin-rtl";
import { CacheProvider } from "@emotion/react";
import createCache from "@emotion/cache";
const cacheRtl = createCache({ key: "muirtl", stylisPlugins: [rtlPlugin] });
```
## Testing RTL
1. Toggle `dir="rtl"` on `` in browser DevTools
2. Test every component in both LTR and RTL
3. Check for: text overflow, alignment, icon orientation, scrollbar position, truncation direction
4. Test with actual Arabic content -- not just mirrored Lorem Ipsum
## Companion: ESLint Plugin
For automated linting of physical direction properties, use [eslint-plugin-tailwind-rtl](https://github.com/AmmarCodes/eslint-plugin-tailwind-rtl). It catches RTL bugs in CI and code review that slip past generation:
```bash
npm install --save-dev eslint-plugin-tailwind-rtl
```
## References
- [RTL Styling 101 by Ahmad Shadeed](https://rtlstyling.com/posts/rtl-styling/)
- [CSS Logical Properties (MDN)](https://developer.mozilla.org/en-US/CSS/CSS_logical_properties_and_values)
- [`:dir()` pseudo-class (MDN)](https://developer.mozilla.org/en-US/CSS/:dir)
- [`` element (MDN)](https://developer.mozilla.org/en-US/Web/HTML/Element/bdi)
- [Tailwind CSS RTL Support](https://tailwindcss.com/docs/hover-focus-and-other-states#rtl-support)
- [Tailwind Logical Properties](https://tailwindcss.com/docs/margin#logical-properties)
---
> Source: [AmmarCodes/dotfiles](https://github.com/AmmarCodes/dotfiles) — distributed by [TomeVault](https://tomevault.io).