تحويل em إلى px Em ↔ Pixels مجاناً عبر الإنترنت آمن

لماذا تحوّل em إلى px

تقول ورقة الأنماط margin-bottom: 0.75em على عنوان، وpadding: 0.4em 0.9em على زر، وline-height بقيمة 1.3em على كتلة نص. وهذه قيم جيدة ومرنة، وهي شبه مستحيلة التخيل. كم بكسلاً هذا الهامش؟ وهل يطابق حشو الزر الـ6 px والـ14 px في ملف التصميم؟ ولمعرفة ذلك تحوّل em إلى px: تضرب في حجم الخط الذي تشير إليه em، وتقرأ الجواب بالوحدة التي تستخدمها أدوات التصميم. إنه سؤال يطرحه المطورون حين يراجعون الشيفرة، أو يفحصون بناءً مقابل نموذج، أو يصلحون مشكلة تباعد، أو يسلمون مكوناً منجزاً لشخص يفكر بالبكسلات.

em هي أصعب وحدة في CSS للتحويل، لأنه لا قيمة ثابتة لها. فالـ em هي حجم الخط السائد حيث تُستخدم القيمة، أو، بالنسبة إلى الخاصية font-size نفسها، حجم الخط عند الأصل. فقد تكون 1.5 em تساوي 24 px في مكان و36 px في آخر، في ورقة الأنماط نفسها، من القاعدة نفسها. لذلك لا يخمّن المحوّل. إنه يسأل عن حجم الخط الذي تشير إليه em، ويعرضه بجانب الجواب ويحسب به. وإن لم تعرف الحجم فتشرح الأقسام أدناه كيف تجده في متصفحك.

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

الصيغة والأساس

px تساوي em مضروبة في حجم الخط

الصيغة ضرب واحد: px = em × base. وبأساس 16 px تصبح 1.5 em تساوي 24 px، و0.75 em تساوي 12 px، و2 em تساوي 32 px. تطبع الصفحة الأساس بجانب النتيجة، فسطر مثل 1.5 em = 24 px (16 px) يقول بالضبط ما افتُرض. وإذا كان حجم خط العنصر 20 px فاكتب 20، فتصبح 1.5 em تساوي 30 px.

إيجاد الأساس في متصفحك

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

حين لا تستطيع رؤية الصفحة

إذا كنت تقرأ الشيفرة دون الصفحة، فاتبع سلسلة أحجام الخطوط صعوداً من العنصر: font-size الخاص به إن كان له واحد، وإلا فالأصل، وهكذا حتى الجذر، وهو 16 px ما لم تغيره ورقة الأنماط أو القارئ. وحيث يُعطى حجم بـ em فاضرب على طول السلسلة. هذا مملّ، ولهذا يستقر معظم الفرق على rem لأحجام الخطوط.

ما يحفظه التحويل وما لا يستطيع

يحفظ النسبة إلى النص

النتيجة هي حجم البكسل الذي تمثله em عند الأساس الذي كتبته. فمكتوبةً بـ em، فإن مسافة أو حجماً يتبع النص الذي ينتمي إليه، ويبيّن التحويل ما يبلغه ذلك لحجم نص معين.

لا يعطيك جواباً واحداً للصفحة

هذا ما ينبغي الحذر منه: em نسبية إلى حجم خط العنصر نفسه، أو، لـ font-size، إلى أصله، لا إلى الجذر. فالـ 1.5 em نفسها تساوي 24 px داخل عنصر 16 px و36 px داخل عنصر 24 px، وem داخل em تتضاعف. والرقم في الصفحة صحيح للأساس في الحقل ولا شيء غيره. وإن أردت رقماً واحداً يصح في كل مكان فهذا ما وُجدت له rem. وللمقارنة بين الاثنتين، حوّل rem إلى px وانظر كيف تبقى وحدة نسبية إلى الجذر ثابتة.

التقريب

الضرب في أساس عدد صحيح يعطي نتائج دقيقة لمعظم القيم. وإذا كان الأساس كسراً عشرياً، مثل 13.5 px، فقيمة مثل 1.2 em تعطي 16.2 px. تتعامل المتصفحات مع البكسلات الكسرية، لكن حين تحتاج إلى بكسلات صحيحة، لحد شعري أو أيقونة على شبكة، فقرّب عن قصد وافحص كيف يبدو.

كيف تتضاعف قيم em المتداخلة

قائمة داخل قائمة

