Hebrew Rtl Best Practices

Name: Hebrew Rtl Best Practices
Author: skills-il

Community63/100

by @skills-il

Implement right-to-left (RTL) layouts for Hebrew web and mobile applications. Use when user asks about RTL layout, Hebrew text direction, bidirectional (bidi) text, Hebrew CSS, "right to left", or needs to build Hebrew UI. Covers CSS logical properties, Tailwind RTL, React/Vue RTL, Hebrew typography, and font selection. Do NOT use for Arabic RTL (similar but different typography) unless user explicitly asks for shared RTL patterns.

0.0 (0 reviews)0 installs22 viewsLocalization

npx skills-il add skills-il/localization --skill hebrew-rtl-best-practices

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.

Step 3: Handle Bidirectional Text

When mixing Hebrew and English/numbers:

/* Isolate embedded LTR content */
.ltr-content {
  unicode-bidi: isolate;
  direction: ltr;
}

/* For inline elements with mixed content */
.bidi-override {
  unicode-bidi: bidi-override;
}

Common bidi issues:

Phone numbers appearing reversed: Wrap in <bdo dir="ltr">
Punctuation at wrong end of sentence: Use unicode-bidi: isolate
URLs/emails in Hebrew text: Wrap in <span dir="ltr">

Step 4: Hebrew Typography

Recommended font stack:

font-family: 'Heebo', 'Assistant', 'Rubik', 'Noto Sans Hebrew', sans-serif;

Typography settings:

body[dir="rtl"] {
  font-size: 16px; /* Hebrew needs slightly larger than Latin */
  line-height: 1.7;
  letter-spacing: normal; /* NEVER add letter-spacing for Hebrew */
  word-spacing: 0.05em; /* Slight word spacing improves readability */
}

Step 5: Framework-Specific Setup

Tailwind CSS RTL:

// tailwind.config.js
module.exports = {
  // Tailwind v3.1+ has built-in RTL support
  // Use rtl: and ltr: variants
}

<div class="ltr:ml-4 rtl:mr-4">
  <!-- Or better: use logical utilities if available -->
</div>

React with MUI:

import { createTheme, ThemeProvider } from '@mui/material/styles';
import { CacheProvider } from '@emotion/react';
import createCache from '@emotion/cache';
import rtlPlugin from 'stylis-plugin-rtl';
import { prefixer } from 'stylis';

const cacheRtl = createCache({
  key: 'muirtl',
  stylisPlugins: [prefixer, rtlPlugin],
});

const theme = createTheme({ direction: 'rtl' });

Next.js: Add dir="rtl" to root layout and configure font loading for Hebrew fonts.

Step 6: Common Pitfalls to Check

Icons with directional meaning (arrows, back buttons) -- mirror them
Progress bars -- should fill from right to left
Sliders/carousels -- swipe direction should reverse
Form labels -- should be right-aligned
Breadcrumbs -- separator direction should reverse
Tables -- header alignment and cell alignment
Charts -- x-axis may need to reverse for Hebrew readers

Examples

Example 1: Convert LTR Component to RTL

User says: "Make this card component work in Hebrew" Result: Replace all physical CSS properties with logical equivalents, add dir="rtl", adjust font stack.

Example 2: Bidi Text Issue

User says: "Numbers are showing backwards in my Hebrew text" Result: Wrap numeric content in a span with dir="ltr" and unicode-bidi: isolate.

Bundled Resources

References

references/css-logical-properties.md — Complete physical-to-logical CSS property mapping table (margin, padding, border, positioning, text alignment, sizing) plus Hebrew font stack recommendations for sans-serif, serif, and monospace. Consult when converting any LTR stylesheet to RTL-compatible logical properties or choosing Hebrew web fonts.

Troubleshooting

Error: "Text alignment looks wrong"

Cause: Using text-align: left instead of text-align: start Solution: Replace all left/right in text-align with start/end.

Error: "Layout not mirroring"

Cause: Using physical margin/padding instead of logical properties Solution: Replace all margin-left/margin-right with margin-inline-start/margin-inline-end.

Metadata

Author:skills-il

GitHub:hebrew-rtl-best-practices

installs:0

reviews:0 (0.0)

Created:July 20, 2025

Updated:February 25, 2026

Supported Agents

Claude CodeCursorGitHub CopilotWindsurfOpenCodeCodex

Security Analysis

63/100

Trust Score

Code Quality46

Permissions40

Data Handling100

Publisher Reputation20

Maintenance100

Documentation100

Pending reviewv12/25/2026

Checks Performed

Snyk scan

Skill spec validation

Tool permission scope analysis

Content pattern scanning

GitHub repository verification

Code quality assessment

Maintenance activity check

License verification

View on GitHub Report an issue

Related Skills

Shabbat Aware Scheduler

by @skills-il

Community66/100

Schedule meetings, deployments, and events respecting Shabbat, Israeli holidays (chagim), and Hebrew calendar constraints. Use when user asks to schedule around Shabbat, "zmanim", check Israeli holidays, plan around chagim, set Israeli business hours, or needs Hebrew calendar-aware scheduling logic. Includes halachic times (zmanim) via HebCal API, full Israeli holiday calendar, and Israeli business hour conventions. Do NOT use for religious halachic rulings (consult a rabbi) or diaspora 2-day holiday scheduling.

0.0035

Claude CodeCursorGitHub Copilot+3

Hebrew Content Writer

by @skills-il

Community62/100

