px থেকে em রূপান্তর Pixels ↔ Em বিনামূল্যে অনলাইন নিরাপদ

কেন আপনি px থেকে em রূপান্তর করেন

Em হলো CSS-এর সবচেয়ে পুরোনো আপেক্ষিক একক এবং সেটিই সবচেয়ে বেশি তর্ক বাধায়। ডিজাইন ফাইল থেকে আপনার কাছে পিক্সেলে একটি মাপ আছে, একটি বোতামের 20 px প্যাডিং, একটি আইকনের পাশে 14 px ফাঁক, একটি শিরোনামের জন্য 36 px, আর আপনি তা em-এ চান যাতে সেটি যে লেখার অংশ তাকে অনুসরণ করে। px থেকে em রূপান্তর করার সময় আপনি একটি নির্দিষ্ট প্রশ্ন করছেন: এটি বর্তমান ফন্ট সাইজের কত গুণ? উত্তর নির্ভর করে এমন একটি সংখ্যার ওপর যা পাতা আন্দাজ করতে পারে না, মানটি যেখানে ব্যবহৃত হয় সেখানে কার্যকর ফন্ট সাইজ, তাই কনভার্টার সেই সংখ্যাটি একটি ঘরে রাখে এবং খোলাখুলি ব্যবহার করে।

মাপ em-এ লেখার কারণ হলো লেখার সঙ্গে যা যুক্ত তা লেখার সঙ্গে বাড়া উচিত। বোতামের লেবেল বড় হলে বোতামের ভেতরের প্যাডিংও বড় হওয়া উচিত। আইকন আর তার ক্যাপশনের মধ্যকার ফাঁক ক্যাপশন চওড়া হলে চওড়া হওয়া উচিত। শিরোনামের নিচের মার্জিন শিরোনামের অনুপাতে থাকা উচিত। এই সব ক্ষেত্রে ফন্ট সাইজ বদলালেই পিক্সেলের মান ভুল হয়ে যায়, আর em-এর মান যেকোনো আকারে ঠিক থাকে। এটাই em-এর পক্ষে পুরো যুক্তি, এবং এটি জোরালো।

হিসাব হয় আপনার ব্রাউজারে, আর কিছু আপলোড হয় না। নিচে আপনি পাবেন সূত্র, rem-এর চেয়ে em কেন বেশি যত্ন চায় তার কারণ, যে নেস্টিং ফাঁদ অবাক করা আকার তৈরি করে, যেসব জায়গায় em সঠিক একক, এবং একটি বাস্তব স্টাইলশিটে em আর rem-এর মধ্যে বেছে নেওয়ার একটি পদ্ধতি।

সূত্র আর ভিত্তি

em সমান px ভাগ ফন্ট সাইজ

সূত্রটি একটি ভাগ: em = px ÷ base। 16 px ভিত্তিতে 24 px হয় 1.5 em, 8 px হয় 0.5 em আর 20 px হয় 1.25 em। পাতাটি ফলের পাশে ভিত্তি দেখায়, যেমন 24 px = 1.5 em (16 px), যাতে কী ধরে নেওয়া হয়েছে তা আপনি দেখতে পান। অঙ্কটি rem-এর মতোই। অর্থ আলাদা।

ভিত্তি কী

rem-এর জন্য ভিত্তি হলো মূল উপাদানের ফন্ট সাইজ। em-এর জন্য এটি সেই উপাদানের ফন্ট সাইজ যেখানে মানটি ব্যবহৃত হয়, বা font-size প্রপার্টির জন্য পিতামাতা উপাদানের। এ কারণেই em-এর কোনো একক উত্তর নেই: একই স্টাইলশিট মান ভিন্ন জায়গায় ভিন্ন পিক্সেল আকার বোঝায়। যে বোতামের লেখা 14 px তার প্যাডিং রূপান্তর করলে ভিত্তি হিসেবে 14 টাইপ করুন। 32 px-এর একটি শিরোনামের মার্জিন রূপান্তর করলে 32 টাইপ করুন।

না জানলে ডিফল্ট

