تقنيات CSS الحديثة لتحسين الوضوح

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

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

المسافات والكلمات والجمل والفقرات

الوحدات

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

لهذا السبب ، فإن أنسب الخيارات بشكل عام هي em و rem ، وهي وحدات خاصة بالخط. على سبيل المثال ، يساعد تعيين الهوامش بين الفقرات باستخدام ems في الحفاظ على الإيقاع الرأسي مع تغير حجم النص. ومع ذلك ، يمكن أن تكون هذه مشكلة عندما يتم تبديل خط serif بخط sans-serif داخل القسم. في الواقع ، يمكن أن تظهر الخطوط بصريًا مختلفة جدًا بنفس حجم الخط. تقليديا ، ارتفاع حرف "x" الصغير (x-height) هو المرجع لتحديد الحجم الظاهري للحرف.

باستخدام قاعدة ضبط حجم الخط ، يمكننا ، بالتالي ، عرض الخطوط من نفس الحجم بصريًا ، لأن الخاصية ستطابق ارتفاعات الأحرف الصغيرة. لسوء الحظ ، لا تتوفر هذه الخاصية حاليًا إلا في Firefox و Chrome و Edge خلف علامة ، ولكن يمكن استخدامها كتعزيز تدريجي باستخدام فحصsupport:

 @supports (font-size-adjust: 1;) { article { font-size-adjust: 0.5; } }

كما أنه يساعد في التبديل من الخط الاحتياطي إلى الخط الذي تم تحميله عن بُعد (على سبيل المثال ، باستخدام خطوط Google).

ارتفاع الخط الأمثل

نعتقد أن الطباعة بالأبيض والأسود. الطباعة بيضاء حقًا [...] إنها المسافة بين السود هي التي تجعلها حقًا.

- ماسيمو فينيلي ، هيلفيتيكا ، 2007

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

يساعد تعيين حجم الخط بالاعتماد على x-height في تحسين ارتفاع الخط. ارتفاع السطر الافتراضي في المستعرضات هو 1.2 (قيمة بدون وحدة بالنسبة لحجم الخط) ، وهي القيمة المثلى لـ Times New Roman ولكن ليس للخطوط الأخرى. يجب أن نأخذ في الاعتبار أيضًا أن تباعد الأسطر لا ينمو بشكل خطي مع حجم الخط وأنه يعتمد على عوامل مختلفة مثل نوع النص. من خلال اختبار بعض الخطوط الشائعة للقراءة الطويلة ، جنبًا إلى جنب مع أحجام من 8 إلى 14 نقطة ، تمكنا من استنتاج أن النسبة بين ارتفاع x وتباعد الأسطر الأمثل على الورق هي 37.6.

مقارنة بالقراءة على الورق ، تتطلب قراءة الشاشة عمومًا تباعدًا أكبر بين السطور. لذلك ، يجب علينا تعديل النسبة إلى 32 للبيئات الرقمية. في CSS ، يمكن ترجمة هذه القيمة التجريبية إلى القاعدة التالية:

 p { line-height: calc(1ex / 0.32); }

في سياقات القراءة الصحيحة ، تحدد هذه القاعدة ارتفاع السطر الأمثل لكل من خطوط serif و sans-serif ، حتى عندما لا تتوفر أدوات الطباعة أو عندما يقوم المستخدم بتعيين خط يحل محل الخط الذي اختاره المصمم.

حدد المقياس

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

 article h1 { font-size: 2.5em; line-height: calc(1ex / 0.42); margin: calc(1ex / 0.42) 0; } article h2 { font-size: 2em; line-height: calc(1ex / 0.42); margin: calc(1ex / 0.42) 0; } article h3 { font-size: 1.75em; line-height: calc(1ex / 0.38); margin: calc(1ex / 0.38) 0; } article h4 { font-size: 1.5em; line-height: calc(1ex / 0.37); margin: calc(1ex / 0.37) 0; } article p { font-size: 1em; line-height: calc(1ex / 0.32); margin: calc(1ex / 0.32) 0; }

تباعد بين الحروف والكلمات

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

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

تشير هذه الدراسات إلى أنه يجب علينا استغلال ديناميكية واستجابة صفحات الويب من خلال تقديم أدوات أكثر فاعلية ، مثل ضوابط التعامل مع المسافات. من الأساليب الشائعة عند تكبير حجم الأحرف ضبط التباعد بين الأحرف والكلمات من خلال خصائص CSS مثل تباعد الأحرف letter-spacing word-spacing .

تكمن المشكلة في ذلك في أن letter-spacing يعمل بشكل غير مشروط ويكسر تتبع الخط ، مما يؤدي بالصفحة إلى عرض مسافات غير مثالية.

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

تحتوي مقالة Web.dev "مقدمة إلى الخطوط المتغيرة على الويب" على مزيد من التفاصيل حول ماهية الخطوط المتغيرة وكيفية استخدامها. وتحقق من أداة الخطوط المتغيرة لمعرفة كيفية عملها.

