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 যে ফন্ট সাইজের কথা বলে তা দিয়ে গুণ করেন, আর উত্তর পড়েন ডিজাইন টুল যে এককে কাজ করে সেই এককে। ডেভেলপাররা এই প্রশ্ন করেন কোড পর্যালোচনার সময়, মকআপের সঙ্গে বিল্ড মেলানোর সময়, ব্যবধানের সমস্যা ডিবাগ করার সময়, বা পিক্সেলে ভাবেন এমন কারও হাতে তৈরি কম্পোনেন্ট তুলে দেওয়ার সময়।

CSS-এ রূপান্তর করার জন্য em সবচেয়ে কঠিন একক, কারণ এর কোনো স্থির মান নেই। 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-এ আকারটি লিখুন। দশমিক গ্রহণযোগ্য, তাই 1-এর মতো 0.714-ও চলে।

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 ব্যবহার করুন। কিছুই আপলোড হয় না।