শুধু একটি মোটামুটি সংখ্যা চাইলে ভিত্তি 16-ই রেখে দিন, যে ব্রাউজারে কেউ কিছু বদলায়নি তার সাধারণ লেখার আকার। ফল স্বাভাবিক বডি টেক্সটের একটি ব্লকের জন্য ঠিক, আর উপাদানটি ভিন্ন আকারের হলেও এটি আপনাকে অনুপাতের একটি ধারণা দেয়।

রূপান্তর কী রাখে আর কী পারে না

এটি লেখার সঙ্গে অনুপাত রাখে

ফলটি হলো মানটি যেখানে ব্যবহৃত হয় সেখানকার কার্যকর ফন্ট সাইজের সাপেক্ষে অনুপাত। em-এ লেখা হলে একটি ফাঁক তার পাশের লেখার সঙ্গে বাড়ে-কমে, আর শব্দের চারপাশের ফাঁকের ঠিক এভাবেই আচরণ করা উচিত।

এটি পুরো পাতার জন্য একটি সংখ্যা দিতে পারে না

এটি সেই বিষয় যেটিতে সাবধান থাকতে হবে। Em উপাদানের নিজের ফন্ট সাইজের সাপেক্ষে, বা font-size-এর জন্য তার পিতামাতার, মূলের সাপেক্ষে নয়। তাই একটি পাতার জন্য কোনো একক উত্তর নেই: একই 1.5 em হলো 16 px উপাদানের ভেতরে 24 px আর 24 px উপাদানের ভেতরে 36 px, এবং em-এর ভেতরে em গুণ হয়। পাতার সংখ্যাটি ঘরের ভিত্তির জন্য ঠিক, আর অন্য কিছুর জন্য নয়। সর্বত্র খাটে এমন একটি সংখ্যা চাইলে সেটির জন্যই rem। তুলনা করতে px থেকে rem রূপান্তর করুন এবং দেখুন একই পিক্সেল মান কীভাবে আচরণ করে।

গোল করা

16 দিয়ে ভাগ অনেক আকারের জন্য পরিচ্ছন্ন মান দেয় আর অন্যগুলোর জন্য আবৃত্ত দশমিক। 0.8125 em-এর মতো একটি মান স্টাইলশিটে ঠিক আছে, কিন্তু নিখুঁত আকার জরুরি না হলে আপনি 0.8 বা 0.85-এ গোল করতে পছন্দ করতে পারেন। যেখানে নির্ভুলতা গণনা হয় সেখানে পুরো সংখ্যা রাখুন।

নেস্টিং ফাঁদ

em কীভাবে চক্রবৃদ্ধি হয়

ধরুন একটি তালিকার font-size: 0.875em আর তার আইটেমগুলোরও font-size: 0.875em। তালিকাটি তার পিতামাতার 87.5%। প্রতিটি আইটেম তালিকার 87.5%, যা পিতামাতার প্রায় 76.6%। একটি আইটেমের ভেতরে নেস্ট করা তালিকা আবার ছোট হয়, প্রায় 67%-এ। তিন স্তরের পর লেখা খুবই ছোট, আর কেউ ইচ্ছা করে তা লেখেনি। em চক্রবৃদ্ধি হয় বলতে এটাই বোঝানো হয়।

px থেকে em রূপান্তরের সময় কেন এটি গুরুত্বপূর্ণ

font-size-এর জন্য একটি পিক্সেল মান em-এ রূপান্তর করলে আপনাকে যে ভিত্তি ব্যবহার করতে হবে তা পিতামাতার ফন্ট সাইজ, উপাদানের নিজের নয়। অনেক ভুল আসে ভুলটি ব্যবহার করা থেকে। প্যাডিং ও মার্জিনের মতো অন্য প্রপার্টির জন্য ভিত্তি উপাদানের নিজের ফন্ট সাইজ। নিয়মটি বলা সহজ আর ভোলাও সহজ: font-size ওপরে তাকায়, বাকি সব নিজেকে দেখে।

অবাক হওয়া কীভাবে এড়াবেন

লেখা অনুসরণ করে এমন ফাঁকের জন্য em আর ফন্ট সাইজের জন্য rem ব্যবহার করুন। এভাবে ফন্ট সাইজ কখনও চক্রবৃদ্ধি হয় না, কারণ তারা মূলকে নির্দেশ করে, আর ফাঁক তবু নিজের লেখা অনুসরণ করে। এই সমন্বয়ে বেশির ভাগ আধুনিক স্টাইলশিট থিতু হয়।

