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 16 px کے عنصر کے اندر 24 px ہے اور 24 px کے عنصر کے اندر 36 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 دراصل کیا کرتا ہے۔

دو بنیادیں ساتھ ساتھ آزمائیے

14 کی بنیاد کے ساتھ 1.5 ٹائپ کیجیے، پھر 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 کہتی ہے۔ تین میں سے دو ملتے ہیں، تو آپ خلا دیکھتے ہیں: 14 کی بنیاد پر 8 px ہوتا 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 16 px کے عنصر کے اندر 24 px ہے اور 24 px کے عنصر کے اندر 36 px، اور em کے اندر em ضرب کھاتا ہے۔ ایک عدد کے لیے جو ہر جگہ قائم رہے rem استعمال کیجیے۔ کچھ اپ لوڈ نہیں ہوتا۔