موقع إلكتروني باللغة العربية: دليل تصميم RTL

إنشاء موقع باللغة العربية لا يعني ترجمة النصوص فقط؛ فاتجاه الصفحة كلها يتغير أيضًا. الجواب المختصر: أضف dir="rtl" وlang="ar" إلى العنصر الجذر، واكتب CSS بخصائص البداية والنهاية (الخصائص المنطقية) بدل اليسار واليمين، واعكس الأيقونات التي تدل على اتجاه دون الشعار والفيديو والرسوم البيانية، وحمّل خطًا عربيًا مخصصًا، وأعلن النسخة العربية عبر hreflang. إذا خُطط لهذه الخطوات الخمس من البداية تصبح العربية مجرد لغة إضافية، أما إضافتها لاحقًا فكثيرًا ما تعني إعادة كتابة نصف التصميم.

من يحتاج إلى موقع باللغة العربية؟

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

الخطوة الأولى: dir="rtl" وlang="ar"

ما يخبر المتصفح باتجاه الصفحة هو خاصية dir في عنصر html. عند تعيين dir="rtl" تنقلب محاذاة النص وترتيب أعمدة الجداول وموضع شريط التمرير وتدفق flex وgrid تلقائيًا إلى اليمين. أما lang="ar" فضرورية كي تنطق قارئات الشاشة النص صحيحًا، ويختار المتصفح تشكيل الحروف المناسب، وتتعرف محركات البحث على اللغة. في بنية تعتمد بادئة اللغة مثل Next.js تُولَّد هذه القيمة في التخطيط (layout) بحسب اللغة الحالية:

const RTL_LOCALES = new Set(['ar', 'fa', 'he']);

export default async function LocaleLayout({ children, params }: Props) {
  const { locale } = await params;
  const dir = RTL_LOCALES.has(locale) ? 'rtl' : 'ltr';

  return (
    <html lang={locale} dir={dir}>
      <body>{children}</body>
    </html>
  );
}

/* CSS: logical properties instead of left/right */
.card {
  padding-inline-start: 24px; /* left in LTR, right in RTL */
  margin-inline-end: 16px;
  border-inline-start: 4px solid var(--color-primary);
  text-align: start;
}

/* Mirror a directional icon only in RTL */
[dir='rtl'] .icon-arrow {
  transform: scaleX(-1);
}

يجب أن تعرف مكتبة الواجهة التي تستخدمها الاتجاه أيضًا. تدعم Ant Design وMUI ومثيلاتهما وضع RTL، لكن يجب تفعيله صراحة؛ وإلا فستفتح القوائم المنسدلة ومنتقيات التاريخ والأدراج الجانبية من الجهة الخطأ.

كتابة CSS بالخصائص المنطقية

معظم عمل RTL يقع في CSS. الاتجاهات الفيزيائية مثل margin-left وpadding-right وleft: 0 وtext-align: left تصبح معكوسة في RTL. وكتابة قاعدة [dir=rtl] منفصلة لكل منها بطيئة وهشة. الطريقة الصحيحة هي استخدام الخصائص المنطقية من اليوم الأول:

• margin-inline-start / margin-inline-end بدل margin-left / margin-right
• padding-inline-start / padding-inline-end بدل padding-left / padding-right
• inset-inline-start / inset-inline-end بدل التموضع بـ left / right
• text-align: start بدل text-align: left
• border-inline-start بدل border-left، وborder-start-start-radius للزوايا
• يتبع flex وgrid الاتجاه أصلًا، فلا حاجة إلى قلبهما يدويًا بـ row-reverse

ما يجعل النسخة العربية قليلة التكلفة ليس الترجمة، بل كتابة CSS بالخصائص المنطقية منذ اليوم الأول. في موقع مبني على الاتجاهات الفيزيائية يعني دعم RTL مراجعة كل مكوّن يدويًا.

ما الذي يُعكس وما الذي يبقى كما هو؟

لا ينقلب كل شيء في RTL. القاعدة بسيطة: العنصر الذي يرتبط معناه بالاتجاه يُعكس، والعنصر الذي لا يرتبط معناه بالاتجاه يبقى كما هو.