সাধারণ আকার

পাতার নিচের সারণি

কনভার্টারের নিচে আপনার ঠিক করা ভিত্তিতে সাধারণ আকারের একটি সারণি আছে: 8 px হলো 0.5 em, 10 px হলো 0.625, 12 px হলো 0.75, 14 px হলো 0.875, 16 px হলো 1, 18 px হলো 1.125, 20 px হলো 1.25, 24 px হলো 1.5, 32 px হলো 2, 48 px হলো 3 আর 64 px হলো 4। 16 ভিত্তিতে এগুলো rem-এর মতোই সংখ্যা, যে কারণে মানুষ দুটিকে গুলিয়ে ফেলে। পার্থক্যটা 16 কীসের প্রতিনিধি তাতে।

উপাদানের সঙ্গে মেলাতে ভিত্তি বদলানো

একটি ছোট বোতামের জন্য ভিত্তি 14 করলে সারণি বদলে যায়: 14 px এখন 1 em, 7 px হলো 0.5 em আর 21 px হলো 1.5 em। চেষ্টা করে দেখুন, এবং দেখবেন 1.5 em-এর একটি প্যাডিং 14 px-এর বোতামে 18 px-এরটির চেয়ে ভিন্ন পিক্সেল আকার পায়, আর কেন সেটি কাজের।

এখানে px থেকে em কীভাবে রূপান্তর করবেন

পিক্সেল মান টাইপ করুন

প্রথম ঘরে পিক্সেলে আকার দিন। দশমিক গ্রহণযোগ্য।

em যে ফন্ট সাইজকে নির্দেশ করে তা ঠিক করুন

উপাদানের ফন্ট সাইজ টাইপ করুন, বা font-size রূপান্তর করলে তার পিতামাতার। নিশ্চিত না হলে 16 রেখে ফলটিকে আনুমানিক ধরুন।

em মান কপি করুন

সংখ্যাটি একক সহ আপনার CSS-এ ব্যবহার করুন, যেমন padding: 1.25em। একক ছাড়া একটি সংখ্যা বেশির ভাগ প্রপার্টির জন্য বৈধ নয়।

এই এককগুলো কোথা থেকে এসেছে

ধাতব টাইপে em

Em ওয়েবের চেয়ে পুরোনো। ধাতব টাইপে এটি ছিল ঢালাই করা একটি ব্লকের প্রস্থ, বড় হাতের M-এর নামে নাম, এবং ছাপা লাইনে অনুভূমিক ফাঁকের স্বাভাবিক একক। টাইপোগ্রাফাররা এখনও em ড্যাশ আর em স্পেসের কথা বলেন। CSS-এ ধারণাটি টিকে আছে আরও শিথিল রূপে: এক em হলো বর্তমান ফন্টের আকার।

পিক্সেল আর rem

CSS পিক্সেল আরামদায়ক পড়ার দূরত্বে দেখা এক ইঞ্চির প্রায় 1/96 একটি রেফারেন্স দৈর্ঘ্য, আপনার পর্দার একটি বিন্দু নয়। Rem যোগ করা হয়েছিল ডেভেলপারদের এমন একটি একক দিতে যা আপেক্ষিক কিন্তু কখনও চক্রবৃদ্ধি হয় না: এটি মূল উপাদানের em। এদের মধ্যে পিক্সেল, em ও rem তিনটি প্রয়োজন মেটায়: স্থির আকার, লেখার সাপেক্ষে আকার, আর পাতার সাপেক্ষে আকার।

যেখানে em সঠিক পছন্দ

বোতাম ও ফর্ম ঘরের ভেতরে প্যাডিং

padding: 0.5em 1em সহ একটি বোতাম যেকোনো লেখার আকারে অনুপাতে একই দেখায়। লেবেল বড় করুন আর পুরো বোতাম তার সঙ্গে বাড়ে, যা আপনি এমন একটি কম্পোনেন্টের কাছ থেকে চান যা টুলবারে আর হিরো ব্যানারে দুটিতেই ব্যবহৃত হতে পারে।

