العمل مع الوحدات النسبية والمطلقة Absolute and Relative Units

كيف تعمل وحدات em ؟

وحدات em تعتمد على حجم الخط للعنصر. إذا كنت تستخدم ems لخاصية font-size، سيكون حجم النص نسبيًا (relative) لحجم الخط في العنصر الأب (parent element).

لفهم كيفية عمل ذلك بشكل أفضل، دعنا نلقي نظرة على مثال:

<link rel="stylesheet" href="styles.css">

<p class="para">أنا عنصر فقرة</p>

<div class="blue-box"></div>
            

.para {
 font-size: 20px;
 margin-bottom: 1.5em;
 border: 2px solid red;
}

.blue-box {
 background-color: blue;
 color: white;
 padding: 10px;
 width: 100px;
 height: 100px;
}
            

معاينة:

في HTML، لدينا فقرة وعنصر div. عنصر الفقرة يحمل فئة para، وعنصر الـ div يحمل فئة blue-box.

بالنسبة لفئة para عرّفنا font-size إلى 20px و bottom إلى 1.5em. هذا يعني أن الهامش سيكون 1.5 ضعف حجم الخط لعنصر الفقرة. قيمة 1.5em تعادل 30 بكسل من الهامش في أسفل الفقرة. كما عرّفنا border بقيمة 2px solid red لتتمكن من رؤية الهوامش بشكل أوضح.

لصنف blue-box، عيّنا لون الخلفية إلى blue، ولون النص إلى white، و padding إلى 10px على جميع الجوانب الأربعة.

ن المثال، سيكون هناك مساحة واضحة بين أسفل عنصر الفقرة والصندوق الأزرق.

فماذا يحدث إذا أزلنا خاصية font-size من صنف para ؟

سيكون الهامش السفلي (bottom margin) نسبيًا relative لحجم الخط في العنصر الأب (parent element). في هذه الحالة، العنصر الأب هو عنصر body، الذي له حجم خط افتراضي 16px.

متى يجب استخدام وحدات em ؟

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

حتى هذه النقطة، كنا نعيّن حجم الخط لعنصر باستخدام البكسل. لكن هذا يسبب بعض التحديات للمستخدمين.

داخل إعدادات المتصفح (browser settings)، يمكنك التحكم في حجم الخط الافتراضي.

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

لماذا نستخدم وحدات rem في تنسيق النصوص Typography ؟

تتمثل إحدى طرق معالجة هذه المسألة في استخدام وحدات rem لتنسيق النصوص (typography). وتعتمد وحدة rem على حجم الخط الخاص بالعنصر الجذري (root element)، وهو عنصر html.

افتراضيًا، حجم الخط في عنصر html هو 16px. إذا زاد المستخدم حجم الخط في إعدادات المتصفح، سيزداد حجم الخط في عنصر html، وستتغير جميع وحدات rem نسبيًا.

إليك مثالًا على استخدام وحدة rem لحجم الخط بدلًا من البكسل:

<link rel="stylesheet" href="styles.css">

<p>هذا نص عادي.</p>
<p class="para">هذا النص أكبر قليلاً.</p>
            

.para {
 font-size: 1.2rem;
 margin-bottom: 1.5em;
 border: 2px solid red;
}
            

معاينة:

بتعيين حجم الخط إلى 1.2rem، سيكون حجم الخط لعنصر الفقرة 1.2 ضعف حجم الخط في العنصر الجذري (root element). إذا لم يغير المستخدم حجم الخط الافتراضي، سيكون حجم الخط لعنصر الفقرة 19.2px لأنه 1.2 ضعف 16px.

متى يجب استخدام وحدات rem ؟

إذًا، متى ينبغي عليك استخدام وحدات rem ؟ تُفضَّل وحدات rem على وحدات البكسل (pixels) في تنسيق النصوص (typography)؛ لأنها تتناسب في الحجم طرديًا مع إعدادات متصفح المستخدم، مما يجعل المحتوى أكثر سهولة في الوصول إليه بالنسبة للمستخدمين الذين يعانون من ضعف في البصر.

يمكن لوحدات rem أيضًا المساعدة في الحفاظ على تباعد وتخطيط متناسق عبر العناصر المختلفة.