Hebrew Rtl Best Practices
A solid reference for building Hebrew web UIs the right way. Covers the full stack: CSS logical properties instead of left/right, the :dir() pseudo-class, bidi text handling with isolate and bdo, and which icons to mirror (arrows yes, play buttons no). The typography section recommends Heebo/Assistant and explains why Hebrew needs larger font sizes and word spacing but never letter spacing. Includes real Tailwind examples with the ms-4/me-4 utilities and Next.js setup with google fonts. The bidi guidance is especially practical, it calls out common bugs like phone numbers flipping and when to use bdi versus bdo. If you're tired of guessing which CSS properties break in RTL or manually flipping every icon, this consolidates the patterns that actually work.
- install copies · 90 days. Times the install command was copied on this site in the last 90 days, bots filtered.
- 5
- skills.sh installs
- 746
- GitHub stars
- 26
- last updated
- Aug 21, 2026
Install
$ npx -y skills add skills-il/localization --skill hebrew-rtl-best-practices --agent claude-codeInstalls into .claude/skills of the current project.
Files
Hebrew RTL Best Practices
Instructions
Step 1: Set Up Document Direction
Always start with the HTML attribute (not just CSS):
<html lang="he" dir="rtl">
This tells browsers, screen readers, and CSS to use RTL as the base direction.
Step 2: Use CSS Logical Properties
NEVER use physical directional properties for layout:
| Physical (avoid) | Logical (use) |
|---|---|
margin-left | margin-inline-start |
margin-right | margin-inline-end |
padding-left | padding-inline-start |
padding-right | padding-inline-end |
border-left | border-inline-start |
text-align: left | text-align: start |
text-align: right | text-align: end |
float: left | float: inline-start |
left: 10px | inset-inline-start: 10px |
This ensures the layout automatically mirrors in RTL mode.
When you genuinely need a direction-specific rule that logical properties cannot express, prefer the :dir() pseudo-class over [dir="rtl"] attribute selectors:
/* Modern: matches the resolved direction, including dir="auto" and inheritance */
.chevron:dir(rtl) { transform: scaleX(-1); }
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/skills-il/localization
- Categories
- Frontend Development, DevOps & CI/CD, Mobile Development, Design & UI/UX
- First seen
- Jun 3, 2026
Recommended
More Frontend Development
react18-lifecycle-patternsgithub/awesome-copilotProvides exact before/after migration patterns for the three unsafe class component lifecycle methods - componentWillMount, componentWillReceiveProps, and compo745skills.sh installsreact18-string-refsgithub/awesome-copilotProvides exact migration patterns for React string refs (ref="name" + this.refs.name) to React.createRef() in class components. Use this skill whenever migratin743skills.sh installs
agent-elements21st-dev/agent-elementsUse whenever the user wants to build or modify a chat, agent, or tool-calling UI in a React 19 + Tailwind v4 project — especially if the code imports from `@/co733skills.sh installs
vuetify0vuetifyjs/0Use when building Vue 3 UI that needs headless logic — selection state (single, multi, grouped, nested, stepped), form validation, registries, context providers730skills.sh installs
review-logging-patternshugorcd/evlogReview code for logging patterns and suggest evlog adoption. Optionally use @evlog/cli (`evlog init` to wire evlog, `evlog agents` to write the conventions into728skills.sh installs
stripemindrally/skillsStripe payment integration guidelines for TypeScript, React, Next.js with secure payment processing and subscription management728skills.sh installs