الهندسة

العربية ليست طبقة ترجمة

قراءة 13 دقائقSiaSol

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

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

  • فهو يغيّر أين تكون الأشياء.
  • ومن أي جانب تنزلق لوحة.
  • وإلى أي جهة يشير سهم.
  • وما تعنيه كلمة «التالي» في سلسلة خطوات.

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

أولًا: الخصائص الفيزيائية في كل مكان

كل `margin-left` و`padding-right` و`left: 0` و`text-align: left` في قاعدة كود هو تصريح سيكون خطأً في الاتجاه الآخر. وهي مئات عادةً، وإصلاحها واحدًا واحدًا بإضافة تجاوز لليمين-لليسار يضاعف حجم ملف الأنماط ويضمن تباعد الاتجاهين مع تغيّر التصميم.

والحلّ التوقّف عن كتابة الخصائص الفيزيائية. فـ`margin-inline-start` تعني «الحافة البادئة في أي اتجاه يُقرأ به هذا العنصر»، فهي هامش أيسر بالإنجليزية وأيمن بالعربية، من تصريح واحد. وينطبق الأمر على `padding-inline` و`inset-inline-start` و`border-inline-end` و`text-align: start`. وبمجرد استخدام قاعدة كود لها باتّساق، تحدث الأغلبية الساحقة من العكس تلقائيًا وتبقى صحيحة عبر تغييرات التصميم اللاحقة.

والترحيل آلي ويستحقّ الأداء قبل كتابة أي عربية إطلاقًا. وفي تيلويند المكافئ استخدام `ms-` و`me-` و`ps-` و`pe-` و`start-`/`end-` بدل `ml-` و`mr-` و`pl-` و`pr-` و`left-`/`right-`، والجزء الصعب الوحيد أن النسخ الفيزيائية تستمرّ في العمل، فلا يفشل شيء بصوت عالٍ حين يضيف أحد واحدة. وقاعدة تدقيق ترفض الأصناف الفيزيائية أرخص دفاع وجدناه.

ثانيًا: التحويلات لا تنعكس

هذا هو ما يصطاد الفرق الدقيقة، لأنه يصمد بلا مساس في ترحيل الخصائص المنطقية. فـ`transform: translateX(-20px)` فيزيائي وسيبقى كذلك — لا مكافئ منطقي له — فكل حركة تنزلق، وكل مسار عرض دوّار، وكل جرار يأتي من الجانب، وكل أثر تحويم يُزيح عنصرًا سيتحرّك في الاتجاه الخطأ بالعربية بينما يبدو التخطيط الساكن مثاليًا.

ولا حلّ تعريفي، فيجب أن يصل الاتجاه إلى كود الحركة. والنمط الذي نستخدمه قراءة الاتجاه مرة وضرب كل إزاحة أفقية فيه: قيمة `dir` تساوي 1 أو -1 يُقاس بها كل `translateX`. وهو ممل قليلًا وموثوق، والانضباط المهمّ ألا يُكتب أي تحويل أفقي في قاعدة الكود بلا ذلك المعامل، لأن الذي ينساه هو ما لا يلحظه أحد شهرًا.

وينطبق الأمر على `transform-origin`. فشريط تقدّم يُمتلئ بـ`scaleX` وأصله على اليسار سيُمتلئ من الطرف الخطأ بالعربية — فالشريط ينمو بعيدًا عن حيث يبدأ القارئ، ما يُقرأ كتفريغ لا امتلاء. ويجب أن يتبع الأصل اتجاه الكتابة، وهذا إصلاح سطر واحد يُفوَّت دائمًا تقريبًا لأن الشريط لا يزال يتحرّك بسلاسة ولا شيء يبدو مكسورًا.

ثالثًا: الأيقونات التي ترمّز اتجاهًا

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

ولا علامة الصحّ ولا عدسة البحث ولا الشعار ولا الساعة — والساعة حالة مثيرة، لأن عقاربها تتحرّك في اتجاه عُرف فيزيائي لا ثقافي. والنهج العملي أن تقرّر لكل أيقونة مرة، وتسجّل القرار في مجموعة الأيقونات نفسها لا في المكوّن، وتقبل أن هذه قائمة يصونها أحد لا قاعدة يكتبها أحد.

الأسهم داخل النصّ

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

رابعًا: الأرقام والتواريخ والمقاطع المختلطة

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

والعلاج عزل المقطع الأجنبي لا مصارعة الخوارزمية. فتغليفه بعنصر له `unicode-bidi: isolate` أو استخدام عنصر `<bdi>` يخبر المتصفّح بمعاملة ذلك الجزء كوحدة مُعتمة، وهو دائمًا تقريبًا ما كان مقصودًا. ويستحقّ هذا الأداء تلقائيًا حيث يظهر محتوى من المستخدم، لأن اسم عميل بالخطّ الآخر هو الحالة الأكثر احتمالًا لإنتاج شيء خطأ ظاهر.

والأرقام قرار منفصل وثقافي لا تقني. فالأرقام العربية-الهندية والغربية كلتاهما عربية صحيحة بحسب المنطقة والسياق، والجواب الصحيح لجمهور معيّن سؤال لذلك الجمهور لا لمهندس. وما يهمّ تقنيًا أن يكون الاختيار قيمة إعداد واحدة لا مئة نداء تنسيق، لأنه سيُعاد النظر فيه.

