خطوط صغيرة ومتّجهات ألوانًا سهلة الضغط مع عرض كل خياراتك المفضَّلة بنكهات متدرجة
في Chrome 98، أضاف فريقا Chrome وFonts دعمًا لـ COLRv1، تطور تنسيق خط COLRv0 الذي يهدف إلى انتشار الخطوط الملونة من خلال إضافة التدرجات والتركيب والمزج وتحسين إعادة استخدام الأشكال الداخلية للحصول على ملفات خطوط واضحة وصغيرة يتم ضغطها جيدًا.
التلوين الآن
على الويب، يتم رسم النص بشكل عام بلون محدد في CSS. الخط يفعل
تحدد أي لون معين، فإنها تشير فقط إلى مكان وجود وحدات البكسل
. وعادةً ما يكون هذا شيئًا جيدًا. تتيح CSS للمؤلف اختيار
اللون. ومع ذلك، في بعض الأحيان يحتوي الحرف الرسومي على ألوان متعددة تحتوي معًا
المعنى. على سبيل المثال، لن يكون لهذه العلامة 
ذات الخطوط باللون الأزرق الفاتح والوردي والأبيض
وأن ينقل المعنى نفسه إذا كان رسمًا ببساطة بلون النص الحالي.
اليوم، بالنسبة لمعظم المستخدمين، تعد الرموز التعبيرية هي الخطوط الملونة الوحيدة التي يرونها. الرموز التعبيرية
عادةً ما تظهر على الويب من خلال خط الرموز التعبيرية للنظام أو من خلال إدراج صور
(لها مضاعفات خاصة بها، وهي "
"). ملف كبير
وخاصةً مع الخطوط الملونة القائمة على الصور النقطية، مما جعل من الصعب استخدام صور الويب
والخطوط لكتابة الرموز التعبيرية. ونأمل من خلال دعم COLRv1، أن نرى انتشارًا
استخدام خطوط الألوان الإبداعية على الويب وخارجه.
عرض ألوانك
لقد أنشأنا بعض الأمثلة التي يمكنك استخدامها:
تتوفّر أمثلة مواد العرض من Google Fonts المستخدَمة في المثال في واجهة برمجة تطبيقات الويب Google Fonts: وهي وغير مُدرجة في الدليل على fonts.google.com باسم لن تعمل إلا على الإصدار 98 من Chrome أو الإصدارات الأحدث وتعرض الأعمال التجريبية.
يمكنك الآن إنشاء خطوط COLRv1 الخاصة بك باستخدام أدوات مجانية ومفتوحة المصدر. التحقُّق من الإجابة مجمِّع خطوط nanoemoji يتيح لك إنشاء خطوط COLRv1 من صور SVG المصدر، ثم تجربتها الإصدار 98 من Chrome أو إصدار أحدث جرِّب إضفاء لمستك الخاصة على لعبة Bungee Spice من خلال تغيير ألوان التدرج باستخدام هذه التعليمات.
على سبيل المثال، يمكنك تعديل خط Bungee Spice للحصول على تدرج أزرق وأحمر، كما يلي:
يمكنك إرسال تغريدة إلى @googlefonts 🙂 لما لا تجرّب تدرج الشعاع أو السحب؟
جديد مع COLRv1
يدعم تنسيق الخط عدة طرق لدعم الألوان، وكل ذلك من خلال المفاضلات، ولكن لم ينجح أي منها على الويب حتى الآن. (لمزيد من المعلومات حول المفاضلات، ألقِ نظرة على الكلمة في مؤتمر BlinkOn 15 التابع لـ Dominik.) يتوافق Chrome 98 مع COLRv1، وهو نسخة متطوّرة من COLRv0. نأمل أن بفضل مزيج COLRv1 من الإمكانات الرسومية والملفات المضغوطة، ستكون اختيار جيد للعديد من حالات استخدام خطوط الألوان. COLRv1 يضيف تدرجات، والتوليف والدمج، كما يؤدي إلى تحسين إعادة استخدام الشكل الداخلي لإنشاء ملفات أكثر إحكاما.
يتمتع COLRv1 بقدرة معبرة تعادل تقريبًا SVG Native بالإضافة إلى تمت إضافة المزج والتركيب في الأعلى. هناك أربعة أنواع من تعبئة الألوان: الألوان الخالصة، والتدرجات الخطية، والنصف القطرية والتدرجات والتدرجات الانحدارية/المخروطية. يتيح لك COLRv1 إعادة ضبط الموضع وتحويل عناصر رسومية باستخدام مجموعة كاملة من الترجمة والتدوير والشفافية والمقياس والتحولات. بالإضافة إلى ذلك، تتيح اللوحة استخدام تباينات الخطوط وإعادة استخدامها. تنسيقات تعريف الشكل الحالية في الخط.
فكر في الرموز التعبيرية البلورة السحرية كمثال: النقاط البارزة على شكل نجمة هي بنفس الشكل ولكن بأحجام مختلفة، مما يعني أنه يمكن إنشاء شكل واحد فقط إعادة وضعه وإعادة استخدامه بدون تكرار داخل الملف. يسمح التنسيق إعادة استخدام حرف رسومي كامل داخل حرف رسومي جديد، دون الحاجة إلى التكرار لترميز نفس الأشكال لكل حرف رسومي. تخيل خط لون مزخرف مع الزخارف من الزهور، حيث نضع أشكال الزهور نفسها على أحرف مختلفة من خلال الإشارة فقط إلى الأشكال الرسومية للألوان الحالية. بالنسبة إلى حالة استخدام خط الويب، COLRv1 بشكل جيد تحت woff2. على سبيل المثال، إصدار تجريبي من Twemoji باستخدام COLRv1 يستغرق تضخيمها بمقدار 1.2 ميغابايت، ولكنه حوالي 0.6 ميغابايت في شكل woff2. أحد إصدارَي تم تقليل مجموعة Noto Emoji Glyph الكاملة من 9 ميغابايت لإصدار الصورة النقطية إلى 1.85 ميغابايت. في شكل COLRv1+woff2.
حالات استخدام خطوط الألوان
عناوين رئيسية جاذبة
يتميّز الخط الجديد بلون جديد، فيجعل الإشعارات المرئية والعناوين وإعلانات البانر بارزة جدًا. .
لن يتم استبدال الصور بعد الآن: خطوط الرموز التعبيرية
إذا كنت توفّر المحتوى من إنشاء المستخدمين، من المرجّح أن يستخدم المستخدمون الرموز التعبيرية. النَّهَارْدَهْ من الشائع جدًا مسح النص ضوئيًا واستبدال أي رموز تعبيرية ضمان العرض المتسق من عدّة منصات والقدرة على دعم محتوى أحدث والرموز التعبيرية عما يدعمه نظام التشغيل. يجب بعد ذلك تبديل هذه الصور إلى النص أثناء عمليات الحافظة. إليك مثال حقيقي:
إذا كان لديك خط للرموز التعبيرية، فما عليك سوى عرض النص بالخط، على النحو التالي:
<style>
@import url(https://fonts.googleapis.com/css2?family=Noto+Color+Emoji);
.emoji {
font-family: "Noto Color Emoji", sans-serif;
}
</style>
<span class="emoji">🙂</span>
وبالمثل، في مكوِّن التفاعلات باستخدام الرموز التعبيرية، يوفر COLRv1 فرصة استخدام ملف خط مضغوط بدلاً من كتالوج يحتوي على أصول الصور.
تخيّل عدد الصور التي عليك جلبها من أجل أداة اختيار الرموز التعبيرية الكاملة.
استخدام الألوان في خطوط الرموز
يضيف استخدام الألوان في خطوط الأيقونات الوضوح ويجعل الرموز الرسومية أسهل في الفهم.
تعبير فني
تتيح الخطوط اللونية الموفرة للمساحة أشكالاً جديدة من التعبير الفني في النص على على الويب. هذا المثال للخط العربي بالنمط الكوفي يستخدم تدرجات اللون أي تفسير فني لما يمكن أن يؤديه تدفق الحبر في فن الخط التقليدي عند تطبيقها على أسلوب الكتابة العربية، والذي نشأ فحتى لا يُكتب بالمنحوت والحبر بل بالأحجار المحفورة في الصخر.
رصد الميزات
في الوقت الحالي، معرفة ما إذا كان محرك المتصفح يدعم لونًا معينًا ويكون تنسيق الخط ممكنًا عن طريق استخلاص وكيل المستخدم أو البحث باستخدام مكتبة مثل ChromaCheck من @PixelAmbacht لاختبار عرض الألوان الأحرف الرسومية على لوحة الرسم. كلا الحلين ليسا مثاليين. يجب أن يرصد اختبار الميزات ميزة محددة فقط بحد ذاتها وتجنب سرقة وكيل المستخدم. أداة ChromaCheck لا تحتاج المكتبة إلى إجراء عمليات رسم ثنائي الأبعاد تستهلك قدرًا كبيرًا من الموارد وتحديد الدعم.
يريد فريق Chrome تحسين ذلك وقد بدأ سلسلة من المناقشات [1، 2] في مجموعة العمل الخاصة بخدمة مقارنة الأسعار (CSS) إلى توفير معلومات حول دعم تقنية خطوط المتصفح في لغة JavaScript بشكل صريح في CSS. يخطط الفريق لإصدار اكتشاف فعال للميزات خطوط الألوان وتقنيات الخطوط الأخرى في إصدار مستقبلي من Chrome.
إذا كنت ترغب في استخدام الخطوط الملونة في مشروعك الآن عند COLRv1 الدعم مقتصر على Chrome، فهناك طريقتان لإجراء ذلك: سؤال الخط لخط COLRv1 يحتوي على رموز رسومية أحادية اللون أيضًا. برامج وكيل المستخدم التي لا تتوافق مع COLRv1 سيعود إلى العرض الأحادي اللون الأحرف الرسومية. بدلاً من ذلك، يمكنك استخدام مكتبة ChromaCheck أو وكيل المستخدم لتحديد ما إذا كان دعم COLRv1 متاحًا أم لا. بعد ذلك، توفّر CSS تحمِّل خطوط COLRv1 عند دعم برامج وكيل المستخدم وتستخدم خطًا بديلاً مثل COLRv0 أو تنسيق خط صورة نقطية أو OpenType SVG في متصفحات أخرى.
دعم لوحة خطوط CSS
سيكون مفيدًا للغاية إذا لم يكن استخدام مجموعة مختلفة من الألوان تتطلب خطًا جديدًا. لحسن الحظ، توجد آلية: خاصية CSS للوحة الخطوط. تشير رسالة الأشكال البيانية يعمل فريق Chrome على إضافة لوحات الخطوط في Chrome
خطوط COLRv1 CANNOT TRANSLATE
إذا جذبت خطوط COLRv1 اهتمامك، اسأل بائع الخطوط عن لون COLRv1 الخط لاستخدامه في مشروعك، جرِّب الأمثلة والعروض التوضيحية أعلاه، أو لماذا لا تتعمق مباشرةً في التجربة إذا أردت إعداد فيديو خاص بك؟
إذا كانت لديك ملاحظات حول COLRv1 في Chrome، يمكنك نشرها على القائمة البريدية لشركة blink-dev أو الإبلاغ عن مشكلة من خلال أداة تتبُّع المشاكل. إذا كانت لديك ملاحظات على تنسيق خط COLRv1 نفسه، فأبلغ عن مشكلة في مستودع GitHub لمواصفات COLRv1.
في الإصدار 98 من Chrome، يسعدنا معرفة كيف يجلب COLRv1 مستوى جديدًا تمامًا من الإبداع الطباعي على الويب.
مزيد من المعلومات
إذا كنت مهتمًا بالحصول على مزيد من التفاصيل، يمكنك الاستعانة ببعض المراجع الإضافية:
لمعرفة طريقة عمل COLRv1 وكيفية تنفيذه في Chrome، يمكنك الاطلاع على حديث مؤتمر BlinkOn 15 من Dominik.
- مؤتمر يونيكود الدولي رقم 45: خطوط الألوان المتجهة، حديث رودريك شيتر وبيتر كونستابل ودومينيك روتشس (فيديو، تفاصيل الحديث)
- محول خط nanoemoji، وهو إنتاج خطوط COLRv1 من صور SVG
- Google Fonts مستودع GitHub لخطوط الألوان يحتوي على الإصدارات الحالية من رموز Noto Emoji وTwemoji وغيرها من نماذج الخطوط
- عرض DJR لخط Bradley Initials مع استكشاف COLRv1
- أداة ومكتبة ChromaCheck تقنيات خطوط الألوان المتاحة باستخدام ميزة التعرّف على الميزات
شكر وتقدير
نشكر "بهداد أصفهبود" و"كوزيمو لوبو" و"بيتر كونستابل" و"بن فاغنر" و"فيرنر" "ليمبيرغ" و"ديف كروسلاند" و"فلاديمير ليفانتوفسكي" و"جوناثان كيو" و"لورنس بيني" "كريس ليلي" و"ديفيد جوناثان روس" و"أندروير" و"جست فان روسوم" و"رويل نيسكنز" و للآخرين على مساهماتهم في COLRv1.