Write and edit professional content in Hebrew including marketing copy, UX text, articles, emails, and social media posts. Use when user asks to write in Hebrew, "ktov b'ivrit", create Hebrew marketing content, edit Hebrew text, write Hebrew UX copy, or optimize Hebrew content for SEO. Covers grammar rules, formal vs informal register, gendered language handling, and Hebrew SEO best practices. Do NOT use for Hebrew NLP/ML tasks (use hebrew-nlp-toolkit) or translation (use a translation skill).

0.0044

Claude CodeCursorGitHub Copilot+3

Hebrew Ocr Forms

by @skills-il

Community66/100

Process and extract data from scanned Israeli government forms using OCR. Supports Tabu (land registry), Tax Authority forms, Bituach Leumi documents, and other official Israeli paperwork. Use when user asks to OCR Hebrew documents, extract data from Israeli forms, "lesarek tofes", parse Tabu extract, read scanned tax form, or process Israeli government documents. Includes Hebrew OCR configuration, field extraction patterns, and RTL text handling. Do NOT use for handwritten Hebrew recognition (requires specialized models) or non-Israeli form processing.

0.0047

Claude CodeCursorGitHub Copilot+3

Reviews (0)

No reviews yet. Be the first to write one!

Hebrew Rtl Best Practices

Community63/100

by @skills-il

0.0 (0 reviews)0 installs22 viewsLocalization

npx skills-il add skills-il/localization --skill hebrew-rtl-best-practices

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.

Step 3: Handle Bidirectional Text

When mixing Hebrew and English/numbers:

/* Isolate embedded LTR content */
.ltr-content {
  unicode-bidi: isolate;
  direction: ltr;
}

/* For inline elements with mixed content */
.bidi-override {
  unicode-bidi: bidi-override;
}

Common bidi issues:

Phone numbers appearing reversed: Wrap in <bdo dir="ltr">
Punctuation at wrong end of sentence: Use unicode-bidi: isolate
URLs/emails in Hebrew text: Wrap in <span dir="ltr">

Step 4: Hebrew Typography

Recommended font stack:

font-family: 'Heebo', 'Assistant', 'Rubik', 'Noto Sans Hebrew', sans-serif;

Typography settings:

body[dir="rtl"] {
  font-size: 16px; /* Hebrew needs slightly larger than Latin */
  line-height: 1.7;
  letter-spacing: normal; /* NEVER add letter-spacing for Hebrew */
  word-spacing: 0.05em; /* Slight word spacing improves readability */
}

Step 5: Framework-Specific Setup

Tailwind CSS RTL:

// tailwind.config.js
module.exports = {
  // Tailwind v3.1+ has built-in RTL support
  // Use rtl: and ltr: variants
}

<div class="ltr:ml-4 rtl:mr-4">
  <!-- Or better: use logical utilities if available -->
</div>

React with MUI:

import { createTheme, ThemeProvider } from '@mui/material/styles';
import { CacheProvider } from '@emotion/react';
import createCache from '@emotion/cache';
import rtlPlugin from 'stylis-plugin-rtl';
import { prefixer } from 'stylis';

const cacheRtl = createCache({
  key: 'muirtl',
  stylisPlugins: [prefixer, rtlPlugin],
});

const theme = createTheme({ direction: 'rtl' });

Next.js: Add dir="rtl" to root layout and configure font loading for Hebrew fonts.

Step 6: Common Pitfalls to Check

Icons with directional meaning (arrows, back buttons) -- mirror them
Progress bars -- should fill from right to left
Sliders/carousels -- swipe direction should reverse
Form labels -- should be right-aligned
Breadcrumbs -- separator direction should reverse
Tables -- header alignment and cell alignment
Charts -- x-axis may need to reverse for Hebrew readers

Examples

Example 1: Convert LTR Component to RTL

User says: "Make this card component work in Hebrew" Result: Replace all physical CSS properties with logical equivalents, add dir="rtl", adjust font stack.

Example 2: Bidi Text Issue

User says: "Numbers are showing backwards in my Hebrew text" Result: Wrap numeric content in a span with dir="ltr" and unicode-bidi: isolate.

Bundled Resources

References

references/css-logical-properties.md — Complete physical-to-logical CSS property mapping table (margin, padding, border, positioning, text alignment, sizing) plus Hebrew font stack recommendations for sans-serif, serif, and monospace. Consult when converting any LTR stylesheet to RTL-compatible logical properties or choosing Hebrew web fonts.

Troubleshooting

Error: "Text alignment looks wrong"

Cause: Using text-align: left instead of text-align: start Solution: Replace all left/right in text-align with start/end.

Error: "Layout not mirroring"

Cause: Using physical margin/padding instead of logical properties Solution: Replace all margin-left/margin-right with margin-inline-start/margin-inline-end.

Metadata

Author:skills-il

GitHub:hebrew-rtl-best-practices

installs:0

reviews:0 (0.0)

Created:July 20, 2025

Updated:February 25, 2026

Supported Agents

Claude CodeCursorGitHub CopilotWindsurfOpenCodeCodex

Security Analysis

63/100

Trust Score

Code Quality46

Permissions40

Data Handling100

Publisher Reputation20

Maintenance100

Documentation100

Pending reviewv12/25/2026

Checks Performed

Snyk scan

Skill spec validation

Tool permission scope analysis

Content pattern scanning

GitHub repository verification

Code quality assessment

Maintenance activity check

License verification

View on GitHub Report an issue

Related Skills

Shabbat Aware Scheduler

by @skills-il

Community66/100

0.0035

Claude CodeCursorGitHub Copilot+3

Hebrew Content Writer

by @skills-il

Community62/100

0.0044

Claude CodeCursorGitHub Copilot+3

Hebrew Ocr Forms

by @skills-il

Community66/100

0.0047

Claude CodeCursorGitHub Copilot+3

Reviews (0)

No reviews yet. Be the first to write one!