ما ينكسرلماذا يصمد في المراجعةالحلّ
الهوامش والحشو الفيزيائيةالتخطيط الساكن يبدو سليمًا حتى العكسخصائص منطقية وقاعدة تدقيق
translateX في الحركاتيتحرّك بسلاسة، لكن للخلفمعامل اتجاه 1 أو -1
أصل التحويل في أشرطة التقدّمالشريط يمتلئ من الطرف الخطأالأصل يتبع اتجاه الكتابة
أسهم مكتوبة في النصّالمراجعون يقرأون الكلمات لا الرموزالأسهم أيقونات بعلم انقلاب
أسماء لاتينية داخل نصّ عربيخطأ لبعض المدخلات فقطاعزل المقطع بـ bdi
الظلال والتباعد غير المتناظريبدو خيارًا تصميميًاقرّر هل للضوء جهة

خامسًا: الخطّ غير قابل للتبادل

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

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

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

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

سادسًا: ما لا تصله أي خاصية

قليل من القرارات تحريرية فعلًا ولا تحسمها أي قدر من CSS. فهل يقع الظلّ على الجهة الفيزيائية نفسها في الاتجاهين واحد منها: فللضوء مصدر فيزيائي، فقد يقول مصمّم بحقّ إن الظلّ لا ينعكس، وقد يقول مصمّم آخر بحقّ إن الواجهة يجب أن تكون متناظرة. وكلا الجوابين قابل للدفاع؛ وعدم وجود جواب يعني تباعد الاتجاهين.

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

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

حقول الإدخال والتحديد ومؤشّر الكتابة

إدخال النص هو حيث يتوقّف دعم الاتجاهين عن كونه مسألة تنسيق. فحقلٌ يعرض العربية صحيحةً قد يضع مؤشّر الكتابة في المكان الخطأ بعد علامة ترقيم، أو يحدّد مدًى يبدو منفصلًا، أو يحرّك المؤشّر بالاتجاه الخطأ حين يضغط المستخدم السهم الأيمن — لأن في مقطع مختلط يتفارق الترتيب البصري والترتيب المنطقي، وأسهم لوحة المفاتيح تتبع أحدهما والعين تتبع الآخر.

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

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

البحث يجب أن يُطبّع الحروف

البحث العربي الذي يقارن النصوص بايتًا ببايت سيفوّت معظم ما يكتبه المستخدمون، لأن عدة حروف لها صور يعاملها المستخدمون كشيء واحد.

  • الألف بهمزة وبدونها.
  • وصورتا الياء في آخر الكلمة.
  • والتاء المربوطة مقابل الهاء.

ومن يبحث عن اسم سيكتبه بإحدى ثلاث صور كلها مقبولة ويتوقع أن تجد الثلاثُ السجلَّ، والمقارنة الحرفية تجد واحدة منها.

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

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

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

النص أقصر والأسطر أطول

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

ولهذا يُقاس كلا اللغتين

والنتيجة للعملية ببساطة أن كل فحص تخطيط يعمل مرتين. فقياس لغة المصدر فقط وافتراض حسن سلوك الترجمة هو كيف ينتهي موقع بعنوان عربي يتداخل مع العنصر تحته في نقطة توقّف واحدة — عيبٌ غير مرئي لكل من يعمل بالإنجليزية وبديهي لكل مستخدم لا يعمل بها. ويكلّف تمريرة إضافية على مجموعة الصفحات نفسها ويصطاد صنفًا من الأخطاء لا يصطاده غيره.

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

كيف تختبر الاتجاهين

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

وفحص الفائض يستحقّ وصفًا دقيقًا لأن التنفيذ الواضح خطأ. فالبحث عن عناصر تمتدّ خارج المنفذ يُنتج إيجابيات كاذبة باستمرار، لأن شريطًا متحرّكًا أو مسار عرض يفعل ذلك بالضبط بمشروعية داخل حاوية بـ`overflow: hidden`. والإشارة التي تعني شيئًا فعلًا هي هل يتمرّر المستند نفسه أفقيًا — بمقارنة عرض تمرير العنصر الجذر بعرضه الظاهر — ولا شيء غير ذلك.

  • رحّل للخصائص المنطقية أولًا، بقاعدة تدقيق بعدها.
  • اضرب كل تحويل أفقي في معامل اتجاه.
  • أعطِ أصل التحويل اتجاه الكتابة أيضًا.
  • علّم كل أيقونة بانقلابها أو لا، في مجموعة الأيقونات.
  • اعزل المقاطع الأجنبية بـ bdi حيث تظهر المدخلات.
  • افحص عرض التمرير مقابل الظاهر لا حدود العناصر.

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

أسئلة متكررة

01هل نضيف العربية بلا لمس الأنماط؟

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

02لماذا تنكسر الحركات والتخطيط سليم؟

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

03أي الأيقونات تنعكس؟

التي ترمّز اتجاه القراءة — التالي والرجوع والإزاحة ومحاذاة النصّ — لا التي ترمّز عُرفًا فيزيائيًا أو إعلاميًا كالتشغيل أو الساعة أو الشعار. ولا تُصيب أي قاعدة آلية هذا، فهو قرار لكل أيقونة يُسجّل في مجموعة الأيقونات ويصونه شخص.

04هل تتساوى ارتفاعات الصفحات بالعربية والإنجليزية؟

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

اقرأ أيضًا

هل ترى عملك في هذا؟

غالبًا بنينا ما يشبهه. أخبرنا بما تفعله العملية فعلًا وسنقول لك بوضوح إن كانت البرمجيات هي الحل.

ابدأ محادثة