আইকনের পাশে ফাঁক

একটি আইকনের পর ক্যাপশনের জন্য এমন একটি ফাঁক লাগে যা ক্যাপশনের সঙ্গে মাপ বদলায়। 0.4em-এর একটি মার্জিন তা করে; 6px-এর একটি করে না।

শিরোনাম ও অনুচ্ছেদের চারপাশে মার্জিন

অনুচ্ছেদের ফাঁক em-এ থাকলে একটি নথিতে উল্লম্ব ছন্দ ধরে রাখা সহজ, কারণ তা অনুচ্ছেদের আকার অনুসরণ করে। em-এ শিরোনামের মার্জিন বিভিন্ন ব্রেকপয়েন্টে শিরোনামের আকার বদলালে অনুপাতে থাকে।

মিডিয়া কোয়েরি

em-এ লেখা ব্রেকপয়েন্ট পাঠকের লেখার আকারে সাড়া দেয়, তাই যিনি লেখা বড় করেছেন তাঁর জন্য লেআউট সংকীর্ণ রূপে আগে বদলে যায়। মিডিয়া কোয়েরিতে em ব্রাউজারের ডিফল্টকে নির্দেশ করে, কোনো উপাদানকে নয়, তাই তা চক্রবৃদ্ধি হয় না।

px থেকে em রূপান্তরের সময় ফাঁদ

ভুল ভিত্তি ব্যবহার

সবচেয়ে সাধারণ ভুল। font-size-এর জন্য পিতামাতার আকার ব্যবহার করুন; বাকি সবকিছুর জন্য উপাদানের নিজের। ভিত্তি টাইপ করার আগে যাচাই করুন কোন প্রপার্টি রূপান্তর করছেন।

ভুলে যাওয়া যে পিতামাতাও em-এ হতে পারে

পিতামাতার ফন্ট সাইজ নিজেই em-এ থাকলে প্রকৃত আকার জানতে আপনাকে শিকল ধরে ওপরে যেতে হবে। স্টাইলশিট জটিল হলে ফন্ট সাইজ rem-এ বদলে নিন আর ফাঁকের জন্য em রাখুন।

পুরো কম্পোনেন্টের জন্য একটি সংখ্যা আশা করা

ভিন্ন আকারের লেখা থাকা একটি কম্পোনেন্টের অংশগুলোর কোনো একক em মান নেই। প্রতিটি অংশ তার নিজের ভিত্তির সাপেক্ষে রূপান্তর করুন।

একই প্রপার্টির জন্য em আর rem মেশানো

1em মার্জিনের পাশে 1rem প্যাডিং বৈধ এবং প্রায়ই বিভ্রান্তিকর। একটি নিয়ম বেছে নিন, যেমন ফন্ট সাইজের জন্য rem আর ফাঁকের জন্য em, এবং তাতে লেগে থাকুন।

রূপান্তরের আগে মানুষ যে প্রশ্ন করে

16 px কত em?

এক, যদি কার্যকর ফন্ট সাইজ 16 px হয়। উপাদানের ফন্ট সাইজ 20 px হলে 16 px হলো 0.8 em।

em কি rem-এর চেয়ে ভালো?

কোনোটিই ভালো নয়। ফন্ট সাইজ আর বৈশ্বিক লেআউটের জন্য rem ভালো। নিজের লেখা অনুসরণ করা উচিত এমন ফাঁকের জন্য em ভালো।

আমার প্যাডিং প্রত্যাশার চেয়ে বড় কেন?

কারণ তা উপাদানের ফন্ট সাইজের সাপেক্ষে, যা আপনার ধরে নেওয়ার চেয়ে বড় হতে পারে। ব্রাউজারের ডেভেলপার টুলে গণনা করা ফন্ট সাইজ যাচাই করুন।

আমি কি দশমিক ব্যবহার করতে পারি?

হ্যাঁ। 0.625em আর 1.333em-এর মতো মান স্বাভাবিক।

আমার সংখ্যা কি আপলোড হয়?

না। হিসাব চলে আপনার ব্রাউজারে আর কিছুই কোথাও পাঠানো হয় না।

