محوّل px إلى rem

ما محوّل px إلى rem؟

البكسل طولٌ مطلق. أما rem فنسبيّة: فهي تعني حجم خط عنصر الجذر، وهو في كل صفحة وِب عنصر html. والتحويل بينهما قسمة؛ فـpx على الجذر يعطي rem، وrem في الجذر يعطي px، والسؤال الوحيد هو: كم يساوي هذا الجذر فعلًا؟

تكاد كل المحوّلات تجيب بستة عشر ثم تمضي. وهو الرقم الذي تأتي به المتصفحات، وهو صائبٌ في أكثر الأحوال، لكنه قيمةٌ افتراضية للمتصفح لا شيءٌ تفرضه المواصفة. فـCSS يعرّف القيمة الابتدائية لـfont-size بالكلمة المفتاحية medium، ويترك للمتصفح أن يقرّر كم تساوي بالبكسل. ولا تحدّد المواصفة في أي موضع قيمةً بالبكسل لذلك.

ولهذا كان الجذر هنا أداةَ تحكّم لا ثابتًا. غيّره تتبعه القسمة وجدول المرجع ولوحة التدرّج، وهذه هي الطريقة الصادقة لعرض وحدةٍ كل معناها أنها تتحرك.

كيف تستعمل المحوّل؟

1. اختر الاتجاه واكتب قيمتك. من px إلى rem لتحويل تسليمِ تصميم، ومن rem إلى px للتحقّق مما سترسمه ورقةُ الأنماط فعلًا. وكل شيء يتحدّث أثناء الكتابة.
2. اضبط حجم خط الجذر. اتركه عند ستة عشر لمطابقة الافتراضي المعتاد في المتصفحات، أو حرّكه لترى ماذا تفعل ورقةُ أنماطك بمن اختار نصًّا أكبر. والجدول أدناه يعيد الحساب وفق ما تختار.
3. اقرأ لوحة التدرّج قبل أن تنسخ شيئًا. فهي تبيّن ما تعطيه ثلاثُ صيغٍ مختلفة للجذر لقارئٍ عند كل إعداد من إعدادات المتصفح، ولوحةُ em تحتها تبيّن ما يحدث إذا لجأت إلى em.

لماذا يُنصح بـ rem، وكيف تُبطل الفائدة من غير قصد

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

ومن اليسير أن تُلقي بهذا كله في سطرٍ واحد. فكتابةُ html { font-size: 16px } تستبدل إعدادَك بإعداد القارئ. وعندها تُحسب كل rem في الصفحة على ستة عشر مهما اختار هو، فينال قارئُنا صاحبُ الـ24px ثلثَي ما طلب بالضبط — أي أقلَّ بالثلث — ولا يستدرك ذلك أيُّ rem أبعدَ في ورقة الأنماط. فالوحدات نسبية، وما تُنسب إليه صار للتوّ ثابتًا.

أما النسب المئوية فلا تعاني هذا، وهنا يخطئ الشائع. فحيلةُ 62.5% التي تضع html { font-size: 62.5% } ليصير 1rem عشرةَ بكسلات مريحة، كثيرًا ما تُوصف بأنها خطرٌ على إتاحة الوصول. وليست كذلك. فالنسبة المئوية تضرب ما اختاره القارئ: فعند إعداده الافتراضي تعطي 10px، وعند 24px تعطي 15px، وتتدرّج الصفحة كلها معه كما ينبغي تمامًا. فالذي يكسر إتاحة الوصول هو الوحدة لا الرقم: البكسل يُجمّد، والنسبة تتدرّج.

وجدولُ التدرّج في هذه الصفحة يجري هذا الحساب عنك عند خمسة إعدادات للمتصفح. والصفُّ الوحيد الذي يقصّر أبدًا هو صفُّ البكسل المثبَّت.

ولمَ لا em، وقاعدةٌ في المواصفة يحسن معرفتها

تبدو em بديلًا مكافئًا لـrem، وسلوكها مختلفٌ كل الاختلاف. فـem نسبةٌ إلى حجم خط العنصر الذي تُستعمل عليه، فالتداخل يضاعف. وأربعةُ مستوياتٍ من العناصر كلٌّ منها 1.25em لا تخرج أكبر من الأساس بنسبة 25%، بل تخرج بـ1.25 مرفوعةً إلى الأربعة، أي 2.44 ضعفًا، وآخرها يقارب ضعفَي ونصفِ الحجم الذي ظننت أنك تحدّده. ولوحةُ em أعلاه تعرض السلسلة بالمعامل الذي تكتبه.

أما rem فلا تتراكم، لأن كل rem في الصفحة تُقاس على الجذر نفسه. وهذا الفارق وحده هو سبب استحداث الوحدة، وهو أساسُ النصيحة المعتادة كلها: em لما ينبغي أن يتدرّج فعلًا مع سياقه المحلي، كحشوة زرٍّ تكبر مع نصّه، وrem لكل ما تريده متوقَّعًا.

وثمة قاعدةٌ يحسن معرفتها لأنها تبدو كأنها لا بد أن تكون دائرية وليست كذلك. فحين ترد rem داخل خاصية font-size لعنصر الجذر نفسه، فهي تشير إلى القيمة الابتدائية لتلك الخاصية لا إلى نفسها. فـhtml { font-size: 2rem } ضِعفُ القيمة الابتدائية، ولا تستدعي نفسها. وهي زاويةٌ قلّما تزورها، لكنها سلوكٌ معرَّف لا غير معرَّف.

حدودٌ صادقة

لا تستطيع هذه الأداة أن تخبرك بحجم خط الجذر عند قارئٍ بعينه. ولا يستطيع ذلك شيءٌ من الخارج، وهذه هي غاية الإعداد أصلًا. لكنها تستطيع أن تريك ما تعطيه ورقةُ أنماطك إياه عند كل قيمةٍ محتملة، لتقرّر هل يصمد تصميمك أمامها.

وأرقامُ rem تُعرض بأربع منازل عشرية ولا تُقرَّب أكثر، لأن 15px عند جذرٍ مقداره 16px هي 0.9375rem بالضبط، و0.94rem حجمٌ آخر. وحين لا تقع القيمة على رقمٍ نظيف تقول الأداة ذلك بدل أن تقرّب في صمت، وكلُّ قيمةٍ تعرضها تعود بالتحويل إلى البكسل الذي بدأت منه.

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

لماذا هو مجاني؟

لأن القسمة لا تكلّفنا شيئًا. فالأداة كلها بضعة كيلوبايتات من JavaScript تعمل في متصفحك أنت: لا تُرفع أي قيمة ولا يُخزَّن شيء، وليس ثمة خادم يرى ما تصمّمه.

فلا حساب ولا تسجيل ولا حدّ. حوّل مسافاتِ نظامِ تصميمٍ كامل إن شئت؛ فهو مجاني في المرة الألف كما هو في الأولى.