ما ينكسر عندما تُترجم صفحة ويب إلى العربية

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

هل الصفحة عربية للمتصفح أم للقارئ فقط؟

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

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

وحين يحمل مقطعٌ اللغة الأخرى بقصد — اقتباس فرنسي داخل مقال عربي — يُضبط الاتجاه على ذلك العنصر وحده.

ما الذي ينعكس وما الذي لا ينعكس؟

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

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

العنصر	ينعكس؟
أسهم الرجوع والتقدم	نعم
محاذاة النص وعلامات القوائم	نعم
أزرار التشغيل والتخطي والصوت	لا
الشعارات وصور المنتجات	لا
أشرطة التقدم	نعم
الساعة والخط الزمني للوسائط	لا

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

ماذا يفعل تباعد الحروف بالخط العربي؟

يكسره. العربية خط متصل، والوصلات جزء من شكل الحرف. أضف تباعدًا فتتمدد الوصلات أو تتفكك، فتبدو الكلمة صفًّا من حروف منفصلة.

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

ماذا يحدث لأرقام الهاتف وسط العربية؟

تُعاد ترتيبها. خوارزمية الاتجاه الثنائي ترتّب سلسلة أرقام أو حروف لاتينية بقواعدها، فقد يظهر رقم هاتف في آخر جملة وأجزاؤه مقلوبة، وكأن البريد الإلكتروني يبدأ من حيث ينتهي. وشرح محارف التحكم في الاتجاه عند W3C يفسّر الآلية والمحارف التي تعزل السلسلة.

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

والأرقام قرار. الأرقام الغربية والهندية موجودتان، فاختر واحدة للموقع والتزم بها في الأسعار والجداول والتواريخ. خلطها في عمود واحد يجعل الأرقام غير قابلة للمسح السريع.

أي حقول تُكسَر أولًا؟

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

اضبط هذه الحقول على dir="ltr"، وأبقِ التسمية ورسالة الخطأ بالعربية، وضع الحقل عند بداية النموذج لا عند جهة ثابتة. ثم افحص أمرين يفلتان دائمًا: علامة الحقل الإلزامي، التي تنتقل إلى الجهة الأخرى من التسمية، ونص الخطأ الذي يُوضع عادةً بـleft فيظهر تحت حقل آخر.

أين تنكسر الجداول والاقتطاع؟

الجداول ساحة صراع بين الاتجاه والمحاذاة. ينتقل عمود التسميات إلى اليمين، وهذا صحيح، لكن الأعمدة الرقمية المحاذاة يمينًا في النسخة الإنجليزية تصبح ملتصقة بالتسميات. قرّر لكل جدول: التسميات في بداية السطر، والأرقام على جهة واحدة بانتظام، ولا text-align: left في ملف الأنماط.

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

أي الخطوط تحمل عربية حقيقية؟

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

اختر عائلة تحمل حروفًا عربية، أو اقرن خطًا لاتينيًا بخط عربي بقرار واضح، واضبط ارتفاع السطر على الأطول. افحص الأرقام والعلامات، وتأكد من وجود ثقل عريض حقيقي، فالعريض المُصنَّع يلطّخ الوصلات.

بأي ترتيب تصلح؟

1. اضبط lang وdir على المستند، وعلى المقاطع التي تحمل اللغة الأخرى.
2. استبدل كل left وright وmargin-left وpadding-right بخاصية منطقية.
3. قرّر أيقونة أيقونة ما ينعكس، واكتب القائمة.
4. اعزل كل سلسلة لاتينية أو رقمية في نموذج المحتوى.
5. اضبط اتجاه الحقول ذات الشكل الثابت، ثم جرّب رقم هاتف نصف مكتوب.
6. حمّل الخط العربي الحقيقي وقارنه بالبديل على عرض هاتف.

أين يخطئ الناس

• الاختبار على صورة. التصميم المترجم يخفي إعادة الترتيب وموضع المؤشر وتبدّل الخط، وهي ما يلقاه المستخدم.
• قلب الصفحة بتحويل بصري. خاصية scaleX(-1) تعكس النص مع التخطيط. تبدو بارعة في عرض تجريبي وغير مقروءة في الإنتاج.
• ضبط الاتجاه في مكوّن واحد. ترويسة تحمل dir خاصة بها وتذييل يرث غيره ينتجان صفحة تتناقض مع نفسها.
• نسيان ما ليس نصًا. صور تحمل تعليقات إنجليزية داخل الصورة، وملفات PDF، وبطاقات المشاركة، وقوالب البريد، كلها تحتاج القرار نفسه.
• افتراض أن الترجمة تغطي التصميم. العربية تحتاج ارتفاع سطر مختلفًا وإيقاعًا مختلفًا. صندوق يتسع للفرنسية لا يتسع للعربية.

ما لا يغطيه هذا المقال

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

نبني واجهات تُصمَّم فيها النسخة العربية، لا تُترجم إليها.