FlowingDev

شرح الخطوط: تفكيك السوفتوير الصغير اللي بيرسم كلماتنا

تعرف على تشريح الخطوط الرقمية، من TTF و WOFF2 إلى المحاور المتغيرة (variable axes)، واكتشف كيف بتشكل الـ glyphs والـ kerning والميتا داتا شكل التيبوجرافي على الويب.

جرّب الأداة: مفتش الخطوط وعارض الـ Glyph

في جملة واحدة

الخطوط الرقمية مش مجرد مجموعة صور صغيرة؛ دي عبارة عن حزم سوفتوير معقدة وقابلة للتنفيذ (executable) مليانة حسابات فيكتور (vector math)، وكلام قانوني عن حقوق النشر، وقواعد استبدال مخفية.

المشكلة اللي بيحلها

لو فكرت فيها، الحروف دي مفهوم نسبي جداً. لما الكمبيوتر بيشوف تسلسل البايت 0x41، هو عارف إن ده معناه حرف الـ "A". بس شكل الـ "A" ده عامل إزاي؟ هل فيه زوائد (serifs)؟ هل هو تخين؟ هل هو مايل؟

قبل الشاشات الرقمية، التيبوجرافي (typography) كان حرفي. المطابع كانت بترص قوالب رصاص حقيقية. ولما دخلنا العصر الرقمي، احتجنا طريقة نقول بيها للبيكسلات إزاي ترسم الأشكال دي. في البداية، استخدمنا خطوط الـ bitmap—عبارة عن شبكات بيكسلات حرفية—بس كانت بتبان زي السلالم المكسرة أول ما تحاول تكبر حجمها.

في أواخر التمانينات وأوائل التسعينات، أبل ومايكروسوفت اتحدوا عشان يعملوا TrueType (TTF) عشان ينافسوا صيغة PostScript (Type 1) الخاصة بـ Adobe. وده ولّع "حرب الخطوط". الحل اللي اتفقوا عليه في النهاية كان OpenType (OTF)، ودي صيغة دمجت الطريقتين مع بعض. وبعدين، عشان نخلي الملفات دي خفيفة ومناسبة للويب، ضغطناها لصيغ WOFF و WOFF2.

المشكلة اللي بتواجه المطورين النهاردة هي إن الخطوط بتتعامل كأنها صناديق سوداء (black boxes). إنت بتكتب font-family: 'Inter'; في الـ CSS بتاعك، بس إنت كده طاير عالعمياني. هل الملف ده فعلاً جواه حروف سيريلية (Cyrillic)؟ هل الرخصة بتاعته بتسمح إنك تدمجه في تطبيق تجاري؟ هل بيدعم محاور الخطوط المتغيرة (variable font axes) الحديثة، ولا إنت بس بتعمل weight تقيل (bold) وهمي بالـ CSS؟ عشان تجاوب على الأسئلة دي، إنت محتاج جهاز أشعة إكس عشان تبص جوه ملف الخط نفسه، وتفك الميتا داتا (metadata) بتاعته، وتفحص هندسته الداخلية.

إزاي بيشتغل تحت الكبوت

ملف الخط الحديث (سواء كان TTF أو OTF أو WOFF2) هو في الأساس قاعدة بيانات علائقية (relational database) باينري (binary) ومُحسنة جداً. الملف ده مبني على حاوية بصيغة SFNT، اللي بتنظم الداتا في "جداول" (tables) منفصلة، كل جدول ليه tag من 4 حروف بيميزه.

تشريح خط الـ OpenType

لما الـ font inspector بيحلل (parses) الملف، بيقرا directory مركزي عشان يحدد مكان الجداول دي بالظبط:

الـ Tag الاسم بيعمل إيه
cmap ربط الحرف بالـ Glyph ده المترجم. بيربط قيمة الـ Unicode (زي U+0041 لحرف "A") بـ Glyph ID داخلي معين.
glyf بيانات الـ Glyph دي حدود الفيكتور (vector outlines) الفعلية اللي بتُستخدم في خطوط TrueType (منحنيات بيزييه التربيعية - quadratic Bézier curves).
CFF صيغة الخط المضغوطة دي حدود الفيكتور المستخدمة في خطوط OpenType بنكهة PostScript (منحنيات بيزييه التكعيبية - cubic Bézier curves).
name جدول التسمية دي الميتا داتا: عائلة الخط، المصمم، حقوق النشر، ولينكات الرخص.
kern الـ Kerning قواعد المسافات بين أزواج معينة من الحروف (زي إنك تدخل حرف 'o' سمول تحت حرف 'T' كابيتال).
GSUB استبدال الـ Glyph قواعد تيبوجرافي متقدمة، زي دمج حرف الـ 'f' والـ 'i' عشان يبقوا ligature واحد 'fi'.

