دعم العربية في المواقع والتطبيقات: الاتجاه RTL والخطوط والترميز

 

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

كيف تضبط الترميز واللغة والاتجاه؟

أساس كل شيء إعدادات صغيرة إن أهملتها ظهرت مشكلات غريبة:

• الترميز UTF-8: هو المعيار الذي يدعم العربية وكل اللغات. حدده في ملفات HTML بـ <meta charset="utf-8">، وفي رأس استجابة الخادم، وفي قاعدة البيانات (utf8mb4 في MySQL لدعم كامل لـ Unicode)، وفي حفظ الملفات من المحرر. وأي حلقة تستعمل ترميزًا آخر تفسد النص.

• سمة اللغة: <html lang="ar"> تخبر المتصفح وقارئات الشاشة ومحركات البحث ومترجمات الصفحة بلغة المحتوى، ويمكن تحديد المنطقة مثل ar-SA. وللمقاطع بلغة أخرى استعمل lang على العنصر نفسه.

• سمة الاتجاه: dir="rtl" على عنصر الجذر لتتجه الصفحة من اليمين إلى اليسار. وللمحتوى المتغير الاتجاه استعمل dir="auto" في حقول الإدخال والتعليقات ليتحدد من أول حرف قوي.

• الاتجاه عبر CSS: خاصية direction موجودة لكن الأفضل ضبط الاتجاه في HTML لأنه دلالي، وتبقى CSS للشكل.

• صفحات متعددة اللغات: اجعل lang وdir ديناميكيين بحسب لغة المستخدم، ولا تثبتهما.

• الخادم والبريد: رسائل البريد والـ PDF والتقارير تحتاج ضبطًا مستقلًا للترميز والاتجاه، وكثير من المشكلات تظهر فيها.

• اختبر بنص حقيقي: لا تكتفِ بـ«lorem ipsum»، فاكتب نصوصًا عربية فعلية بأطوال مختلفة، فقد تكشف أشياء لا تظهر مع الإنجليزية.

كيف تعكس التخطيط وتستعمل الخصائص المنطقية؟

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

• انعكاس تلقائي: كثير من التخطيط يعكس وحده بـ dir="rtl": تدفق النص، وترتيب عناصر Flexbox وGrid، ومحاذاة النص الافتراضية.

• الخصائص المنطقية في CSS: بدل margin-left وpadding-right وtext-align: left استعمل margin-inline-start وpadding-inline-end وtext-align: start. فتتكيف تلقائيًا مع الاتجاه ولا تكرر الأنماط للغتين.

• الموضع والحجم: inset-inline-start بدل left، وinline-size وblock-size بدل العرض والارتفاع في مواضع مناسبة.

• الأيقونات الاتجاهية: الأسهم وأزرار التالي والسابق والرجوع تُعكس في RTL. أما الأيقونات غير الاتجاهية كالبحث والمنزل والإعدادات فلا تُعكس. ويمكن عكس الاتجاه الأفقي بـ transform: scaleX(-1) أو باستخدام صور منفصلة.

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

• الجداول والرسوم البيانية: ترتيب الأعمدة ومحور الزمن في الرسوم قد يحتاج إلى مراجعة، فمحاور الزمن في كثير من السياقات العربية تُعرض من اليمين.

• مكتبات الواجهة: تحقق من دعمها RTL قبل اعتمادها. كثير منها يدعمه بإعداد، وبعضها يحتاج إلى أنماط إضافية.

• أدوات آلية: هناك أدوات مثل PostCSS RTLCSS تولد أنماط RTL من LTR، لكنها لا تغني عن المراجعة اليدوية.

ما مشكلات النص ثنائي الاتجاه؟

أصعب جزء في العربية هو اختلاطها بنصوص من اليسار إلى اليمين كالأرقام والأسماء اللاتينية:

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

• العلاج الأساسي: غلّف المقطع المختلف الاتجاه بعنصر <bdi> أو <span dir="ltr">، أو استعمل unicode-bidi: isolate. وهذا يمنع تأثير المقاطع في بعضها.

• حقول الإدخال: dir="auto" للأسماء والتعليقات، ولحقول البريد وروابط الويب وأرقام الهواتف غالبًا dir="ltr" مع محاذاة مناسبة.

• الأرقام: العربية الحديثة تستعمل الأرقام الهندية (١٢٣) في بعض السياقات والعربية الغربية (123) في أخرى، وتتفاوت التفضيلات بين البلدان وفي السعودية يشيع الاستعمال الاثنين بحسب السياق. قرر سياسة لموقعك، ومنح المستخدم الاختيار إن أمكن، واستعمل واجهة Intl.NumberFormat للتنسيق.

• علامات الترقيم العربية: الفاصلة (،) والفاصلة المنقوطة (؛) وعلامة الاستفهام (؟). وانتبه عند الجمع بين اللغتين.

• الأقواس والاقتباس: تنعكس في RTL، فانتبه لما تلصقه من نصوص.

• علامات الاتجاه غير المرئية: يمكن استعمال RLM وLRM في الحالات الصعبة، لكن الأفضل أن تعتمد على العناصر والسمات، وتحذر من أن النسخ واللصق قد ينقلها إلى أماكن لا تريدها.

• النصوص المولدة: حين تدمج اسم مستخدم داخل جملة، عزله بـ <bdi> يمنع إفساد الجملة.

كيف تختار الخطوط وتتعامل مع الحروف؟

الخط العربي الجيد يصنع الفرق في القراءة والهوية:

• خطوط تدعم العربية: ليست كل خطوط الإنجليزية تتضمن حروفًا عربية، فيعرض المتصفح خطًا بديلًا غير متجانس. اختر خطًا يدعم العربية كاملًا، وحدد بدائل في font-family.

• أمثلة متاحة: خطوط مفتوحة مثل «الكايرو» و«تجوّل» و«نوتو سانس العربي» و«IBM Plex Sans Arabic» و«ألمراعي» وغيرها متاحة في مكتبات مثل Google Fonts، وتختلف تراخيصها، فتحقق منها قبل الاستعمال التجاري.

• الأوزان والحجم: قلل الأوزان المحملة لتخفيف الأداء. وانتبه أن الخط العربي يحتاج غالبًا إلى حجم أكبر قليلًا من اللاتيني بالارتفاع نفسه، وإلى ارتفاع سطر أرحب (line-height) لتتسع التشكيلات.

• التشكيل: تحقق أن الخط يعرض الحركات في أماكنها دون تداخل، خاصة إن عرضت نصوصًا قرآنية أو شعرية. وللقرآن الكريم خطوط ومعايير خاصة تعتمدها الجهات المعنية، فلا تعتمد خطًا عاديًا دون تدقيق.

• التطويل (الكشيدة): لا تضف كشيدة يدوية في النصوص الديناميكية، فهي تفسد البحث والنسخ. وبعض المتصفحات تدعم text-justify وبدائل لضبط الهوامش.

• التقطيع والربط: الحروف العربية تتصل ولا يجوز فصلها بتباعد الحروف (letter-spacing) لأنه يكسر الاتصال. تجنبه في العربية.

• التحميل: خطوط الويب تضاف بـ @font-face مع font-display: swap، وتحمل أجزاء الخط التي تحتاجها، فالخطوط العربية قد تكون ثقيلة. راجع مقال الأداء.

• الصور والنصوص: لا تضع نصوصًا عربية داخل صور، فلا تُقرأ ولا تُترجم ولا تتجاوب. استعمل نصًا حقيقيًا بدلها.

كيف تنظم الترجمة والتوطين والبحث والبيانات؟

دعم العربية ليس مظهرًا فقط، بل يمتد إلى النصوص والبيانات والتواريخ:

• فصل النصوص عن الكود: ملفات ترجمة (JSON أو PO) ومكتبات i18n مثل i18next أو FormatJS أو أدوات إطارك، بدل كتابة النصوص داخل المكونات.

• صيغ الجمع: العربية لها صيغ متعددة: المفرد والمثنى والجمع القليل والكثير وغيرها، ولا تكفي صيغتا «واحد/كثير» الإنجليزية. استعمل مكتبات تدعم قواعد الجمع في CLDR (Intl.PluralRules).

• عدم تركيب الجمل: لا تلصق أجزاء الجمل المترجمة، فتركيبها يختلف بين اللغات. اجعل الجملة كاملة بمتغيرات داخلها.

