Hebrew/RTL and internationalization for OurTable. Use when working on: 'hebrew', 'RTL', 'i18n', 'translation', 'language', 'locale', 'right-to-left', 'bidirectional', 'direction', 'text'.
Hebrew/English bilingual support with full RTL layout.
src/lib/i18n.tsen (English, LTR) and he (Hebrew, RTL)import { useTranslation } from 'react-i18next'
function Component() {
const { t } = useTranslation()
return <h1>{t('home.title')}</h1>
}
food.recipes.title, household.chores.addt('items.count', { count: 5 })t('items', { count }) with _one, _other variantsThe dir attribute is set on <html> based on current language.
// Use logical properties instead of physical:
// ✅ Good: ms-2 (margin-inline-start), me-2 (margin-inline-end)
// ❌ Bad: ml-2, mr-2 (won't flip in RTL)
// Tailwind logical utilities:
// ps-*, pe-* (padding inline start/end)
// ms-*, me-* (margin inline start/end)
// start-*, end-* (inset inline start/end)
// text-start, text-end (text alignment)
rtl:rotate-180flex-row auto-reverses with dir="rtl" — this is usually correctstart-0/end-0 instead of left-0/right-0border-s/border-e instead of border-l/border-r// Israeli locale formatting
const date = new Date()
date.toLocaleDateString('he-IL') // "11.4.2026"
date.toLocaleDateString('en-US') // "4/11/2026"
// Numbers
(1234.5).toLocaleString('he-IL') // "1,234.5"
When implementing UI: