كيف تبني واجهة RTL عربية بشكل صحيح باستخدام نواة؟

ابدأ من اتجاه الصفحة، لا من شكلها

أفضل مكان لتحديد اللغة والاتجاه هو جذر المستند. استخدم lang=ar وdir=rtl للنسخة العربية، وlang=en وdir=ltr للنسخة الإنجليزية. lang يحدد لغة الصفحة لمحركات البحث وتقنيات الوصول، بينما dir يحدد اتجاه النص والتخطيط. لا تعتمد على body { direction: rtl } وحده؛ الاتجاه جزء من بنية الصفحة نفسها. إذا كان الموقع يدعم اللغتين، اجعل لكل نسخة روابط واضحة مثل /pricing و/en/pricing حتى يبقى تبديل اللغة والروابط وcanonical وhreflang واضحًا.

<html lang="ar" dir="rtl">

<html lang="en" dir="ltr">

body {
  direction: rtl;
}

صمم باستخدام start وend بدل left وright

من أكثر الأخطاء شيوعًا بناء الواجهة كاملة باستخدام left وright ثم محاولة عكسها لاحقًا. استخدم CSS Logical Properties عندما يكون المقصود بداية العنصر أو نهايته، فبهذا يتغير الاتجاه تلقائيًا بين العربية والإنجليزية. ينطبق ذلك على margin-inline-start وmargin-inline-end وpadding-inline وborder-inline-start وinset-inline-end. وحتى أسماء الخصائص داخل مكوناتك يمكن أن تتبع الفكرة نفسها: iconStart أكثر مرونة من iconLeft. استخدم gap مع Flexbox وGrid بدل إضافة margin-right أو margin-left حسب اللغة، ولا تستخدم row-reverse كحل عام لـRTL لأنك قد تعكس الترتيب مرتين.

.card {
  padding-inline-start: 24px;
}

.icon {
  inset-inline-end: 12px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 1rem;
}

العربية والإنجليزية ستظهران في نفس الواجهة

المنتجات العربية الحديثة نادرًا ما تكون عربية بنسبة 100%. قد تجد داخل الجملة نفسها: تم تعديل الملف src/components/Header.tsx وتشغيل npm run build بنجاح، أو تم إرسال رسالة إلى ahmed@example.com. لهذا لا تعامل كل شيء داخل صفحة RTL على أنه محتوى RTL. الكود وأوامر Terminal ومسارات الملفات والبريد والروابط وأسماء الحزم وGit hashes وJSON غالبًا يجب أن تبقى LTR. وعند عرض محتوى لا تعرف اتجاهه مسبقًا، مثل اسم مستخدم أو اسم مشروع قادم من قاعدة البيانات، استخدم bdi لعزل اتجاهه عن الجملة المحيطة.

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

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

code, pre {
  direction: ltr;
  text-align: left;
}

<p>قام <bdi>Ahmed_92</bdi> بتحديث المشروع.</p>

المكونات تحتاج أكثر من مجرد عكس الاتجاه

بعض المكونات تكشف مشاكل RTL أكثر من غيرها، والنماذج مثال واضح. راجع اتجاه الـlabel والـplaceholder ورسائل الخطأ ومكان أيقونة الحقل وزر إظهار كلمة المرور والـSelect ورقم الهاتف والبريد الإلكتروني. مدخل البريد يمكن أن يبقى LTR داخل نموذج عربي. والـsidebar يحتاج إلى قرار تصميمي حقيقي: افحص جهة ظهوره وحدود الفصل وحالة collapsed وسهم القوائم الداخلية والـtooltip وزر الإغلاق على الهاتف. وينطبق الأمر نفسه على الـBreadcrumbs والجداول والـDropdowns والـModals والـDrawers، مع السماح لكل خلية في الجدول باتجاه يناسب محتواها.

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

.sidebar {
  border-inline-end: 1px solid #ddd;
}

لا تعكس كل أيقونة

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

الخط والمسافات جزء من تجربة RTL

