{"slug":"skills-il-hebrew-rtl-best-practices","name":"hebrew-rtl-best-practices","description":"Implement right-to-left (RTL) layouts for Hebrew web applications. Use when user asks about RTL layout, Hebrew text direction, bidirectional (bidi) text, Hebrew CSS, \"right to left\", or needs to build a Hebrew web UI. Covers CSS logical properties, the :dir() pseudo-class, Tailwind RTL, React/Next.js RTL setup, icon mirroring, Hebrew typography, and font selection. Do NOT use for Arabic RTL (similar but different typography) unless user explicitly asks for shared RTL patterns, or for native mobile RTL (React Native I18nManager, SwiftUI, Android) which is out of scope.","long_description":"---\nname: hebrew-rtl-best-practices\ndescription: Implement right-to-left (RTL) layouts for Hebrew web applications. Use when user asks about RTL layout, Hebrew text direction, bidirectional (bidi) text, Hebrew CSS, \"right to left\", or needs to build a Hebrew web UI. Covers CSS logical properties, the :dir() pseudo-class, Tailwind RTL, React/Next.js RTL setup, icon mirroring, Hebrew typography, and font selection. Do NOT use for Arabic RTL (similar but different typography) unless user explicitly asks for shared RTL patterns, or for native mobile RTL (React Native I18nManager, SwiftUI, Android) which is out of scope.\nlicense: MIT\ncompatibility: Works with Claude Code, Claude.ai, Cursor. No network required.\n---\n\n# Hebrew RTL Best Practices\n\n## Instructions\n\n### Step 1: Set Up Document Direction\nAlways start with the HTML attribute (not just CSS):\n\n```html\n\n```\n\nThis tells browsers, screen readers, and CSS to use RTL as the base direction.\n\n### Step 2: Use CSS Logical Properties\nNEVER use physical directional properties for layout:\n\n| Physical (avoid) | Logical (use) |\n|-------------------|--------------|\n| `margin-left` | `margin-inline-start` |\n| `margin-right` | `margin-inline-end` |\n| `padding-left` | `padding-inline-start` |\n| `padding-right` | `padding-inline-end` |\n| `border-left` | `border-inline-start` |\n| `text-align: left` | `text-align: start` |\n| `text-align: right` | `text-align: end` |\n| `float: left` | `float: inline-start` |\n| `left: 10px` | `inset-inline-start: 10px` |\n\nThis ensures the layout automatically mirrors in RTL mode.\n\nWhen you genuinely need a direction-specific rule that logical properties cannot express, prefer the `:dir()` pseudo-class over `[dir=\"rtl\"]` attribute selectors:\n\n```css\n/* Modern: matches the resolved direction, including dir=\"auto\" and inheritance */\n.chevron:dir(rtl) { transform: scaleX(-1); }\n\n/* Older approach: only matches an explicit dir attribute on/above the element */\n[dir=\"rtl\"] .chevron { transform: scaleX(-1); }\n```\n\n`:dir()` is part of Selectors Level 4 and resolves the *computed* direction, so it also works for elements whose direction comes from `dir=\"auto\"` or from an ancestor, where an attribute selector would miss them. Browser support: Chrome and Edge shipped it in version 120 (late 2023), Firefox has supported it for years, and Safari added it in 16.4, so it is now Baseline (widely available). For older-browser support, keep an `[dir=\"rtl\"]` fallback rule or use a logical property instead. Check current support at https://caniuse.com/css-dir-pseudo.\n\n### Step 3: Handle Bidirectional Text\nWhen mixing Hebrew and English/numbers:\n\n```css\n/* Isolate embedded LTR content */\n.ltr-content {\n unicode-bidi: isolate;\n direction: ltr;\n}\n\n/* For inline elements with mixed content */\n.bidi-override {\n unicode-bidi: bidi-override;\n}\n```\n\nCommon bidi issues:\n- Phone numbers appearing reversed: Wrap in ``\n- Punctuation at wrong end of sentence: Use `unicode-bidi: isolate`\n- URLs/emails in Hebrew text: Wrap in ``\n\n**Numbers and dates:** Standalone numbers and DD/MM/YYYY dates inside Hebrew text usually render fine because digits are weak-LTR, but a number that is immediately followed by a sign, currency, or a second number can flip. When a value must keep a fixed visual order, isolate it with `` or `unicode-bidi: isolate` rather than trusting the default bidi resolution.\n\n**Format the value, then isolate it.** Bidi isolation only stops a *correct* string from flipping; it does not produce the right string. Use `Intl` to format, then isolate: `Intl.NumberFormat('he-IL', { style: 'currency', currency: 'ILS' })` for shekel amounts and `Intl.DateTimeFormat('he-IL')` for dates, and wrap the output in `` (or `unicode-bidi: isolate`) if it sits inline in Hebrew prose. Devs commonly conflate the two and apply bidi fixes to a formatting bug (or vice versa).\n\n**Form inputs need `dir=\"auto\"`.** Put `dir=\"auto\"` on every `` and `