কীভাবে ফিরে যাব?

em থেকে px দিয়ে, যা ভাগের বদলে গুণ করে।

px থেকে em রূপান্তরের সময় বুদ্ধিমানের সঙ্গে বাছাই

ঠিক করুন মানটি কীসের

এটি লেখার হলে em সঠিক। এটি পাতার হলে, যেমন কলামের প্রস্থ বা সেকশনের ফাঁক, rem বা একটি ভিউপোর্ট একক ভালো মানায়। px থেকে vw একটি আকারকে পর্দার প্রস্থের অংশ হিসেবে প্রকাশ করে।

মন্তব্যে উদ্দেশ্য লিখুন

padding: 0.75em 1.25em; /* 12px 20px at 16px */-এর মতো একটি লাইন যুক্তিটি দৃশ্যমান করে। পরে ফন্ট সাইজ বদলালে আপনি জানবেন সংখ্যাগুলো কী হওয়ার কথা ছিল।

কম্পোনেন্টের ফন্ট সাইজ এক জায়গায় রাখুন

কম্পোনেন্টের মূল উপাদানে ফন্ট সাইজ ঠিক করুন এবং ভেতরের সবকিছুকে তা নির্দেশ করতে দিন। তাহলে ভেতরের em মানগুলো কম্পোনেন্টের সর্বত্র একই অর্থ বহন করে, আর আপনি একটিমাত্র ভিত্তির সাপেক্ষে px থেকে em রূপান্তর করতে পারেন।

px থেকে em রূপান্তরের সময় ভালো অভ্যাস

একবারে একটি কম্পোনেন্টের px থেকে em রূপান্তর করুন

পুরো স্টাইলশিটের px থেকে em একসঙ্গে রূপান্তর করার চেষ্টা করবেন না। একটি কম্পোনেন্ট নিন, যেমন কার্ড বা বোতাম, তার ফন্ট সাইজ ঠিক করুন, এবং তার ফাঁকের প্রতিটি মান সেই আকারের সাপেক্ষে রূপান্তর করুন। কম্পোনেন্ট শেষ হলে দুই বা তিনটি লেখার আকারে তা পরীক্ষা করুন। তারপর পরেরটিতে যান।

গোল সংখ্যায় নয়, বেখাপ্পা মানের জন্য ক্যালকুলেটর ব্যবহার করুন

8, 16 আর 24 পিক্সেলের মতো মান 16 ভিত্তিতে পরিচ্ছন্ন em সংখ্যায় রূপান্তরিত হয়। 22 বা 13-এর মতো বেখাপ্পা মান লম্বা দশমিক দেয়। এগুলোর জন্য px থেকে em রূপান্তর করার সময় ঠিক করুন ডিজাইনে সত্যিই নিখুঁত সংখ্যা দরকার নাকি নিকটতম গোল em মানই সমান ভালো। ডিজাইনাররা প্রায়ই গোল করতে খুশি, আর একটি পরিচ্ছন্ন স্টাইলশিট রক্ষণাবেক্ষণ সহজ।

ভিত্তির একটি রেকর্ড রাখুন

প্রতিটি em মানের পাশে ভিত্তি কী ছিল বলে একটি ছোট মন্তব্য পরের মানুষটিকে সাহায্য করে। কেউ পরে কম্পোনেন্টের ফন্ট সাইজ বদলালে তিনি জানবেন ফাঁক তা অনুসরণ করে ডিজাইনের কারণে, দৈবক্রমে নয়। সেটি একবার লিখে রাখা তার সময়ের মূল্য রাখে।

rem সমতুল্যের সঙ্গে তুলনা করুন

একটি মানের জন্য em নাকি rem মানায় নিশ্চিত না হলে px থেকে em এবং rem-এ রূপান্তর করুন আর জিজ্ঞাসা করুন লেখার আকার বদলালে কী হওয়া উচিত। মানটি উপাদানের নিজের লেখা অনুসরণ করা উচিত হলে em নিন। এটি পাতা অনুসরণ করা উচিত হলে rem নিন।

সম্পর্কিত কনভার্টার