• يُعكس: أسهم الرجوع والتقدم، واتجاه فتح القائمة، وفواصل مسار التنقل (breadcrumb)، واتجاه شرائح العرض والمعارض، وأشرطة التقدم، ومؤشرات الخطوات.
• لا يُعكس: الشعار، والصور ومقاطع الفيديو، وأيقونات العلامات التجارية، وأيقونة الساعة، وزر التشغيل، والمحور الزمني للرسوم البيانية في أغلب الحالات، وأرقام الهواتف وعناوين البريد الإلكتروني.
• انتبه: الكلمات اللاتينية ورموز المنتجات والروابط داخل النص العربي تُقرأ من اليسار إلى اليمين؛ ولفّها بعنصر bdi أو بـ dir="ltr" يمنع علامات الترقيم من القفز إلى مكان خاطئ في الأسطر المختلطة.

الخط العربي وارتفاع السطر والطباعة

الخط المختار للنص اللاتيني لا يحتوي عادة على حروف عربية، فيلجأ المتصفح إلى خط النظام ويظهر الموقع مختلفًا على كل جهاز. لذلك يجب تحميل خط ويب عربي مخصص مثل Noto Naskh Arabic أو Noto Kufi Arabic أو Cairo أو IBM Plex Sans Arabic، وفي الصفحات العربية فقط. ولأن الحروف العربية متصلة ونقاطها تمتد فوق السطر وتحته، ينبغي أن يكون ارتفاع السطر أوسع قليلًا منه في النص اللاتيني. لا يُستخدم تباعد الحروف (letter-spacing) في العربية لأنه يقطع وصل الحروف، ولا توجد حروف كبيرة وصغيرة، فأنماط العناوين المبنية على text-transform: uppercase لا معنى لها في العربية.

الأرقام والتواريخ والنماذج

تشيع الأرقام العربية المشرقية (٠١٢٣) في بعض الدول العربية والأرقام الغربية (0123) في دول أخرى، وفي الخليج يُرى الاستخدامان معًا. حدّد ما ستعرضه بحسب السوق المستهدفة، ونسّق الأسعار والتواريخ والعملات عبر Intl.NumberFormat وIntl.DateTimeFormat بدل كتابتها يدويًا. في النماذج تُحاذى حقول الاسم والعنوان إلى اليمين، أما حقول الهاتف والبريد الإلكتروني ورقم IBAN ورقم البطاقة فتبقى من اليسار إلى اليمين. وراجع قواعد التحقق أيضًا: حقل اسم لا يقبل إلا الحروف اللاتينية يرفض الاسم العربي، وكل نموذج متروك عميل ضائع.

تحسين محركات البحث للصفحات العربية

لكي تظهر النسخة العربية في نتائج البحث تنطبق قواعد المواقع متعددة اللغات المعتادة: رابط مستقل لكل لغة (/ar/...)، وإعلان متبادل عبر hreflang="ar"، وعنوان ووصف خاصان بكل لغة. يمكن استخدام الحروف العربية في الروابط؛ فـ Google يقرؤها ويعرضها بالعربية في النتائج، لكنها تتحول إلى سلاسل مرمّزة طويلة عند مشاركتها. كلا الأسلوبين يعمل ما دامت الروابط قصيرة ومقروءة؛ المهم أن تختار مرة واحدة ولا تغيّر. الفارق الحقيقي في المحتوى: الصفحة العربية المملوءة بالترجمة الآلية تكشف نفسها للقارئ العربي من الفقرة الأولى، ويبقى معدل الارتداد مرتفعًا. وإذا كنت تستهدف بلدًا بعينه مثل السعودية فإن hreflang بترميز إقليمي مثل ar-SA ومعلومات اتصال محلية تقوّي الإشارة. للأساس التقني راجع دليل الموقع المتوافق مع محركات البحث، ولمثال على سوق له محرك بحث خاص راجع مقال تحسين الظهور في Yandex.

اختبار RTL قبل الإطلاق

• افتح كل قالب صفحة بالعربية وقارن لقطات الشاشة بالنسخة LTR على الجوال وسطح المكتب.
• افتح القوائم المنسدلة والنوافذ المنبثقة والأدراج ومنتقيات التاريخ وشرائح العرض والإشعارات واحدًا واحدًا.
• تحقق من موضع علامات الترقيم في الأسطر التي يختلط فيها النص العربي بكلمات لاتينية وأرقام وروابط.
• املأ النماذج وأرسلها باسم عربي وأرقام مشرقية وعناوين طويلة.
• استمع إلى بضع صفحات بقارئ الشاشة؛ أخطاء lang وdir تُسمع فورًا. وللقواعد العامة راجع مقال إمكانية الوصول (WCAG).
• تأكد من أن صور المشاركة الاجتماعية (OG) ترسم النص العربي بحروف متصلة وفي الاتجاه الصحيح.

الخلاصة

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