لماذا يطلع تصميمك العربي مكسوراً في أدوات الذكاء الاصطناعي؟

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

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

1. اتجاه المستند: وسم html بلا dir="rtl"، فكل شيء يبدأ من اليسار.
2. المسافات والمواضع الفيزيائية: margin-left و right: 0 و ml-4 لا تنقلب مع الاتجاه، فتبقى الفراغات في الجهة الخطأ.
3. الاتجاه البصري: الأسهم، شرائط التقدم، أشرطة التمرير، والحركات التي تنزلق من اليسار.
4. المكوّنات الجاهزة: السلايدر والرسوم البيانية والتقويم والقوائم المنسدلة لها إعداد اتجاه خاص بها، ولا تقرأ اتجاه الصفحة دائماً.
5. الحقول: رقم الجوال والبريد والرابط تُكتب من اليسار حتى في صفحة عربية، فإذا ورثت اتجاه الصفحة ظهرت مقلوبة أثناء الكتابة.
6. الخط والنص المختلط: خط غير عربي يفكك الحروف أو يعرضها بخط احتياطي، ونص فيه أرقام وكلمات إنجليزية يتبعثر ترتيبه.

لاحظ أن الطبقة الأولى وحدها هي ما يصلحه طلب «اجعله عربي» عادة. لهذا ترى نصاً عربياً صحيحاً داخل تصميم ما زال يفكر بالإنجليزية. والطبقة السادسة لها صفحتان مستقلتان: الخطوط العربية وانقلاب الأرقام والأقواس.

ومن المفيد أن تعرف أن الطبقات لا تظهر كلها في كل صفحة. صفحة هبوط بسيطة قد تعاني من الأولى والثانية والسادسة فقط، بينما لوحة تحكم فيها رسوم بيانية وجداول ونماذج قد تعاني من الست معاً. لذلك قد يبدو لك أن الأداة «أصلحت» الصفحة الرئيسية ثم «أفسدت» لوحة التحكم، والحقيقة أن لوحة التحكم فيها طبقات لم تكن في الرئيسية أصلاً.

الحل خطوة بخطوة في أي أداة

الخطوات التالية تعمل في Lovable و Replit و Bolt و v0 أو أي مشروع ويب، لأنها HTML و CSS قياسيان. ضع القواعد العامة في ملف الأنماط الرئيسي للمشروع، وهو غالباً index.css أو globals.css أو style.css.

1. 1

   ثبّت الاتجاه واجعل المحاذاة منطقية

   ابدأ من وسم html، ثم أضف قاعدة عامة تمنع أي محاذاة يسار موروثة.

   <html lang="ar" dir="rtl">
   
   /* ملف الأنماط الرئيسي */
   body { text-align: start; }
   th, td { text-align: start; }

2. 2

   اضبط الحقول التي تُكتب من اليسار

   رقم الجوال والبريد والروابط والرموز تُكتب من اليسار إلى اليمين، لكن تبقى محاذاتها مع بقية النموذج العربي إلى اليمين.

   input[type="tel"],
   input[type="email"],
   input[type="url"],
   input[name="iban"] {
     direction: ltr;
     text-align: right;
   }
   
   input::placeholder { text-align: right; }

3. 3

   اعكس الحركة والتقدم

   شريط التقدم يجب أن يمتلئ من اليمين، والعناصر التي تنزلق إلى الداخل تأتي من اليمين. القاعدة :dir(rtl) تختار العنصر حسب اتجاهه الفعلي.

   .progress-fill { transform-origin: right; }
   
   .drawer { inset-inline-start: 0; }
   .drawer.closed { transform: translateX(100%); }
   :dir(ltr) .drawer.closed { transform: translateX(-100%); }

4. 4

   أخبر السلايدر بالاتجاه

   مكتبة Swiper، وهي من أكثر المكتبات استخداماً في السلايدر، تقرأ خاصية dir من الحاوية. بدونها يتحرك السهم «التالي» إلى الخلف.

   <div class="swiper" dir="rtl">
     <div class="swiper-wrapper">
       <div class="swiper-slide">عرض رمضان</div>
       <div class="swiper-slide">شحن مجاني داخل الرياض</div>
     </div>
   </div>

5. 5

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

   في Chart.js مثلاً، وسيلة الإيضاح والتلميح لهما خيار rtl مستقل عن الصفحة. وضع المحور الأفقي ليبدأ من اليمين اختياري حسب نوع البيانات.

   new Chart(ctx, {
     type: "bar",
     data,
     options: {
       plugins: {
         legend: { rtl: true, textDirection: "rtl" },
         tooltip: { rtl: true, textDirection: "rtl" },
       },
       scales: { x: { reverse: true } },
     },
   });

6. 6

   افحص الصفحة من المتصفح

   افتح الصفحة واضغط F12 ثم الصق هذا في الطرفية (Console). يعرض لك كل عنصر ما زالت محاذاته أو هامشه فيزيائياً، فتعرف أين تبحث.

   document.querySelectorAll("body *").forEach(el => {
     const s = getComputedStyle(el);
     if (s.textAlign === "left" || parseFloat(s.marginLeft) > 0 && s.marginRight === "0px") {
       console.log(el, s.textAlign, s.marginLeft);
     }
   });
   console.log("dir:", document.documentElement.dir || "غير محدد");

وهذا برومبت عام تلصقه في أي أداة بناء. صغناه بحيث يذكر الطبقات بالاسم، لأن الوكيل يصلح ما يُطلب منه تحديداً:

تريد فحصاً سريعاً قبل أن تبدأ؟ جرّب أداة فاحص الاتجاه RTL على رابط صفحتك لتعرف أي الطبقات مكسورة عندك.

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

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

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

الفكرة في أوترا أن العربية ليست طبقة تضيفها بعد البناء. المنصة مبنية على تجربة عربية أصيلة، واجهةً ومحتوى واتجاهاً RTL، فتكتب طلبك بالعربية الفصحى أو بلهجتك وتصلك صفحة تبدأ من اليمين.

وقبل أن تبلغك بانتهاء العمل، تفتح أوترا الصفحات في متصفح حقيقي وتبحث عن الأخطاء وتداخل العناصر وتصلحها. وما يبقى من ملاحظات بصرية صغيرة، مثل محاذاة عنوان أو حجم خط، تعدّله بالضغط على العنصر في المعاينة دون أن تفتح الكود.