هندسة

خطوط عربية أخف دون أن ينكسر حرف واحد

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

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

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

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

لذلك جعلنا الفحص آلياً. كل نص يعرضه الموقع، بالعربية والإنجليزية، يمر عبر HarfBuzz، وهو محرك التشكيل نفسه الذي يستخدمه Chrome وFirefox وAndroid، مرتين: مرة بالخط الأصلي ومرة بالخط المقلّص. ويجب أن تتطابق الحروف وعروضها ومواضعها تماماً. وإذا اختلف نص واحد فقط يبقى الملف الأصلي كما هو ويفشل التشغيل. في موقعنا يبلغ ذلك نحو 1,800 نص.

نشرنا الأداة برخصة MIT على github.com/Revaluar/arabic-webfont-subset. وهي تعمل مع أي خط وليس العربي فقط، وتقرأ النصوص مباشرة من ملفات الكود. وتنبيهان قبل استخدامها: الفحص جيد بقدر النصوص التي تعطيه إياها، فأضف أمثلة لأي محتوى يولّده موقعك أثناء التشغيل، وتحقق من رخصة خطك، لأن بعض الرخص لا تسمح بالتقليص.

كل المقالات

لنحدّد نطاق مشروعك.

أخبرنا كيف تحتاج أن يعمل نشاطك. سنرسل لك عرض سعرٍ واضحًا دون أي التزام.