الحروف (Characters) مقابل الـ Glyphs

أهم مفهوم أساسي لازم تفهمه هو الفرق بين الحروف (characters) والـ glyphs.

  • الحرف هو مفهوم دلالي (Unicode). يعني "فكرة حرف الـ g السمول".
  • الـ glyph هو رسمة. ده شكل الفيكتور المحدد المتخزن في الخط.

ممكن حرف واحد يتربط بـ glyphs كتير (زي الـ 'g' العادية والـ 'g' المزخرفة). والعكس صحيح، ممكن حروف كتير تتربط بـ glyph واحد (زي لما بنستبدل الحروف f و i بـ ligature glyph واحد fi). جداول الـ cmap و الـ GSUB هي اللي بتدير عملية التوجيه المعقدة دي جداً.

الخطوط المتغيرة (Variable Fonts)

زمان، لو كنت عايز تستخدم خط Regular و Bold و Italic، كان لازم تحمل تلات ملفات منفصلة. الخطوط المتغيرة (Variable Fonts)، اللي نزلت كإضافة للـ OpenType سنة 2016، غيرت اللعبة تماماً.

بدل ما يكون فيه حدود (outlines) ثابتة، الخط المتغير بيخزن master outline ومجموعة من الـ deltas الرياضية (في جداول fvar و gvar). الـ deltas دي بتحدد "مساحة تصميم" (design space) قابلة للاستيفاء الداخلي (interpolation) على محاور (axes) مختلفة.

الخمس محاور القياسية هما:

  • wght: الوزن (من Thin لـ Black)
  • wdth: العرض (من Condensed لـ Expanded)
  • ital: المايل (On أو Off)
  • slnt: الميل (زاوية الحروف)
  • opsz: الحجم البصري (تعديل الأشكال بناءً على حجم عرض الخط)

في الـ CSS، الربط بمحور خط متغير بيكون شكله كده:

/* Setting a custom weight of 430 and a slight slant */
h1 {
  font-family: 'MyVariableFont', sans-serif;
  font-variation-settings: 'wght' 430, 'slnt' -5;
}

ضغط الويب (WOFF2)

صيغة WOFF2 (Web Open Font Format 2) مش نوع خط جديد جذرياً؛ دي مجرد غلاف ضغط (compression wrapper) حوالين ملف TTF أو OTF. بتستخدم خوارزمية ضغط Brotli، متظبطة مخصوص عشان تفهم هيكل جدول الـ SFNT، وده بيخلي حجم الملفات أصغر بحوالي 30% من الـ WOFF الأصلي. لما المتصفح بيعمل داونلود لملف WOFF2، بيفك ضغطه في صمت في الميموري لخط OpenType قياسي قبل ما يسلمه لمحرك الجرافيكس (graphics engine).

حواديت من أرض الواقع

تخريب الحروف السيريلية الخفي

كان فيه frontend developer مطلوب منه يبني موقع تسويق عالمي باستخدام خط open-source تريندي. كل حاجة كانت طالعة pixel-perfect في الإنجليزي والإسباني. لكن، لما فريق اللوكالايزشن (localization) حط المحتوى الروسي في الـ CMS، الخط الـ sans-serif الجميل قلب فجأة لخط Times New Roman بشع ومن غير أي ستايل (fallback).

الديفلوبر كان فاكر إن طالما الخط "حديث"، يبقى أكيد بيدعم كل اللغات الأساسية. بس لما فحص جدول الـ cmap اكتشف الحقيقة المرة: الخط مكنش فيه غير حروف الـ ASCII والـ Latin الأساسية. بلوكات الـ Cyrillic Unicode كانت فاضية تماماً. الدرس؟ إياك تثق ثقة عمياء في دعم الخط للغات من غير ما تتأكد بنفسك من تغطية الـ glyphs بتاعته.

الغلطة الـ 3 ميجابايت

وكالة تصميم سلمت مشروع ويب طموح فيه تسع أوزان مختلفة لخط براند مخصص (من Hairline لحد UltraBlack). الديفلوبر بكل اجتهاد حمل التسع ملفات .ttf في الـ CSS. النتيجة كانت بي لود (payload) كارثي حجمه 3 ميجابايت للخطوط بس، وده عمل تأخير رهيب في الريندر (rendering) على شبكات الموبايل.

ولما الديفلوبر فحص السورس بتاع الـ font family، اكتشف نسخة خط متغير (variable font) واحدة (.woff2) لنفس الخط. وبتبديل التسع ملفات الثابتة بخط متغير واحد، قدروا يقللوا الـ payload لـ 120 كيلوبايت. مش بس الأداء ضرب في السما، دول كمان قدروا يعملوا أنيميشن ناعم لمحور الـ wght في حالات الـ hover.