قد يعمل التصميم تقنيًا ويظل يبدو غير طبيعي بالعربية. الخط العربي والـline-height وطول النص والمسافات داخل الأزرار كلها تغير النتيجة. عنوان إنجليزي قد يبدو جيدًا مع line-height: 1.2 بينما يصبح النص العربي مزدحمًا بنفس القيمة. ولا تفترض أن النص المترجم سيأخذ المساحة نفسها؛ عبارة إدارة الاشتراك قد تحتاج إلى مساحة مختلفة عن Manage subscription. استخدم نصوصًا عربية حقيقية تجمع بين العربية والإنجليزية والأرقام والمصطلحات التقنية، ودع المكونات تتمدد عند الحاجة.

.button {
  min-inline-size: 120px;
  padding-inline: 20px;
}

اختبر RTL على الهاتف مبكرًا

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

pre {
  overflow-x: auto;
}

.long-text {
  overflow-wrap: anywhere;
}

اختبر تجربة حقيقية، لا لقطة شاشة فقط

اختبار Button أو Input منفردًا ليس كافيًا. جرّب رحلة فعلية داخل المنتج: افتح الصفحة، استخدم القائمة، أدخل اسمًا عربيًا وبريدًا إنجليزيًا، افتح dashboard، استخدم sidebar وجدولًا وmodal، شاهد رسالة خطأ، ثم بدّل إلى الإنجليزية. راجع أيضًا التنقل باستخدام لوحة المفاتيح وترتيب Tab وlabels وعناصر nav وmain وbutton الدلالية. وعند تبديل اللغة، أبقِ المستخدم في الصفحة المقابلة بدل إرساله إلى الصفحة الرئيسية؛ من /docs/installation إلى /en/docs/installation عند اختيار الإنجليزية.

لا تنسَ SEO للنسخة العربية

RTL ليس موضوع تصميم فقط. كل صفحة عربية تحتاج إلى title وmeta description وcanonical وhreflang مناسبين لها. اكتب العنوان والوصف العربيين كعربية طبيعية، لا كترجمة حرفية لنسخة إنجليزية. ووجود html lang=ar dir=rtl يساعد المتصفح وتقنيات الوصول ومحركات البحث على فهم الصفحة بشكل صحيح.

<link rel="alternate" hreflang="ar" href="https://example.com/rtl-web-development" />

<link rel="alternate" hreflang="en" href="https://example.com/en/rtl-web-development" />

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

بدل أن تحوّل فكرتك إلى تعليمات تقنية طويلة بالإنجليزية، يمكنك وصف المطلوب بالطريقة التي تتحدث بها فعلًا. مثلًا: راجع صفحة checkout بالعربي وتأكد إن الـform والـvalidation messages والـmobile layout شغالة صح في RTL. أو: سو navbar يشتغل بالعربي والإنجليزي وخلي ترتيب العناصر يتغير حسب اتجاه الصفحة بدون استخدام CSS منفصل لكل لغة. الفكرة ليست فقط أن يفهم وكيل البرمجة الكلمات العربية؛ نواة مصممة لجعل سياق المنتج العربي جزءًا من الطلب: RTL، النص المختلط، اتجاه المكونات، وتجربة الاستخدام بالعربية.

قبل أن تعتبر RTL منتهيًا

راجع هذه الأشياء قبل الإطلاق: الصفحة تستخدم lang=ar وdir=rtl، والمكونات مبنية باستخدام logical properties حيث يناسب، والكود والبريد والروابط تبقى LTR عند الحاجة، والنماذج والـsidebar والـbreadcrumbs والجداول تعمل في الاتجاهين، والأيقونات الاتجاهية فقط هي التي تنعكس، والخط والـline-height مناسبان للعربية، وتم اختبار الهاتف والنص المختلط وتبديل اللغة والـmetadata العربية.

• الصفحة تستخدم lang=ar وdir=rtl
• المكونات تستخدم logical properties حيث يناسب
• الكود والبريد والروابط تبقى LTR عند الحاجة
• النماذج والـsidebar والـbreadcrumbs والجداول تعمل في الاتجاهين
• الأيقونات الاتجاهية فقط هي التي تنعكس
• تم اختبار الخط والهاتف والنص المختلط وتبديل اللغة والـmetadata

واجهة RTL الجيدة بُنيت للعربية من البداية

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