حل مشاكل الاتجاه العربي RTL في Lovable

لماذا يحدث هذا

حين تطلب من Lovable صفحة عربية، يترجم الوكيل النصوص بسرعة، لكن هيكل الصفحة يبقى على قالب إنجليزي. مشاريع Lovable تُبنى غالباً على React و Tailwind CSS مع Vite، والملف الذي يبدأ منه كل شيء هو index.html، وفيه عادةً <html lang="en"> بلا أي قيمة للاتجاه. المتصفح هنا لا يخمّن: ما دام dir غير محدد فالاتجاه من اليسار إلى اليمين، فتلتصق القائمة باليسار ويبدأ النص من الجهة الخطأ.

السبب الثاني أعمق، وهو سبب عودة المشكلة بعد أن تظن أنك أصلحتها. Tailwind فيه نوعان من الأصناف: فيزيائية مرتبطة باليسار واليمين مثل ml-4 و pr-6 و text-left و left-0 و rounded-l-lg، ومنطقية مرتبطة ببداية السطر ونهايته مثل ms-4 و pe-6 و text-start و start-0 و rounded-s-lg. الفيزيائية لا تتغير مهما غيّرت اتجاه الصفحة، والوكيل يكتبها بحكم العادة لأنها الأكثر انتشاراً في الأمثلة الإنجليزية.

فإذا اكتفيت بإضافة dir="rtl" ستلاحظ أن النص انقلب صحيحاً، لكن أشياء صغيرة بقيت معكوسة:

• سهم زر «التالي» يشير إلى اليمين، أي إلى الخلف في القراءة العربية.
• أيقونة البحث داخل الحقل تغطي أول حرف تكتبه، لأن المسافة الداخلية pl-10 محجوزة في اليسار.
• القائمة المنسدلة في رأس الصفحة تُفتح خارج حدود الشاشة على الجوال.
• الشريط الجانبي في لوحة التحكم يبقى يساراً، والمحتوى يبدأ من خلفه.
• المسافات بين الأزرار المتجاورة غير متساوية، لأن space-x-4 يضيف الهامش من جهة واحدة.

وأخيراً الخط: إن لم يُحدَّد خط عربي، يعرض المتصفح الحروف بخط النظام الاحتياطي، فتبدو الصفحة باهتة وتختلف من جهاز لآخر. هذه أربعة أسباب مستقلة، ولذلك لا يحلّها طلب واحد مثل «اجعل الموقع عربي». للأخطاء العامة في التصميم العربي خارج Lovable راجع أخطاء تصميم RTL الشائعة.

ولماذا لا تكفي متغيّرات rtl: وحدها؟ هذه المتغيّرات تعمل فقط حين يكون أحد العناصر الأعلى في الصفحة يحمل dir="rtl" فعلاً. فإن أضاف الوكيل أصنافاً مثل rtl:mr-4 ولم يضبط الاتجاه في index.html، فلن يحدث شيء، وستظن أن الأصناف لا تعمل. لذلك الترتيب مهم: الاتجاه أولاً، ثم الأصناف.

الحل خطوة بخطوة في Lovable

تقدر تطبّق الخطوات بطريقتين: أن تلصق البرومبت الموجود في آخر هذا القسم في محادثة Lovable ليطبّقها الوكيل، أو أن تعدّل الملفات بنفسك. تعديل الكود مباشرة متاح في الباقات المدفوعة، أما في الباقة المجانية فمحرّر الكود للقراءة فقط بحسب توثيق Lovable. ومن يربط مشروعه مع GitHub عبر المزامنة الثنائية يقدر يعدّل محلياً ويدفع التغييرات.

1. 1

   ثبّت اللغة والاتجاه في ملف index.html

   افتح index.html في جذر المشروع وعدّل وسم البداية. هذه الخطوة وحدها تقلب ترتيب النص والعناصر المرنة (flex) والشبكات (grid) تلقائياً.

   <!doctype html>
   <html lang="ar" dir="rtl">
     <head>
       <meta charset="UTF-8" />
       <title>محمصة الدرعية</title>

2. 2

   استبدل الأصناف الفيزيائية بالمنطقية

   أصناف Tailwind المنطقية مدعومة منذ الإصدار 3.3 دون أي إضافة، فلا تحتاج مكتبة RTL خاصة. ابحث في ملفات src عن الأصناف في الجدول أدناه واستبدلها. الصنف المنطقي يعمل صحيحاً في العربية والإنجليزية معاً.

   <!-- قبل -->
   <input class="pl-10 pr-3 text-left" />
   <span class="absolute left-3 top-2.5">...</span>
   
   <!-- بعد -->
   <input class="ps-10 pe-3 text-start" />
   <span class="absolute start-3 top-2.5">...</span>

3. 3

   عالج المسافات بين العناصر المتجاورة

   space-x-4 يضيف هامشاً يسارياً لكل عنصر بعد الأول، فيختل في العربية. الأفضل أن تضع مكانه gap-4 على الحاوية المرنة، وإن أبقيته فأضف معه rtl:space-x-reverse.

   <div class="flex items-center gap-4">
     <Button>احجز الآن</Button>
     <Button variant="outline">تواصل معنا</Button>
   </div>