خذ صفحة نص جسمها 16 px. لقائمة font-size: 0.875em، أي 14 px. وللبنود داخلها أيضاً font-size: 0.875em، أي 14 × 0.875 = 12.25 px. وقائمة داخل بند تفعلها مرة أخرى: 10.7 px. وبثلاثة مستويات عمقاً يصبح النص صغيراً جداً، ولم يقرر أحد ذلك. وحين تحوّل em إلى px لمكون ويبدو الجواب صغيراً جداً، فالتداخل أول ما ينبغي فحصه.

صعود السلسلة

لمعرفة حجم البكسل الحقيقي لـ em متداخلة، اضرب الأساس في كل قيمة في الطريق نزولاً: 16 × 0.875 × 0.875 = 12.25. يجري المحوّل خطوة واحدة في كل مرة. ولسلسلة، حوّل القيمة الأولى، واستخدم الجواب أساساً للثانية وتابع. إنه الحساب نفسه الذي يجريه المتصفح.

كيف توقف التراكم

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

قيم شائعة

الجدول في أسفل الصفحة

تضم الصفحة جدولاً بقيم البكسل التي تقابلها أرقام em الشائعة عند الأساس الذي تضبطه: 0.5 em تساوي 8 px، و0.625 تساوي 10، و0.75 تساوي 12، و0.875 تساوي 14، و1 تساوي 16، و1.125 تساوي 18، و1.25 تساوي 20، و1.5 تساوي 24، و2 تساوي 32، و3 تساوي 48 و4 تساوي 64. وعند الأساس الافتراضي هذه هي الأرقام نفسها لـ rem. غيّر الأساس يتغير الجدول معه، وهي طريقة جيدة لترى ما تفعله em حقاً.

جرّب أساسين جنباً إلى جنب

اكتب 1.5 بأساس 14، ثم بأساس 20. تحصل على 21 و30 بكسلاً. هذا هو الفرق كله بين em وrem في تجربة واحدة: الرقم نفسه، عنصران، حجمان.

كيف تحوّل em إلى px هنا

اكتب قيمة em

أدخل الحجم بـ em في الحقل الأول. الكسور العشرية مقبولة، فـ0.714 تعمل مثل 1.

اضبط حجم الخط الذي تشير إليه em

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

اقرأ قيمة البكسل

يظهر الجواب فوراً، مع الأساس مبيناً بجانبه. انسخه إلى ملاحظاتك أو قارنه بملف التصميم.

من أين تأتي هذه الوحدات

الـ em

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

البكسل والـ rem

حين لم تعد الشاشات ذات كثافة يمكن التنبؤ بها، صارت صفحة تُقاس ببكسلات حقيقية صفحة تتقلص كلما ازدادت الشاشات حدة. فأُعيد تعريف بكسل CSS كطول مرجعي: نحو 1/96 من البوصة يُرى من مسافة قراءة مريحة. وأُضيفت rem للهروب من تراكم em: إنها الـ em للعنصر الجذر ولا تتضاعف أبداً. وإن كنت تعمل بالاثنتين، فـحوّل px إلى em للذهاب في الاتجاه الآخر.

متى يحوّل المطورون em إلى px

فحص بناء مقابل ملف تصميم

يسلّم مصمم ملفاً بالبكسلات، والشيفرة بـ em. ولفحص أن الصفحة تطابق، تحوّل em إلى px باستخدام حجم خط كل مكون. زر بتسمية 14 px وحشو 0.714em 1.429em ينبغي أن يخرج بـ10 px و20 px، فإن قال التصميم 12 و24 فأحدهما خطأ.

تصحيح التباعد

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

قراءة شيفرة غير مألوفة

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

كتابة الوثائق والاختبارات

يصف من يختبرون صفحة ما يرونه بالبكسلات. ومطور يقول إن الحشو 0.9em يعني القليل لمختبر؛ و12.6 px تعني شيئاً. والتحويل يجعل الطرفين يفهم كل منهما الآخر.

فخاخ حين تحوّل em إلى px

استخدام الأساس الخطأ

أشيع خطأ. لـ font-size استخدم حجم الأصل؛ ولكل الخصائص الأخرى حجم العنصر نفسه. افحص الخاصية قبل أن تكتب الأساس.

نسيان أصل بـ em

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

افتراض أن الشاشة تُظهر البكسلات نفسها

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

اعتبار الجواب وعداً

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

أسئلة يطرحها الناس قبل التحويل

كم بكسلاً في 1 em؟

بقدر حجم الخط السائد: 16 px لنص الجسم العادي عند الافتراضي، و24 px داخل عنصر 24 px.

كم بكسلاً في 2 em؟

ضعف حجم الخط السائد. عند 16 px تكون 32 px.

