7 نصائح سريعة حول CSS لتعزيز وضوح موقع الويب

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

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

1. الوحدات:

دبوس

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

عندما نستخدم CSS للتعامل مع مظهر موقعنا ، يمكننا أن نأخذ في الاعتبار خاصية "ضبط حجم الخط" ونعرض الخطوط بالحجم نفسه. نتيجة لذلك ، يمكن أن تتطابق ارتفاعات الأحرف مع ارتفاع الأحرف الصغيرة. يمكنك استخدام مقتطف الشفرة هذا للتأكد من العوامل كما هو مذكور أعلاه:

@ support (تعديل حجم الخط: 1 ؛)

{

مقالة - سلعة{

ضبط حجم الخط: 0.5 ؛

{

}

2. ارتفاع الخط:

دبوس

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

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

ص {

ارتفاع الخط: احسب (1ex / 0.32) ؛

}

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

3. تعريف المقياس:

دبوس

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

المادة h1

{

حجم الخط: 2.5em ؛

ارتفاع الخط: احسب (1ex / 0.42) ؛

الهامش: احسب (1ex / 0.42) 0 ؛

}

المادة h2

{

حجم الخط: 2em ؛

ارتفاع الخط: احسب (1ex / 0.42) ؛

الهامش: احسب (1ex / 0.42) 0 ؛

}

المادة h3

{

حجم الخط: 1.75em ؛

ارتفاع الخط: احسب (1ex / 0.38) ؛

الهامش: احسب (1ex / 0.38) 0 ؛

}

المادة h4

{

حجم الخط: 1.5em ؛

ارتفاع الخط: احسب (1ex / 0.37) ؛

الهامش: احسب (1ex / 0.37) 0 ؛

}

مقالة ص

{

حجم الخط: 1em ؛

ارتفاع الخط: احسب (1ex / 0.32) ؛

الهامش: احسب (1ex / 0.32) 0 ؛

}

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

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

دبوس

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

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

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

5. العرض والمحاذاة:

دبوس

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

ص

{

العرض: 60ch ؛

أقصى عرض: 100٪ ؛

}

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

/ * في حالة توفر الواصلة: * /

p [lang = "ar"]

{

محاذاة النص: ضبط ؛

الواصلات: تلقائي ؛

}

/ * كود CSS عندما لا يكون لديك دعم الواصلة * /

p [lang = "it"]

{

محاذاة النص: يسار ؛

واصلات: لا شيء ؛

}

يمكن أن تحتوي اللغات التي لا تحتوي على دعم أصلي على واصلة يدوية. يمكنك استخدام العديد من جانب الخادم ومن جانب العميل لإدخال "& واصلة؛" عامل. يرشد هذا إلى المكان الذي يمكن أن يسمح فيه بتكسير الرمز المميز. يتم جعل هذا الحرف غير مرئي ما لم يتم وضعه في نهاية السطر ، حيث يتم عرضه في شكل واصلة. لاستخدام هذا ، نحتاج إلى تعيين "الواصلات: معلمات CSS اليدوية".

6. تباين المقدمة:

دبوس

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

عندما نستخدم CSS لتحديد تباين الألوان ، يمكننا استخدام عبارة "calc" لحساب لون الخط ديناميكيًا لتقديم أفضل تباين للألوان. يتم حساب هذا بينما يأخذ في الاعتبار لون المظهر والخلفية. رمز CSS الذي يستخدم عامل "الحساب" هو كما يلي:

مقالة - سلعة

{

الأحمر: 230 ؛

أخضر: 230 ؛

- أزرق: 230 ؛

- سطوع: (

(var (–red) * 299) +

(var (–green) * 587) +

(var (–blue) * 114)

) / 1000 ؛

–aa-color: احسب ((var (–aa-Brightness) - 128) * -1000) ؛

الخلفية: rgb (var (–red) ، var (–green) ، var (–blue)) ؛

اللون: rgb (var (–aa-color) ، var (–aa-color) ، var (–aa-color)) ؛

}

وفقًا لمعلمات استعلام الوسائط ، يمكنك أيضًا السماح للمستخدم بالتبديل بين السمات الداكنة والفاتحة وفقًا لتفضيلات المستخدم. يمكنك استخدام "نظام الألوان المفضل" في CSS لتمكين التبديل بين السمات الفاتحة والداكنة على النحو التالي:

media (يفضل نظام الألوان: داكن)

{

مقالة - سلعة

{

–أحمر: 30 ؛

أخضر: 30 ؛

- أزرق: 30 ؛

}

}

7. إضافة الظل إلى الخطوط:

دبوس

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

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

h1 {/ * المحدد * /

عائلة الخطوط: “Some Custom Font”، serif؛

ظل النص: 0 0 1 بكسل شفاف ؛

/ * أو ، إذا كنت بحاجة إلى تطبيق ظل قاسي بقيمة 0 بكسل ،

* يمكنك استخدام ظلال نصية متعددة * /

ظل النص: 0 0 0 # f00 ، 0 0 1px شفاف ؛

}

استنتاج:

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