مقدمة
تعد التعديلات هي أحد عناصر البطل المجهول في رسومات الويب، ولهذا السبب لدينا نص واضح وأشكال متجهات سلسة على شاشاتنا. هناك طريقتان في الواقع تستخدمان لمكافحة التشويش في المتصفحات اليوم، وهي الأكثر وضوحًا في ما يتعلق بعرض النص. عند استخدام الخوارزمية المستخدمة في رصد عمليات التحويل، يمكن أن تؤدي إلى نتائج مرئية غير متوقعة. في هذه المقالة، سنلقي نظرة على أساليب تعديل التشويش ونرى كيفية رسم وحدات البكسل.
تتكون جميع شاشاتنا، كما نعرف جميعًا، من وحدات بكسل. وهي عبارة عن شبكة عملاقة من الكتل، تحتوي كل منها على مكونات حمراء وأخضر وأزرق (RGB). نرى صورًا ونصوصًا ورموزًا عن بُعد، ولكن يمكننا في الواقع رؤية شبكة مكونات نموذج أحمر أخضر أزرق وكيف يتكون كل شيء.
تسوية
إذن ماذا يحدث عندما نرسم شكل متجه ويمر عبر "جزء" من البكسل؟ لنفترض أن الشكل الذي نرسمه أسود والخلفية بيضاء. هل علينا تلوين هذا البكسل على الإطلاق؟ إذا قمنا بتلوينه، فماذا يجب أن يكون؟ أسود أم رمادي أم شيء آخر؟
تحدد عملية إنقاص الحواف اللون الذي يجب أن نستخدمه عند ملء وحدات البكسل. يُعرف أبسط إصدار منه بأنه تنقيح التدرج الرمادي، ويتعامل مع مكونات البكسل الثلاثة بالتساوي. لذا، إذا كان نصف وحدة البكسل مغطى - ولنفترض أن النص الأسود هو اللون الأبيض لمدة ثانية للحفاظ على البساطة - فأنت تعتقد أنه سيتم ضبط كل مكون على نصف درجة السطوع (أعلم بالتأكيد ذلك)، لكن الأمر أكثر تعقيدًا من ذلك: يجب عليك حساب غاما، مما يعني أنك من المحتمل ألا تضبطها على تلك القيمة الدقيقة. وهذا بالطبع يجعل الأمور أصعب، ولكن نظرًا لأن هذه مقدمة عن الموضوع، فلن أتعمق في ذلك هنا. من المهم معرفة أنّ تنقيح التدرج الرمادي يتم التعامل معه على مستوى البكسل، ويمكننا في الواقع تحسين ذلك.
في الشكل 2، يمكنك رؤية المثلث نفسه مرسوم، لكن على الجانب الأيسر، تم تفعيل الانحياز من الجانب الأيمن وتم إيقافه على اليمين. كما ترى، عند تمكين التنقيح، تظهر وحدات البكسل في ظلال رمادية عندما يمرّ المثلث عبر جزء من البكسل فقط. ومع ذلك، عند إيقاف تلك الميزة، يتم ملء وحدة البكسل إما باللون الأسود الخالص أو باللون الأبيض الخالص، ويبدو الشكل مسنّنًا.
عرض النص
عندما يعرض المتصفح نصًا، وهو في الأساس شكل متّجه، سنواجه المشكلة نفسها: فأحرف النص ستملأ بعض وحدات البكسل بشكل جزئي فقط، لذلك سنرغب في وضع استراتيجية لكيفية ملء وحدات البكسل هذه. من الناحية المثالية، نريد تعديل النص لأنه سيسهل قراءته واستمتِع به أكثر.
ومع ذلك، اتضح أن أسلوب التدرج الرمادي لتخفيف التشويش ليس سوى طريقة واحدة لمعالجة هذا الأمر. غالبًا ما يكون النهج الذي يتم اتباعه هو أن تكون أكثر انتقائية بعض الشيء مع كيفية تمكين مكونات RGB بوحدات البكسل. تُسمى هذه العملية "تنقيح وحدات البكسل الفرعية" وعلى مدار السنوات، استثمر فريق ClickType في Microsoft على وجه الخصوص قدرًا كبيرًا من الوقت والجهد لإحراز تقدم. فقد أصبح الآن يُستخدم على نطاق أوسع، وتستخدمه جميع المتصفحات الرئيسية بدرجة أكبر أو أقل.
أولاً، نظرًا لأننا نعلم أن كل وحدة بكسل تتكون في الواقع من مكونات منفصلة باللونين الأحمر والأخضر والأزرق، فإننا نكتشف المقدار المطلوب "تشغيل" لكل من هذه المكونات في وحدة البكسل المعنية. لذلك، إذا كانت وحدة البكسل "نصفها مغطاة" من الجانب الأيسر، يمكننا تشغيل المكون الأحمر بشكل كلي، والجزء الأخضر إلى النصف، ونبقي اللون الأزرق مطفأً. غالبًا ما يتم وصف هذه العملية على أنها "زيادة درجة الدقة الأفقية للشاشة بثلاث مرات"، وتعتمد على حقيقة أن كل وحدة بكسل هي حقًا المكونات الثلاثة المنفصلة جنبًا إلى جنب بدلاً من وحدة واحدة.
في الشكل 3 أعلاه، يمكنك ملاحظة أنّه على يمين الصفحة، نتعامل مع كل مكوّن بالتساوي، ويتم تفعيل كل مكوّن أو إيقافه بالتساوي (تدرّج الرمادي). على الجانب الأيسر، نستخدم نهج البكسل الفرعي، مع تمكين كل مكون (الأحمر والأخضر والأزرق) بشكل مختلف اعتمادًا على مدى تداخله مع الشكل المرسوم.
مع ذلك، لا تزن الرؤية البشرية في الواقع الضوء الأحمر والأخضر والأزرق بالتساوي. إنّ حساسية اللون الأخضر أكثر حساسية من اللون الأحمر أو الأزرق، وهذا يعني أنّه على الرغم من أنّ هناك فائدة واضحة على صقل التدرج الرمادي، كما لاحظ "داريل ريكس فينلي"، فإنّ تفعيل كل مكوّن على حدة لن يؤدي في الواقع إلى زيادة الوضوح بمقدار 3 مرات. على الرغم من ذلك، يعد تنقيح وحدات البكسل الفرعية مفيدًا بالتأكيد، وهذا يعني أننا نرى النص بشكل أكثر وضوحًا مما لو تم استخدام تنقيح التدرج الرمادي.
الانتقال إلى المطاردة
ما أهمية ذلك لنا كمطوّرين؟ حسنًا، من منظور Chrome، على الأقل، هناك مزيج من كل من تدرج الرمادي ووحدات البكسل الفرعية لعرض النص، وتعتمد الطريقة التي تحصل عليها على عدة معايير. لكن في البداية، نحتاج إلى فهم القليل عن الطبقات، بما أن هذا هو المعيار الرئيسي في الأساس. إذا لم تصادف الطبقات وكيفية استخدامها داخليًا في Chrome، فقد كتب "توم ويلتزيوس" مقدمة رائعة عن الموضوع، عليك قراءتها أولاً.
بافتراض أنك على دراية بالطبقات، أو أنك قد قرأت عنها للتو، فلنواصل. إذا تم تفعيل تركيب الأجهزة للصفحة، وكان لديك محتوى نصي على طبقة ليست الطبقة الجذر، فسيتم تلقائيًا عرضه باستخدام تنقيح تدرّج الرمادي. يلاحظ المطوّرون غالبًا أنه في حال استخدام أساليب مخترَقة على عناصر لنقلها إلى طبقات خاصة بهم (مثل استخدام translateZ)، سيلاحظون عرض النص بشكل مختلف. في كثير من الأحيان، يطبق المطورون مشغلات "طبقة جديدة" بسرعة من خلال JavaScript أو CSS مما يؤدي إلى تبديل عرض النص من وحدات البكسل الفرعية إلى التدرج الرمادي، وقد يكون ذلك محيرًا إذا كنت لا تعرف سبب تغيير العرض. ومع ذلك، إذا كان النص موجودًا في الطبقة الجذر، فيجب عرضه مع تنقيح وحدات البكسل الفرعية، وبالتالي سيكون أكثر وضوحًا في القراءة.
ولكن مثلما الحال مع كل ما يتعلق بالويب، يتغير باستمرار. يتم تفعيل تنقيح وحدات البكسل الفرعية في Chrome للنص في الطبقات غير الجذر، بشرط أن تستوفي الطبقة ثلاثة معايير. تجدر الإشارة إلى أنّ هذه المعايير تنطبق اليوم، ولكن من المحتمل أن تتغيّر ومن المفترض أن تتم تغطية المزيد من الحالات بمرور الوقت. في ما يلي هذه المعايير:
- تحتوي الطبقة على لون خلفية معتم بالكامل. وبشكل ملحوظ، يؤدي استخدام قيمة
border-radiusأو قيمةbackground-clipغير تلقائية إلى التعامل مع الطبقة على أنّها غير معتمة، كما أنّ عرض النص يعود إلى تنقيح تدرّج الرمادي. - يمكن تطبيق تحويل الهوية أو الترجمة المتكاملة على الطبقة فقط. ونعني بالتكامل القيم المستديرة. على سبيل المثال، قد ينتج عن
translate(20.2px, 30px)تنقيح التدرج الرمادي لأنّ المكوِّن x،20.2px، ليس عددًا صحيحًا. فتحويل الهوية يعني ببساطة عدم تطبيق أي تغيير أو ترجمة أو قياس إضافي خارج نطاق الإعدادات التلقائية. - تبلغ تعتيم الطبقة 1.0. سيؤدي أي تغيير في التعتيم إلى تغيير التنقيح من وحدة البكسل الفرعية إلى التدرج الرمادي.
يُرجى العِلم أنّ تطبيق صورة CSS متحرّكة قد يؤدي إلى إنشاء طبقة جديدة، بينما لا يؤدي استخدام requestAnimationFrame إلى إنشاء طبقة جديدة. بالنسبة إلى بعض المطوّرين، فإنّ الاختلافات في عرض النص التي تدل على استخدام الصور المتحركة في CSS لم تعد مُستبعدة. لذلك، إذا كنت تستخدم JavaScript لتحريك العناصر بسبب الاختلافات في عرض النص، تحقّق لترى ما إذا كان هذا التحديث سيحل المشاكل من أجلك!
وهذا كل ما في الأمر أنّ Chrome. بالنسبة إلى المتصفّحات الأخرى، يجب أن يتطابق Opera مع سلوكيات Chrome إلى حدّ كبير أثناء انتقاله إلى Chromium. يبدو أن Internet Explorer يستخدم تنقيح وحدات البكسل الفرعية لجميع النصوص تقريبًا (في حالة تمكين ClickType بالطبع)، على الرغم من أنه يبدو أنه ليس في وضع Metro في Windows 8. يعمل Safari، نظرًا لقرب WebKit من Blink، بشكل مشابه جدًا لمتصفح Chrome، رغم أنه بدون هذه التحسينات الحديثة التي تسمح بمزيد من تنقيح وحدات البكسل الفرعية. يعمل فايرفوكس إلى حد كبير بنفس طريقة Internet Explorer إلى حد أنه يستخدم تنقيح وحدات البكسل الفرعية لجميع النصوص تقريبًا. بالطبع، هذه ليست قائمة شاملة، ومن المحتمل أن تكون هناك حالات في جميع المتصفحات يتم فيها استخدام تخفيف تدرّج الرمادي بدلاً من وحدات البكسل الفرعية، ولكن من الجيد معرفة أن تنقيح وحدات البكسل الفرعية يتم استخدامه على نطاق واسع في المجموعة الرئيسية من المتصفحات.
الخلاصة
أصبحت الآن تعرف قليلاً عن آلية عمل تخفيف التشويش ولماذا قد ترى اختلافات في عرض النص في مواقعك الإلكترونية وتطبيقاتك اليوم، وخاصةً على الأجهزة ذات عدد النقاط لكل بوصة (DPI) السفلي. إذا كنت مهتمًا بالمتابعة إلى جانب تنفيذ Chrome في ما يتعلق بعرض النص، يجب تمييز الأخطاء التالية بنجمة:
- تمنع الأسماء المستعارة للخطوط الرمادية تلقائيًا فوق 48 بكسل ولا يمكن تجاوزها
- عرض الخطوط الشديد باستخدام خطوط الويب من Google على Chrome لنظام التشغيل Windows)
- دعم DirectWrite