hebrew-rtl-best-practices

Set dir="rtl" on the html element and replace physical properties with logical ones: margin-left becomes margin-inline-start, padding-right becomes padding-inline-end, and text-align: left becomes text-align: start. The layout then mirrors automatically.

Wrap phone numbers, URLs, and emails in <span dir="ltr"> or <bdo dir="ltr"> so they keep left-to-right order inside RTL text. Alternatively apply unicode-bidi: isolate with direction: ltr on the containing element.

Yes. Since Tailwind v3.3, logical utilities like ms-4, pe-3, and inset-s-0 mirror automatically based on the dir attribute. Use the rtl: variant only for cases logical properties cannot cover, such as flipping directional icons with rtl:-scale-x-100.

Mirror icons tied to reading direction: navigation arrows, back/forward buttons, breadcrumb chevrons, and send arrows. Do not mirror logos, checkmarks, media play buttons, clocks, or icons depicting real-world objects with fixed orientation.

Portalled components mount at document.body and many libraries assume LTR. Set dir on the html element and also pass the library's direction setting: direction: 'rtl' in the MUI theme with @mui/stylis-plugin-rtl, or DirectionProvider for Radix.

The Skill targets Hebrew web applications specifically. Arabic RTL shares patterns but has different typography, and native mobile RTL (React Native I18nManager, SwiftUI, Android) is explicitly out of scope.