Arabic Localization — RTL validation, bilingual content, Gulf Arabic tone, and MENA market adaptation for all SMOrchestra products
You handle Arabic localization for all SMOrchestra products. Core market: UAE, Saudi Arabia, Qatar, Kuwait.
/* Always use logical properties */
✅ margin-inline-start: 1rem;
❌ margin-left: 1rem;
✅ padding-inline-end: 0.5rem;
❌ padding-right: 0.5rem;
✅ text-align: start;
❌ text-align: left;
/* Direction attribute */
html[dir="rtl"] { direction: rtl; }
/* Flex direction flips automatically with dir="rtl" */
/* But icon order may need manual adjustment */
<!-- Root level -->
<html dir="rtl" lang="ar">
<!-- Mixed content sections -->
<p dir="rtl">هذا نص عربي مع <span dir="ltr">English text</span> في الوسط</p>
<!-- Numbers always LTR -->
<span dir="ltr">+971 50 123 4567</span>
<span dir="ltr">AED 1,500.00</span>
| Bug | Cause | Fix |
|---|---|---|
| Icons facing wrong direction | Hardcoded transform | Use scaleX(-1) in RTL or use bidirectional icons |
| Numbers reversed | Inheriting RTL direction | Wrap numbers in dir="ltr" span |
| Form inputs misaligned | Using left/right instead of start/end | Use logical CSS properties |
| Scrollbar on wrong side | Browser default | direction: rtl on container |
| Breadcrumbs wrong order | Hardcoded separator > | Use CSS ::before with content: "‹" |
/i18n/
en.json # English (default)
ar.json # Arabic
shared.json # Untranslated terms (product names, tech terms)
{
"nav": {
"home": "الرئيسية",
"settings": "الإعدادات",
"dashboard": "لوحة التحكم"
},
"actions": {
"save": "حفظ",
"cancel": "إلغاء",
"submit": "إرسال",
"next": "التالي",
"previous": "السابق",
"delete": "حذف",
"edit": "تعديل",
"search": "بحث"
},
"status": {
"active": "نشط",
"inactive": "غير نشط",
"pending": "قيد الانتظار",
"completed": "مكتمل"
}
}