لماذا يُظهر متصفحي شيئاً مختلفاً؟

حجم خط العنصر الحقيقي يختلف عن الأساس الذي كتبته. اقرأ حجم الخط المحسوب في أدوات المطور.

هل em هي rem نفسها؟

لا. em نسبية إلى العنصر، وrem إلى الجذر.

هل يُرفع رقمي؟

لا. يجري الحساب في متصفحك ولا يُرسل شيء إلى أي مكان.

كيف أعود؟

بـمن px إلى em، الذي يقسم بدل الضرب.

عادات تبقي ورقة أنماط em مفهومة

علّق على الأساس

سطر مثل padding: 0.75em 1.25em; /* 12px 20px at 16px */ يكلف بضعة أحرف ويوفر على القارئ التالي تحويلاً. إنه يسجل الأساس الذي افترضته.

اضبط حجم الخط مرة واحدة لكل مكون

عرّف حجم خط المكون على عنصره الجذر، وأشِر إليه بـ em في الداخل. فيكون الأساس نفسه لكل قيمة في المكون، وتستطيع أن تحوّل em إلى px مقابله بثقة.

أبقِ em للتباعد، وrem للحروف

هذا هو التقسيم الذي تستقر عليه معظم أوراق الأنماط، ويبقي الحساب بسيطاً. وللأحجام النسبية إلى الشاشة، من px إلى vw ومن vw إلى px هما الأداتان.

اختبر بحجم نص مختلف

ارفع حجم النص الافتراضي في متصفحك وانظر إلى الصفحة. فإذا تبع التباعد النص فقيم em تعمل. وإن لم يتبعه فقد تُرك شيء بالبكسلات.

طريقة للحالات المحرجة

اعمل من الخارج إلى الداخل

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

قرر هل تبسط

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

محوّلات ذات صلة

تغطي عائلة الأدوات نفسها التحويلات المجاورة. وللعودة إلى em، استخدم من px إلى em. وللأحجام النسبية إلى الجذر توجد من px إلى rem ومن rem إلى px، وللأحجام النسبية إلى الشاشة من px إلى vw ومن vw إلى px. وألوان ورقة الأنماط نفسها تتولى تدويناتها من HEX إلى RGB ومن RGB إلى HEX.

مثال محلول

لنقل إنك تراجع مكون زر. التسمية 14 px، وCSS يقول padding: 0.714em 1.429em وفجوة 0.5em بين أيقونة والتسمية. تكتب 14 أساساً، ثم 0.714 وتقرأ 10 px، و1.429 وتقرأ 20 px، و0.5 وتقرأ 7 px. ويقول ملف التصميم 10 و20 و8. اثنان من ثلاثة يطابقان، فتنظر في الفجوة: 8 px بأساس 14 ستكون 0.571 em، وقد قرّبها أحدهم إلى 0.5. تثير الأمر في المراجعة، والإصلاح رقم واحد.

قائمة تحقق قصيرة

قبل التحويل

ابحث عن حجم الخط الذي تشير إليه em، من أدوات المطور أو من سلسلة أحجام الخطوط في الشيفرة.

أثناء التحويل

اكتب قيمة em، واضبط الأساس واقرأ البكسلات، مع ملاحظة الأساس المبين بجانب النتيجة.

بعد التحويل

قارن بملف التصميم. فإذا اختلفت الأرقام، فافحص الأساس قبل أن تشك في الشيفرة.

أخطاء شائعة

استخدام 16 دون فحص

إنها صحيحة فقط حين يكون حجم خط العنصر 16 px.

الخلط بين em وrem

تتشابهان وتتصرفان بشكل مختلف. استخدم الصفحة الصحيحة لكل منهما.

نسيان أن em تتراكم

القيمة داخل عنصر متداخل نسبية إلى حجم قد لا تكون رأيته. اتبع السلسلة.

أرقامك تبقى على جهازك

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

خلاصة

لتحويل em إلى px هنا، اكتب الحجم بـ em وحجم الخط الذي تشير إليه، واقرأ النتيجة بالبكسلات فوراً، باستخدام الصيغة px = em × base. يحفظ التحويل النسبة إلى حجم الخط السائد حيث تُستخدم القيمة. ولا يستطيع أن يعطي جواباً واحداً لصفحة: em نسبية إلى العنصر نفسه، أو إلى الأصل لـ font-size، فالـ 1.5 em نفسها تساوي 24 px داخل عنصر 16 px و36 px داخل عنصر 24 px، وem داخل em تتضاعف. ولرقم واحد يصح في كل مكان استخدم rem. ولا شيء يُرفع.