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:

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); }

/* Older approach: only matches an explicit dir attribute on/above the element */
[dir="rtl"] .chevron { transform: scaleX(-1); }

: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.

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">

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 <span dir="ltr"> or unicode-bidi: isolate rather than trusting the default bidi resolution.

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 <span dir="ltr"> (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).

Hebrew dates need the calendar extension. Intl.DateTimeFormat('he-IL') resolves to the Gregorian calendar (resolvedOptions().calendar === 'gregory'), so a Hebrew locale alone will not give you a Hebrew date. Request the calendar through the -u-ca- Unicode extension: Intl.DateTimeFormat('he-IL-u-ca-hebrew') formats 20 September 2026 as 9 בתשרי 5787. Use it for holiday, yahrzeit, and dual-date displays, and keep the Gregorian format for anything users file with an authority.

Form inputs need `dir="auto"`. Put dir="auto" on every <input> and <textarea> so each value resolves its own base direction. This is the most visible end-user RTL bug: an email or an English word typed into a Hebrew form jumps to the wrong side without it. Note that the placeholder does not trigger auto-detection, so set the resting direction with CSS if the empty-field look matters.

`<bdi>` vs `<bdo>`: use <bdo dir="ltr"> only when you want to force a direction (it overrides the bidi algorithm). For user-generated or unknown-direction content, prefer <bdi>, which isolates the content so its direction is auto-detected and cannot leak into the surrounding text:

<!-- User name could be Hebrew or Latin; bdi isolates it either way -->
<p>שלום, <bdi>{{ userName }}</bdi>, ברוך הבא</p>

For free-text fields, dir="auto" (or unicode-bidi: plaintext in CSS) lets the browser pick the base direction per value, which is the correct default for comments, names, and search queries where you do not know the language in advance.

Shadows and gradients do not auto-flip. CSS logical properties mirror layout, but box-shadow, text-shadow, and linear-gradient offsets/angles are physical and stay fixed when direction flips. A shadow offset of 4px 4px that looks correct in LTR will point the "wrong" way relative to an RTL layout. The same physical-not-logical trap applies to transform-origin, background-position, and translateX-based keyframe animations (slide-in drawers, carousels, progress shimmer). Flip each explicitly with a :dir(rtl) (or [dir="rtl"]) override when its direction is meaningful.

Step 4: Mirror Directional Icons

Icon mirroring is one of the highest-frequency RTL bugs. The rule: mirror icons whose meaning is tied to reading direction, leave everything else alone.

Mirror these (their direction encodes "forward/back/next/previous" relative to reading order):

• Navigation arrows, back/forward buttons, breadcrumb chevrons
• "Send" / submit arrows, carousel and pagination arrows
• Indentation, list-nesting, and reply arrows
• Progress indicators that imply forward motion

Do NOT mirror these (mirroring makes them wrong or unrecognizable):

• Logos and brand marks
• Checkmarks and X / close icons
• Media play buttons (a play button always points right, it refers to the timeline, not reading direction)
• Clocks and analog-time icons (clockwise is universal)
• Icons depicting real-world objects with a fixed orientation (a phone handset, a magnifying glass with the handle, most product icons)

Technique, mirror with a horizontal flip transform:

/* Flip only when the document direction is RTL */
.icon-directional:dir(rtl) { transform: scaleX(-1); }

<!-- Tailwind: rtl: variant for the cases logical properties cannot cover -->
<button class="rtl:-scale-x-100">
  <ArrowLeftIcon />
</button>

Many icon sets (for example Material Symbols) already ship RTL-aware variants, prefer those over flipping when available, because a flipped icon can mis-render fine detail or embedded text.

Step 5: 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 */
}

Hebrew has no letter case. The widely used modern scripts with case are Latin, Greek, Armenian, and Cyrillic, Hebrew is not among them, so text-transform: uppercase / capitalize and font-variant: small-caps are no-ops on Hebrew letters. They are not no-ops on the Latin words embedded in the same element: a shared design-system button or heading that uppercases its label leaves the Hebrew untouched while shouting "GMAIL" or "PDF" beside it. Remove case transforms from the RTL theme rather than assuming they do nothing.