يُبنى الموقع ثنائي اللغة عادةً مرة واحدة بالإنكليزية، ثم يُصبّ العربي في الحاويات نفسها. والنتيجة مقروءة، لكنها نادراً ما تكون جيّدة. والأسباب بنيوية لا ذوقية: للخطّ العربي مقاييس مختلفة، وتخطيطٌ ضُبط على أحدهما سيكون خاطئاً للآخر بطرق يمكن التنبّؤ بها.
لا حروف كبيرة، فلا مراسي
يتنقّل القارئ اللاتيني في الصفحة معتمداً جزئياً على الحروف الكبيرة، فهي تشير إلى بداية الجملة، وإلى الاسم العَلَم، وإلى العنوان. أما العربية فلا تميّز بين حالتَي الحرف إطلاقاً.
ينتج عن ذلك أمران. الأول أن التقنيات المعتمدة على ذلك تتوقّف عن العمل:
text-transform: uppercase لا تفعل شيئاً بالعربية، ولا معنى للـsmall-caps. فلافتة
تمهيديّة مصمّمة على أنها «حروف كبيرة بتباعد واسع» تظهر بالعربية نصّاً عادياً
بقياس صغير، فتُقرأ كأنها سهو لا كأنها لافتة مقصودة.
والثاني، وهو الأهم، أن التسلسل الهرمي صار عليه أن يأتي من مكان آخر: من الوزن والقياس واللون والفراغ بدل حالة الحرف. فتصميمٌ فصل اللافتة عن النصّ بالحالة فقط لا يملك أيّ تسلسل هرمي بعد الترجمة.
العربية تحتاج ارتفاع سطر أكبر، لا المساوي
تحمل الأشكال الحرفية العربية علامات فوق خطّ الأساس وتحته، ومدى الصعود والنزول
الفعلي فيها أكبر من اللاتيني عند القياس الاسمي نفسه. اضبط الاثنين على
line-height: 1.5 وسيبدو العربي مخنوقاً، وتكاد التشكيلات تصطدم بالسطر الذي فوقها.
نقطة انطلاق معقولة هي ارتفاع سطر أوسع بوضوح للعربية منه للقياس اللاتيني نفسه. والآليّة أهم من الرقم بعينه: طبّقها حسب اللغة، لا عبر صنف يجب أن يتذكّره أحدهم.
:lang(ar) {
line-height: 1.85;
}
:lang(ar) h1,
:lang(ar) h2 {
line-height: 1.4;
}تُطابق :lang() على اللغة المعلنة في المستند، فتتبع <html lang="ar"> دون أن
يحتاج أيّ مكوّن إلى معرفة لغته. وهذه التفصيلة هي ما يمنعها من التعفّن: يرث
المكوّن الجديد ارتفاع السطر العربي الصحيح مجاناً، ولا أحد مضطرّ لتذكّر مُعدِّل.
وتنبيه إن كنتم تستعملون إطار أدوات: تلك الأدوات تُولَّد عادةً داخل طبقة تعاقب
(@layer)، وقاعدةٌ خارج الطبقات تتفوّق على قاعدة داخلها بصرف النظر عن الخصوصية.
فإن كانت قواعد :lang() خارج الطبقة فستتغلّب على أدوات leading-* — وهو
المطلوب هنا، لكن معرفته خيرٌ من اكتشافه.
القياس غير قابل للمقارنة بين الخطوط
font-size نفسها تعطي نصّاً عربياً أصغر بصرياً من اللاتيني، لأن ما يعادل ارتفاع
الحرف الصغير يقع بموضع مختلف نسبةً إلى صندوق الـem. فالعربي المضبوط على القياس
الاسمي نفسه لنظيره الإنكليزي يبدو درجة أدنى في التسلسل، حتى لو كان العنوان ذاته.
ولا يُصلَح ذلك باختيار رقم أكبر في كل مكان، فذلك يكسر الإيقاع العمودي. اضبطه حسب اللغة، في الموضع نفسه الذي ضبطت فيه ارتفاع السطر، وتحقّق بالنظر إليهما جنباً إلى جنب لا بمقارنة الأرقام.
ليس لكل خطّ نظير عربي
هذا هو القيد الذي يُخرِج نظام الهوية عن مساره أكثر من غيره. تختار العلامة خطّاً لاتينياً عرضياً، ثم لا يوجد خطّ عربي مقابل — لا لأنه غير رسمي فحسب، بل لأنه لا يوجد ما يحمل الصوت نفسه ومدى الأوزان نفسه والنِّسَب نفسها.
هنا ثلاثة خيارات أمينة وواحد غير أمين.
غير الأمين هو أن تترك المتصفّح يستبدل. فإن كانت font-family لا تسرد إلّا خطّاً
لاتينياً، سقط العربي إلى ما يوفّره نظام التشغيل — أي أن صفحاتكم العربية تُنضَّد
بخطّ مختلف على ويندوز وماك وأندرويد وiOS. أنتم لم تختاروا خطّاً، بل امتنعتم عن
الاختيار.
أمّا الخيارات الأمينة فهي: قرن الخطّ اللاتيني بعائلة عربية صُمِّمت كرفيقة له، أو استعمال عائلة عظمى تشحن الخطّين، أو قبول تنافرٍ مقصود نظرتم إليه فعلاً ووافقتم عليه. الثلاثة قابلة للدفاع. الاستبدال بالصدفة ليس كذلك.
ومهما اخترتم، صرّحوا به بوضوح وحسب اللغة، كي لا تُنضَّد صفحة واحدة بخطّ احتياطي لم يخترْه أحد.
الأرقام تبقى من اليسار إلى اليمين، دائماً
تجري الأرقام والأسعار وأرقام الهواتف ورموز المنتجات والتواريخ من اليسار إلى
اليمين داخل النصّ العربي. وخوارزمية الاتجاهين تتولّى معظم ذلك، لكنها تفشل حول
علامات الترقيم — فرقم هاتف فيه + ومسافات، أو مدى مثل 2020–2024، قد يعيد
ترتيب نفسه بما يغيّر المعنى.
حدِّدوا المقطع صراحةً، على أصغر عنصر سطري يحتويه:
<span dir="ltr">+963 99 20 444 50</span>ولا تضعوا dir تلك على الكتلة المحيطة. فهي تضبط المحاذاة إلى جانب سياق
الاتجاهين، لذا فـdir="ltr" على مستوى الكتلة داخل صفحة عربية ستحاذي محتواها
يساراً بينما يبقى كل ما حولها بمحاذاة يمينية. يبدو كشبكة مكسورة، وسببه سمة واحدة
أعلى بمستوى واحد ممّا ينبغي.
وقرّروا أيضاً: أرقام غربية (0-9) أم أرقام هندية شرقية (٠-٩)؟ كلاهما صحيح،
وخلطهما داخل واجهة واحدة ليس كذلك. تستعمل معظم المنتجات الرقمية المعاصرة في
المنطقة الأرقام الغربية، والاتّساق أهم من الاختيار نفسه.
الضبط يتصرّف على نحو مختلف
تُضبَط العربية تقليدياً بمدّ وصلات الحروف — الكشيدة — لا بتمديد المسافات بين
الكلمات. والمتصفّحات لا تُحسن هذا. فـtext-align: justify على العربية ينتج فجوات
كلمات متفاوتة أكثر إزعاجاً من حافة غير مستوية.
اتركوها على start. الحافة غير المستوية مقبولة؛ أنهار الفراغ الأبيض ليست كذلك.
ما ينبغي فحصه قبل الإطلاق
- اعرضوا كل صفحة باللغتين عند عرض الشاشة نفسه وقارنوا قياسات العناوين بالعين لا بالأرقام.
- تأكّدوا ألّا يسقط أيّ نصّ عربي إلى خطّ نظام. افحصوا
font-familyالمحسوبة على فقرة عربية في المتصفّح، لا في ملف الأنماط. - تأكّدوا أن
text-transform: uppercaseلا يحمل تسلسلاً هرمياً في أي موضع. - افحصوا كل رقم وسعر وتاريخ: هل يظهر بالترتيب الذي كُتب به؟
- اقرؤوا فقرة عربية طويلة بقياس النصّ. إن ضاع السطر عن عينكم فارتفاع السطر ضيّق.
الجوهر
لا شيء من هذا يخصّ جودة الترجمة. فصفحة مترجمة ترجمةً ممتازة، منضّدة بخطّ بديل، بارتفاع سطر لاتيني، وبلافتات «حروف كبيرة» لا تفعل شيئاً — ستبقى تُقرأ كنسخة من الدرجة الثانية عن الإنكليزية.
معاملة العربية كنظام تايبوغرافي من الدرجة الأولى — ارتفاع سطرها الخاص، وقياسها الخاص، وخطّها المُصرَّح به — تكلّف حفنة قواعد CSS إن فعلتم ذلك في البداية. وتكلّف إعادة تصميم إن فعلتموه لاحقاً.