بناء واجهات عربية RTL بدون ترقيع التصميم في النهاية

RTL يبدأ من بنية الصفحة

حدد اللغة والاتجاه من جذر الصفحة بدل الاعتماد على CSS فقط. وفي النسخة الإنجليزية استخدم lang="en" وdir="ltr". لكن وجود الصفحة داخل سياق RTL لا يعني أن كل شيء بداخلها يجب أن يكون RTL. الكود، وأوامر Terminal، ومسارات الملفات، والبريد الإلكتروني، والروابط غالبًا يجب أن تبقى LTR.

<html lang="ar" dir="rtl">
  <body>
    ...
  </body>
</html>

<html lang="en" dir="ltr">
  <body>
    ...
  </body>
</html>

<pre dir="ltr">npm run dev</pre>

<span dir="ltr">
  src/components/Navbar.tsx
</span>

استخدم CSS يعمل في الاتجاهين

بدل بناء المكونات حول left وright، استخدم CSS Logical Properties عندما يكون المقصود بداية العنصر أو نهايته. يمكنك استخدام خصائص مثل margin-inline-start وmargin-inline-end وpadding-inline-start وborder-inline-end وinset-inline-start. بهذه الطريقة يمكن للمكون نفسه أن يعمل في العربية والإنجليزية بدون ملف CSS منفصل لكل اتجاه.

.card {
  padding-inline: 1.5rem;
}

.icon {
  margin-inline-end: 0.5rem;
}

صمم للمحتوى العربي والإنجليزي معًا

المنتجات العربية الحديثة تحتوي باستمرار على محتوى مختلط. مثل: تم تعديل الملف src/app/page.tsx بنجاح. أو: شغّل npm run build ثم حاول مرة أخرى. أو: تم إرسال الرسالة إلى ahmed@example.com. هذه الحالات تكشف مشكلات الاتجاه بسرعة أكبر من فقرة عربية صافية. تعامل مع code وURL وemail وfile path والمحتوى التقني كعناصر قد تحتاج إلى اتجاه مستقل داخل الصفحة العربية. الهدف ليس جعل كل شيء RTL، بل جعل كل نوع من المحتوى يظهر بالاتجاه الطبيعي له.

<code dir="ltr">src/app/page.tsx</code>

<code dir="ltr">npm run build</code>

<a href="mailto:ahmed@example.com" dir="ltr">ahmed@example.com</a>

لا تعكس كل المكونات

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

• navigation
• breadcrumbs
• forms
• tables
• dropdowns
• modals
• sidebars
• icons

النماذج تحتاج اتجاهًا حسب البيانات

النموذج العربي قد يحتوي على اسم عربي، وبريد إلكتروني إنجليزي، ورقم هاتف، وكلمة مرور، ورسالة خطأ عربية. لا تجعل اتجاه كل الحقول واحدًا فقط لأن الصفحة RTL. واختبر مكان الأيقونات، والـplaceholder، ورسائل التحقق، والـSelect، والـCheckbox، والـOTP، خصوصًا على الهاتف.

<input type="email" dir="ltr" />

الخط والشاشات الصغيرة جزء من RTL

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

pre {
  overflow-x: auto;
}

كيف تساعدك نواة في بناء واجهات RTL؟

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

• خل الـ dashboard RTL، وخلي الـ sidebar على اليمين، بس خلي chart والكود والـ email ظاهرين LTR.
• راجع صفحة التسجيل بالعربي وتأكد إن الـ form والـ validation messages شغالة صح على الموبايل.
• سو navbar يشتغل بالعربي والإنجليزي واستخدم logical properties بدل left وright.

تريد التفاصيل التقنية؟

إذا كنت تريد دليلًا أعمق يشمل CSS Logical Properties، والنص المختلط، والنماذج، والـsidebar، والـbreadcrumbs، والاختبار، وإمكانية الوصول، وSEO:

واجهة RTL الجيدة لا تبدو معكوسة

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