‏font-display: ما تفعله حقًّا القيم swap وblock وfallback وoptional

ما الذي يتحكم فيه font-display

خط الويب يستغرق وقتًا حتى يصل، والمتصفح مضطرٌّ إلى رسم النص قبل ذلك. و‏font-display هو الواصف الذي يوضع داخل قاعدة ‎@font-face ليقرر ما يجري في تلك الأثناء: أن يُحبَس النص حتى يجهز الخط، أو يُعرَض فورًا بخط احتياطي ثم يُستبدَل، أو يُصرَف النظر عن الخط إن طال انتظاره. والقيم خمس: auto وblock وswap وfallback وoptional، والقيمة الابتدائية auto.

وتحت ذلك تصف المواصفة مؤقّت تنزيل يمرّ بثلاث مُدد. ففي مدة الحجب يجب أن يُرسم العنصر المستعمِل للخط بوجه احتياطي غير مرئي. وفي مدة الاستبدال يُرسم بخط احتياطي عادي. فإذا بدأت مدة الإخفاق عُدّ التنزيل غير المكتمل فاشلًا وطُبّق التراجع المعتاد إلى الأبد. وليست كل قيمة من قيم font-display إلا اختيارًا لطول المدّتين الأوليين.

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

كيف تستعمله

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

كل رقم في الجدول المتداوَل توصية

ابحث عن font-display تجد الجدول نفسه في كل مكان، وفيه 3s و100ms كأنهما ثابتان. وليسا كذلك، والمواصفة حريصة على قول ذلك حرصًا لافتًا. فـblock يعطي مدة حجب قصيرة، و3s موصى بها في أكثر الحالات. وswap يعطي مدة حجب بالغة الصغر، و100ms أو أقلّ موصى بها في أكثر الحالات. وfallback يجمع بينهما. وهذان هما الرقمان الوحيدان في الواصف كله، وكلاهما مقيَّد بالعبارة نفسها.

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

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

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

‏optional بلا مُدد أصلًا

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

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

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

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

ما لا تخبرك به هذه الصفحة

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

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

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

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

لماذا هو مجاني؟

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

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