একই পরিবারের টুলগুলো পাশের রূপান্তরগুলো ঢাকে। পিক্সেলে ফিরতে em থেকে px ব্যবহার করুন। মূলের সাপেক্ষে আকারের জন্য আছে px থেকে rem আর rem থেকে px, এবং পর্দার সাপেক্ষে আকারের জন্য px থেকে vw আর vw থেকে px। একই স্টাইলশিটের রঙের জন্য HEX থেকে RGB আর HEX থেকে HSL নোটেশন সামলায়।

একটি কাজের উদাহরণ

ধরুন একটি বোতামের লেবেল 14 px এবং ডিজাইন বোতামকে দেয় 10 px উল্লম্ব প্যাডিং আর 20 px অনুভূমিক প্যাডিং। আপনি ভিত্তি হিসেবে 14 টাইপ করেন, 10 টাইপ করে পড়েন 0.714 em, 20 টাইপ করে পড়েন 1.429 em। স্টাইলশিটে আপনি লেখেন padding: 0.714em 1.429em। একই বোতাম 18 px লেবেলসহ একটি হিরোতে ব্যবহৃত হলে প্যাডিং হয় 12.9 px আর 25.7 px, অনুপাতে। আপনি 10px আর 20px লিখলে বড় লেখার চারপাশে বোতামটি চিমড়ে দেখাত।

একটি সংক্ষিপ্ত চেকলিস্ট

রূপান্তরের আগে

ঠিক করুন মানটি কোন প্রপার্টির, এবং এটি যে ফন্ট সাইজের সাপেক্ষে হওয়া উচিত তা খুঁজে নিন।

রূপান্তরের সময়

পিক্সেল মান ও ঠিক ভিত্তি টাইপ করুন, এবং em সংখ্যাটি একক সহ কপি করুন।

রূপান্তরের পর

ব্রাউজারে কম্পোনেন্টের ফন্ট সাইজ বদলান এবং যাচাই করুন ফাঁক তা অনুসরণ করে কি না। চক্রবৃদ্ধি হওয়া নেস্ট করা em মান খুঁজুন।

সাধারণ ভুল

প্যাডিংয়ের ভিত্তি হিসেবে মূলের আকার ব্যবহার

সেটি rem-এর কাজ। Em উপাদানের নিজের ফন্ট সাইজকে নির্দেশ করে।

প্রতিটি ফন্ট সাইজের জন্য em ব্যবহার

নেস্ট করা em ফন্ট সাইজ চক্রবৃদ্ধি হয় এবং আপনাকে অবাক করে। ফন্ট সাইজের জন্য rem ব্যবহার করুন।

চোখে পরিচ্ছন্ন অথচ ভুল সংখ্যায় গোল করা

বড় ফন্টে গুণ করলে 1.43 আর 1.5 এক নয়। যথেষ্ট অঙ্ক রাখুন।

আপনার সংখ্যা আপনার ডিভাইসেই থাকে

হিসাব হয় স্থানীয়ভাবে। আপনার মান ব্যবহার করে আপনার নিজের ব্রাউজার আর কিছুই কোথাও পাঠানো হয় না। পরে মোছার কিছু নেই আর বানানোর কোনো অ্যাকাউন্টও নেই। px থেকে em রূপান্তরের সহজ পথ এটাই।

সারসংক্ষেপ

এখানে px থেকে em রূপান্তর করতে পিক্সেলে আকার আর যে ফন্ট সাইজের সাপেক্ষে তা টাইপ করুন, এবং সূত্র em = px ÷ base ব্যবহার করে তখনই ফল পড়ুন। রূপান্তর মানটি যেখানে ব্যবহৃত হয় সেখানকার কার্যকর ফন্ট সাইজের সাপেক্ষে অনুপাত রাখে। এটি একটি পাতার জন্য একক উত্তর দিতে পারে না: em উপাদানের নিজের ফন্ট সাইজের সাপেক্ষে, বা font-size-এর জন্য পিতামাতার, তাই একই 1.5 em হলো 16 px উপাদানের ভেতরে 24 px আর 24 px উপাদানের ভেতরে 36 px, এবং em-এর ভেতরে em গুণ হয়। সর্বত্র খাটে এমন একটি সংখ্যার জন্য rem ব্যবহার করুন। কিছু আপলোড হয় না।