إتقان الواجهة العربية RTL
من ضبط dir="rtl" إلى عكس الأيقونات واختيار الأرقام — دليل شامل للعربية في Lovable.
الأساس: dir والخطّ
في __root.tsx: <html lang="ar" dir="rtl">. الخطّ يجب أن يدعم العربية بامتياز: IBM Plex Sans Arabic أو Cairo أو Tajawal. حمّله عبر <link> في head()، لا عبر @import في CSS.
المسافات: ms/me بدل ml/mr
استخدم start/end بدل left/right: ms-4 بدل ml-4، pe-3 بدل pr-3، start-0 بدل left-0. Tailwind يترجمها تلقائيًا حسب اتّجاه الصفحة.
الأيقونات الاتجاهية
السهم الذي يعني «تقدّم» يجب أن يكون ArrowLeft في العربية (لأن التقدّم لليسار). أيقونات القوائم المنسدلة، أزرار الرجوع، مؤشّرات الترتيب — كلّها تحتاج مراجعة.
الأرقام: متى عربية ومتى إنجليزية؟
استخدم الأرقام العربية-الشرقية (١٢٣) في مواضع الهوية: التواريخ في المقالات، الأسعار في المتاجر. أبقِ الأرقام الإنجليزية (123) في inputs، مؤقّتات، عدّادات فنّية، وإحصاءات لوحة التحكم.
اختبار حقيقي
افتح كل صفحة على 375px موبايل. تصفّح بلوحة المفاتيح فقط (Tab). تحقّق أنّ الجداول لا تتقطّع، والقوائم المنسدلة تفتح في الاتجاه الصحيح، والأيقونات تشير للاتجاه المتوقّع.
- تدقيق RTL شاملمراجعة كل الواجهات لدعم العربية بشكل صحيح.
- تثبيت خطّ IBM Plex Sans Arabicتحميل الخطّ عبر <link> وربطه في @theme.
- أرقام عربية-شرقية أنيقةاستخدام الأرقام ١٢٣ حيث تناسب الهوية.
هل كان هذا المحتوى مفيداً؟
استلم أحدث الأدلّة والبرومبتات كل أسبوع
خلاصة عربية أسبوعية عن Lovable وVibe Coding — بلا سبام، إلغاء متى شئت.