العرض والمحاذاة

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

 p { width: 60ch; max-width: 100%; }

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

 /* The browser correctly supports hyphenation */ p[lang="en"] { text-align: justify; hyphens: auto; } /* The browser does NOT correctly support hyphenation */ p[lang="it"] { text-align: left; hyphens: none; }

يمكن استخدام الواصلة اليدوية للغات التي ليس لديها دعم أصلي. هناك العديد من الخوارزميات (من جانب الخادم والعميل) يمكنها حقن ‐ كيان ضمن الكلمات ، لإرشاد المتصفحات حيث يمكن كسر الرمز المميز. سيكون هذا الحرف غير مرئي ، ما لم يكن موجودًا في نهاية السطر ، وعندئذٍ سيتم عرضه كواصلة. لتنشيط هذا السلوك ، نحتاج إلى ضبط hyphens: manual CSS .

تباين المقدمة

يعد تباين الأحرف والكلمات مع الخلفية أمرًا أساسيًا لوضوح القراءة. حدد WCAG إرشادات وقيودًا لمعايير مختلفة (A ، AA ، AAA) تحكم التباين بين النص والخلفية. يمكن حساب التباين باستخدام أدوات مختلفة ، لكل من بيئات التصميم والتطوير. ضع في اعتبارك أن أدوات التحقق الآلية هي أدوات دعم ولا تضمن نفس جودة الاختبار الحقيقي.

باستخدام متغيرات CSS وبيان calc ، يمكننا ديناميكيًا حساب اللون الذي يقدم أفضل تباين مع الخلفية. بهذه الطريقة ، يمكننا أن نقدم للمستخدم أنواعًا مختلفة من التباين (البني الداكن ، والرمادي الفاتح ، والوضع الليلي ، وما إلى ذلك) ، عن طريق تحويل المظهر بالكامل وفقًا للون الخلفية.

 article { --red: 230; --green: 230; --blue: 230; --aa-brightness: calc(( (var(--red) * 299) + (var(--green) * 587) + (var(--blue) * 114) ) / 1000; --aa-brightness: calc(( (var(--red) * 299) + (var(--green) * 587) + (var(--blue) * 114) ) / 1000); --aa-color: calc((var(--aa-brightness) - 128) * -1000); background: rgb(var(--red), var(--green), var(--blue)); color: rgb(var(--aa-color), var(--aa-color), var(--aa-color)); } 

بالإضافة إلى ذلك ، مع المقدمة والدعم عبر المستعرضات لاستعلام وسائط prefer-color-scheme المفضل ، يصبح من الأسهل إدارة التبديل من السمة الفاتحة إلى السمة الداكنة ، وفقًا لتفضيلات المستخدم.

 @media (prefers-color-scheme: dark) { article { --red: 30; --green: 30; --blue: 30; } }

للمضي قدما

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

للمصممين

• النظر في الهيكل الدلالي على أنه جزء من المشروع ، وليس تفصيلاً تقنيًا ؛
• تخطيط المستند ومقاييس الخط ، لا سيما لماذا وكيف اختياراتك. سوف يساعدون المطورين على تنفيذ التصميم بشكل صحيح ؛
• قلل المتغيرات المطبعية قدر الإمكان (عدد أقل من العائلات والأنماط والمتغيرات).

للمطورين

• تعلم مبادئ الطباعة من أجل فهم قرارات التصميم المتخذة وكيفية تنفيذها ؛
• استخدم الوحدات المتعلقة بحجم الخط لتنفيذ التخطيطات سريعة الاستجابة (الحشوات ، والهوامش ، والفجوات) التي تتناسب مع تفضيلات المستخدم ؛
• تجنب التلاعب غير المقيد بمقاييس الخط. قد تتأثر الوضوح عندما لا يتم احترام قيود الخط.

للفرق

• قراءة وفهم مبادئ WCAG ؛
• ضع في اعتبارك التضمين وإمكانية الوصول كجزء من المشروع (بدلاً من القضايا المنفصلة).

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

يمكننا تعيين ارتفاع السطر الأمثل لفقرة ما باستخدام وحدة ex ، وكذلك تعيين عرض الفقرة باستخدام وحدة ch ، من أجل احترام إعدادات المتصفح المفضلة للمستخدم لحجم الخط والعائلة. يمكننا استخدام خطوط متغيرة لضبط التباعد بين الحروف والكلمات ، ويمكننا معالجة حدود الحروف الرسومية لزيادة التباين ، ومساعدة القراء الذين يعانون من إعاقات بصرية وعسر القراءة. يمكننا أيضًا ضبط تباين النص تلقائيًا باستخدام متغيرات CSS ، مما يمنح المستخدم موضوعه المفضل.

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

موارد ذات الصلة

• "اختبار قابلية قراءة النص للخطوط المتوافقة مع عسر القراءة" ، Galliussi ، Perondi ، Chia ، Gerbino ، Bernardis (2020)
• "كيف يمكن أن تكون الجوانب المرئية حاسمة في اكتساب القراءة: الحالة المثيرة للفضول المتمثلة في الازدحام وعسر القراءة التنموي ،" غوري ، فاكيتي (2015)