كلام قانوني شبه رسايل الفدية

ستارت آب (startup) كانت مستعجلة عشان تطلق تطبيق الـ iOS الجديد بتاعها. مصمم الـ UI جاب خط "مجاني" من بلوج تيبوجرافي عشوائية عشان يستخدمه في الزراير الأساسية. قبل يومين من رفع الأبلكيشن على الـ App Store، مهندس senior قرر يلقي نظرة على الميتا داتا (metadata) بتاعة الخط.

جوه جدول الـ name، زي عين الشمس، كان فيه string بيمنع صراحةً دمج الخط في تطبيقات الموبايل المجمعة (compiled) من غير رخصة تجارية تمنها 5,000 دولار. اكتشاف الـ EULA (اتفاقية ترخيص المستخدم النهائي) المدفونة دي أنقذ الستارت آب من قضايا حقوق نشر محتملة ومن إن الأبلكيشن يتشال بالعافية. الخطوط دي سوفتوير، وبتحمل معاها أمتعتها القانونية جوه الباينريز (binaries) بتاعتها.

غلطات شائعة وفخاخ

  • الفبركة في الـ bold والـ italic: لو طبقت font-weight: bold; أو font-style: italic; في الـ CSS، بس إنت فعلياً محملتش ملفات الخط للـ bold أو الـ italic، المتصفح هيشوه أو يميل الخط العادي بشكل اصطناعي. الـ "faux-bolding" ده بيدمر أشكال الفيكتور اللي المصمم تعب فيها وبيخلي شكلها بشع.
  • تجاهل الرخصة: مجرد إنك تقدر تعمل داونلود لملف .ttf ده مش معناه إن ليك الحق ترفعه على الويب أو تدمجه في أبلكيشن. دايماً اقرأ الميتا داتا.
  • شحن subsets منفوخة: خطوط كتير مشهورة بيبقى فيها آلاف الـ glyphs للغات ممكن متستخدمهاش أبداً. إنك تبعت ملف خط حجمه 400 كيلوبايت وإنت مش محتاج غير حروف إنجليزي ده تضييع كبير للـ bandwidth. المفروض تفحص الخط عشان تشوف حجم النفخة دي، وبعدين تستخدم أداة subsetting عشان تشيل الـ glyphs اللي ملهاش لازمة.
  • افتراض إن ميزات OpenType متفعلة افتراضياً: خطوط كتير فيها ligatures جميلة، وستايلات حروف بديلة، أو أرقام مجدولة (tabular numbers - بحيث كل رقم بياخد نفس العرض بالظبط، ودي ممتازة لجداول الأسعار). بس دي غالباً بتكون مستخبية ورا OpenType tags زي liga أو tnum. لو مفحصتش الخط عشان تعرف إنهم موجودين، مش هتعرف تفعلهم باستخدام font-feature-settings في الـ CSS.

ليه لازم يكون على الرادار بتاعك

التيبوجرافي (Typography) هو الكور (core) الأساسي للويب؛ لحد 90% من تصميم أي موقع عادي بيكون مجرد نص. كديفلوبر، إنك تتعامل مع الخطوط على إنها تراب سحري لتزيين النصوص دي وصفة سريعة لمشاكل في الأداء وبجات (bugs) في الـ layout.

إنت محتاج تفكر في فحص الخطوط (font inspection) كل ما تيجي تعمل optimize لأداء الويب. ملفات الخطوط الكبيرة بتعمل Cumulative Layout Shift (CLS) والظاهرة المرعبة بتاعة Flash of Unstyled Text (FOUT). لما تبص تحت الكبوت، هتقدر تتأكد إذا كان الخط مضغوط صح (WOFF2)، وتحدد لو ممكن يتعمله subsetting، أو تشوف لو ينفع يتبدل بالكامل بخط متغير (variable font). كمان، أي وقت تدخل فيه عالم الـ internationalization (i18n)، لازم تكون قادر تراجع جدول الـ glyph بتاع الخط عشان تتأكد إن اللغات اللي بتستهدفها هتتعرض (render) فعلاً.

احترافك للمنطق الداخلي للخطوط بيرفعك من مجرد شخص بيكتب font-family لشخص فاهم بعمق إزاي المتصفح بيرسم (paints) أهم محتوى على الشاشة.

اتعمق أكتر

انتهينا من النظرية. حان وقت التطبيق — 100% في متصفحك.

جرّب الأداة: مفتش الخطوط وعارض الـ Glyph