تخطَّ إلى المحتوى
Bahaa Taha — بهاء طه
Swift و SwiftUI10 دقائق قراءة١٬٢١٠ كلمة

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

الحركة فوق الحرف الخطأ، والشدة متراكبة، والسطر أعلى من جيرانه — ثلاثة أسباب كلها في ملف الخط لا في كودك.

Bahaa Taha — بهاء طهMrBebo
تطبيق يعرض نصًا عربيًا مشكّلًا يحتاج خطًا يدعم تموضع الحركات
تطبيق يعرض نصًا عربيًا مشكّلًا يحتاج خطًا يدعم تموضع الحركات

الإجابة المختصرة

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

في هذه الصفحة
  1. لماذا ينكسر التشكيل تحديدًا؟
  2. ما الذي ينكسر أيضًا غير الحركات؟
  3. كيف تختبر خطًا في خمس دقائق؟
  4. من أين تأتي الخطوط، وما الذي يجب فحصه؟
  5. قرارات عملية عند الاختيار
  6. دعم حجم الخط الذي اختاره المستخدم
  7. الخلاصة

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

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

لماذا ينكسر التشكيل تحديدًا؟

ثلاثة أسباب، وكلها في ملف الخط لا في النص.

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

الخط لا يحوي جداول التموضع. رسم الفتحة شيء، ومعرفة أين توضع فوق كل حرف من مئات الأشكال شيء آخر. هذه المعرفة تعيش في جداول داخل الخط، وبدونها تُرسم العلامة في موضع افتراضي واحد لكل الحروف — وهذا سبب «الحركة فوق الحرف الخطأ».

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

النص العربي المشكّل لا يُختبر بالنظر إلى عنوان. يُختبر بفقرة فيها شدة وتنوين ومدّ معًا.

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

ما الذي ينكسر أيضًا غير الحركات؟

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

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

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

كيف تختبر خطًا في خمس دقائق؟

نص واحد يجمع الحالات الصعبة، تعرضه بالخط المرشّح في التطبيق نفسه لا في متصفح:

  1. كلمة بشدة وفتحة معًا: «مُحَمَّد».
  2. تنوين على أشكاله الثلاثة في آخر الكلمة.
  3. مدّ فوق ألف: «آية».
  4. حروف بذيول نازلة: «ج، ح، ع، ق، ي» في سطر واحد لترى القص.
  5. جملة تخلط عربية وإنجليزية وأرقامًا: «حمّل النسخة 2.4 من App Store».
  6. الأوزان كلها: اعرض النص نفسه بالعادي والمتوسط والغامق.

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

التطبيقات ذات المحتوى العربي المشكّل بطبيعته — كتطبيقات الأذكار والقرآن على غرار ذاكرني — تحتاج هذا الاختبار قبل أي قرار تصميمي آخر، لأن التشكيل فيها ليس تحسينًا بل هو المحتوى نفسه.

من أين تأتي الخطوط، وما الذي يجب فحصه؟

المصدر يحدد جودة الدعم أكثر مما يحدده اسم الخط أو شكله في صورة العرض.

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

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

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

خط النظام. خيار افتراضي معقول دائمًا، ولا يُقارَن به شيء من حيث ضمان السلوك.

وثلاثة فحوص عملية قبل الاعتماد، تجريها على ملف الخط نفسه لا على صورته:

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

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

قرارات عملية عند الاختيار

خمسة معايير مرتّبة بحسب أثرها.

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

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

دعم حجم الخط الذي اختاره المستخدم

نقطة تُنسى في التطبيقات العربية أكثر من غيرها، وأثرها كبير.

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

ثلاث نتائج عملية:

استخدم الأنماط النصية المتجاوبة بدل الأحجام الثابتة، ليكبر النص مع إعداد النظام.

اختبر على أكبر حجم متاح، لا على الافتراضي وحده — وهناك تكتشف التداخل والقص.

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

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

مزيد في Swift والبرمجة والموبايل، وتوثيق تخطيط النصوص من آبل يغطي المقاييس والأنماط المتجاوبة.

الخلاصة

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

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

أسئلة شائعة

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

المصادر

  1. Text display and fontsApple Developer
  2. Unicode Arabic ShapingUnicode Consortium
  3. Zakerny: Azkar, Quran & TasbihTecno Blocks
Bahaa Taha — بهاء طه

نشرته

MrBebo

محتوى تقني عربي يقدمه بهاء طه حول البرمجة، الذكاء الاصطناعي، Web2 وWeb3، تطوير التطبيقات، بناء المنتجات وأدوات المطورين.

عن المدوّنة

قراءات ذات صلة

تابع القراءة

تصفّح كل شيء