• التواريخ والتقويم: يستعمل كثير من المستخدمين في السعودية التقويم الهجري إلى جانب الميلادي، فاستعمل Intl.DateTimeFormat مع ar-SA وخيار التقويم المناسب، وأتح العرض بالاثنين حيث يهم. ولاحظ أن أول الأسبوع وأيام العطلة تختلف بين السياقات.

• العملة: Intl.NumberFormat مع SAR يعرض الريال بصيغته، وانتبه لموضع الرمز واتجاهه.

• الفرز والمقارنة: Intl.Collator('ar') يفرز الأسماء العربية صحيحًا. ولا تعتمد على فرز الرموز الخام.

• البحث والتطبيع: الناس يكتبون «أحمد» و«احمد» و«إبراهيم» و«ابراهيم» و«مدرسة» و«مدرسه» وبالتشكيل وبدونه. لجعل البحث نافعًا طبّع النص: أزل التشكيل والتطويل، وسوّ الهمزات والألف المقصورة والياء والتاء المربوطة والهاء بحسب سياسة بحثك. ومحركات البحث والقواعد توفر محللات للعربية، فتحقق من دعم أداتك.

• قواعد البيانات: اختر ترتيب الحروف (collation) المناسب، وتأكد أن الأعمدة تدعم Unicode كاملًا.

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

• الترجمة الآلية: مفيدة كمسودة، لكن راجعها بشريًا، فالأخطاء في نصوص الواجهة والقانونية مكلفة.

كيف تختبر الواجهة العربية؟

الاختبار هو ما يكشف المشكلات التي لا تراها بعين مطور غير عربي القراءة:

• اجعل العربية لغة أساسية في الاختبار: لا تعتبرها ترجمة لاحقة. وفضّل أن يراجعها ناطق أصلي.

• قائمة تحقق للمراجعة: هل الاتجاه صحيح في كل الصفحات والمكونات؟ هل الأيقونات الاتجاهية معكوسة؟ هل علامات الترقيم والأرقام في مواضعها؟ هل تتسع النصوص الأطول في الأزرار والقوائم؟

• نصوص أطول وأقصر: العربية قد تأخذ مساحة مختلفة عن الإنجليزية. اختبر بطول مختلف لتتأكد من عدم القطع أو الالتفاف المربك.

• المحتوى المختلط: جمل عربية فيها أسماء إنجليزية وأرقام وروابط، وهي أصعب سيناريو.

• الأجهزة والمتصفحات: تختلف مظاهر الخطوط والتشكيل وسلوك bidi قليلًا بين الأنظمة، فجرب على iOS وأندرويد وويندوز.

• النماذج: الإدخال العربي ولوحة المفاتيح، وحقول الأسماء، والصق نصًا مختلطًا في الحقول.

• قارئات الشاشة: تأكد أن النطق العربي صحيح، وأن lang مضبوط على كل مقطع.

• PDF والطباعة والبريد: مكان تفشل فيه العربية كثيرًا بسبب الخطوط والترميز، فاختبره صراحة.

• إشراك مستخدمين عرب: ملاحظاتهم عن الصياغة والمصطلحات والنبرة لا تقدر بثمن، فالمصطلح التقني الذي يعجبك قد يبدو غريبًا لهم.

أسئلة شائعة عن دعم العربية

هل أبني موقعًا لكل لغة أم موقعًا واحدًا متعدد اللغات؟

الأشيع موقع واحد بنصوص مترجمة واتجاه ديناميكي ومسارات مثل /ar/، فتصان الشيفرة مرة واحدة. وتحدد الخصائص المنطقية والتوطين شكل الانتقال بين اللغتين.

هل أحتاج إلى فريق لتعريب التطبيق؟

للتطبيقات الصغيرة يكفي مترجم أو مراجع ناطق، مع تصميم يدعم RTL منذ البداية. أما للأنظمة الكبيرة فيفيد وجود إدارة للمصطلحات وأدوات ترجمة منظمة.

هل تكفي الترجمة الآلية؟

كمسودة نعم، وكنسخة نهائية لا في الغالب. راجع نصوص الواجهة والرسائل القانونية والتسويقية بشريًا.