4. 4

   اقلب الأيقونات الاتجاهية فقط

   الأسهم والأسهم المثلثة (chevron) وأيقونات «رجوع» و«إرسال» لها معنى اتجاهي، فتُقلب. أما أيقونات مثل البحث والسلة والجرس فتبقى كما هي. في Tailwind يكفي متغيّر rtl:، وإن أردت قاعدة عامة فأضف صنفاً في index.css.

   // في المكوّن
   <ChevronRight className="h-4 w-4 rtl:-scale-x-100" />
   
   /* أو قاعدة عامة في src/index.css */
   [dir="rtl"] .icon-dir {
     transform: scaleX(-1);
   }

5. 5

   أخبر مكوّنات الواجهة بالاتجاه

   إذا كان مشروعك يستخدم مكوّنات مبنية على Radix، مثل مكتبة shadcn/ui، فبعض القوائم والنوافذ الجانبية تحسب موضعها بنفسها. لفّ التطبيق بمزوّد الاتجاه، وغيّر خاصية side في النوافذ الجانبية لتُفتح من اليمين.

   import { DirectionProvider } from "@radix-ui/react-direction";
   
   export default function App() {
     return (
       <DirectionProvider dir="rtl">
         <Routes />
       </DirectionProvider>
     );
   }
   
   // النافذة الجانبية للجوال
   <SheetContent side="right">...</SheetContent>

6. 6

   حمّل خطاً عربياً واجعله الافتراضي

   أضف الخط في أول src/index.css ثم عرّفه في إعداد Tailwind ليصبح خط الجسم. اخترنا هنا IBM Plex Sans Arabic، وتجد مقارنة الخطوط في صفحة الخطوط العربية لمواقع الذكاء الاصطناعي.

   /* src/index.css */
   @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;700&display=swap");
   
   /* tailwind.config.ts */
   theme: {
     extend: {
       fontFamily: {
         sans: ["\"IBM Plex Sans Arabic\"", "system-ui", "sans-serif"],
       },
     },
   },

هذا البرومبت يجمع الخطوات السابقة في طلب واحد. الجملة الأخيرة فيه مهمة، لأنها تجعل الوكيل يلتزم بالقاعدة في المكوّنات التي سيكتبها لاحقاً، لا في الموجودة فقط:

بعد كل طلب كبير، تأكد أن الوكيل لم يُرجع الأصناف القديمة. إن كان مشروعك متزامناً مع GitHub فهذا الأمر يعرض لك كل سطر بقي فيه صنف فيزيائي:

grep -rnE "\b(ml|mr|pl|pr)-[0-9]|\b(text-left|text-right)\b|\b(left|right)-[0-9]" src/

ولا تطبّق كل شيء دفعة واحدة إن كان المشروع كبيراً. التجربة العملية أن تقسّم العمل إلى ثلاث رسائل منفصلة في محادثة Lovable، وتراجع المعاينة بعد كل رسالة. فإن ظهر خلل عرفت مصدره، وإن احتجت الرجوع رجعت خطوة واحدة فقط:

1. الرسالة الأولى: الاتجاه في index.html والخط الافتراضي. بعدها افتح الصفحة الرئيسية وتأكد أن النص يبدأ من اليمين وأن الخط تغيّر.
2. الرسالة الثانية: استبدال الأصناف الفيزيائية و space-x في كل الملفات. بعدها تحقق من المسافات حول الأزرار والحقول.
3. الرسالة الثالثة: الأيقونات ومزوّد الاتجاه والنوافذ الجانبية. بعدها افتح القائمة على عرض الجوال.

ثم مرّ على هذه النقاط الخمس في المعاينة، فهي أكثر ما يبقى معكوساً في مشاريع React و Tailwind بعد الإصلاح: شريط التنقل وترتيب روابطه، حقل البحث وأيقونته، شريط الأزرار في البطاقة الرئيسية، النافذة الجانبية على الجوال، وتذييل الصفحة بأعمدته. إن كانت الخمس سليمة، فالأغلب أن بقية الموقع سليم أيضاً.

الحل الأسرع: أوترا

إن كنت ستبدأ مشروعاً عربياً جديداً، فالأقصر أن تبدأ في بيئة تتعامل مع العربية كلغة أساسية. أوترا مبنية على تجربة عربية أصيلة في الواجهة والمحتوى والاتجاه RTL، وتفهم طلبك بالعربية الفصحى واللهجات، فتصف ما تريد كما تقوله لزميل.

وبعد البناء تفتح أوترا الصفحات في متصفح حقيقي لتبحث عن الأخطاء والصفحات الفارغة وتداخل العناصر، وتصلح ما تجده قبل أن تبلغك. وإن بقي عنصر في غير مكانه، فالتعديل المرئي يتيح لك أن تضغط عليه في المعاينة وتغيّر محاذاته أو خطه مباشرة. وإن كان مشروعك في Lovable متزامناً مع GitHub، فتقدر تستورد المستودع وتكمل عليه، والخطوات في صفحة نقل مشروعك من Lovable.