Em বনাম Rem: কখন কোনটা ব্যবহার করবেন

আপনি ফ্লেক্সিবল ইউনিক ব্যবহারে অভ্যস্ত হলেও এখনও ঠিক বুঝতে পারেন না যে rem এবং  em এর মধ্যে ঠিক পার্থক্য কি। এই টিউটোরিয়ালে সেটা আপনি বুঝতে পারবেন!

em ও rem দুইটাই ফ্লেক্সিবল, স্কেলেবল ইউনিন, সেটা আসলে ব্রাউজারের পিক্সেল ভ্যালু এসাইন করে, সাইট ডিজাইনের ফন্ট সাইজের উপর ভিত্তি করে। আপনি যখন 1em বা 1rem ভ্যালু সেট করেন, আপনার ডিজাইনের উপর ভিত্তি করে সেটার মান 16px থেকে 160px বা যেকোন ভ্যালু হতে পারে।

ব্রাউজারে 1px পিক্সেলের সাইজ সব সময় ফিক্সড থাকে, তাই  1px সব সময় 1px ডিসপ্লে করবে।

কোডপেনে এই উদাহরণটি ট্রাই করুন, দেখুন কিভাবে rem এবং em ইউনিটের মান বিভিন্ন ভ্যালুতে নির্ধারণ হয়, কিন্তু px এ ভ্যালু সেট করলে সেটায় সব সময় ফিক্স ভ্যালু এসাইন করা থাকে।

বড় প্রশ্নটি যেটা

em এবং rem ইউনিট ডিজাইনে ফ্লেক্সিবিলিটি দেয়, এবং ইলিমেন্ট স্কেল করতে সুবিধা হয়, ফিক্সড সাইজ নিয়ে আটকে থাকতে হয় না। আমরা এই ফ্লেক্সিবিলিটি ব্যবহার করে আমাদের ডিজাইন করার আরও সহজ করে ফেলতে পারি ডেভেলাপমেন্টে, এভাবে ব্রাউজারের জন্য আরও বেশি রেস্পন্সিভ ডিজাইন করা সম্ভব। এই উপায়ে সাইটের রিডেবিলিটি বাড়ে।

em ও rem দুটা ইউনিটই ডিজাইনের কাজে ফ্লেক্সিবিলিটি দেয়, তো এখন প্রশ্ন হচ্ছে, কখন em এবং কখন rem ব্যবহার করতে হয়?

বিস্তর তফাৎ

em ও rem ইউনিক দিয়ে ব্রাউজার কিভাবে px ভ্যালু সেট করে তার মধ্যে পার্থক্য হয়েছে। এই পার্থক্য বুঝলেই টের পাওয়া যাবে কখন কোন ইউনিট ব্যবহার করতে হবে।

এখন em ও rem এর তফাৎ নিয়ে আমরা বিস্তারিত আলোচনা করব এরপর আমরা দেখবো কেন আমাদের em ও rem ব্যবহার করে ডিজাইন করা উচিৎ।

সবশেষে আমরা দেখব কিভাবে এই দুই ইউনিট ব্যবহার করে ডিজাইন করতে হয়।

rem কিভাবে পিক্সেল ভ্যালুতে ট্রান্সলেট হয়।

rem ইউনিট ব্যবহারের সময়, পিক্সেল পেজের রুট ইলিমেটের ফন্ট সাইজের উপর ডিপেন্ড করে, যেমন html ইলিমেন্টের ওপর। ওই রুট ফন্ট সাইজ rem এর সাথে গুন করে পিক্সেল ইউনিটে কনভার্ট করা হয়।

উদাহরণস্বরূপ, রুটে ফন্ট সাইজ 16px আর 10rem ভ্যালু দুটা গুন করে রেমের পিক্সেল ভ্যালু 160px সেট হবে। যেমনঃ 10x16 = 160.

em থেকে যেভাবে পিক্সেল ভ্যালু সেট হয়।

em ইউনিট ব্যবহারকালে, যেই ইলিমেন্ট স্টাইল করা হচ্ছে, সেটার ফন্ট ভ্যালুর সাথে গুল হয়ে পিক্সেল ভ্যালু বের হয়।

একটা div এর ফন্ট সাইজ 18px হলে 10rem এর মান 180px হবে। যেমনঃ 10x18 = 180.

জানা জরুরিঃ

অনেকে ভাবে em রুটের ফন্ট সাইজের অনুপাতে কাজ করে। W3 ডকুমেন্টেশনে দেখা যায়, যেই ইলিমেন্টে em ব্যবহার হচ্ছে, "সেটার অনুপাতে পিক্সেল ভ্যালু সেট হয়"।

প্যারেন্ট ইলিমেন্ট em এর ভ্যালু ইফেক্ট করতে পারে, কিন্তু সেটা শুধু মাত্র ইনহেরিটেন্সের জন্য হয়। আসুন দেখে নেই এটা কিভাবে কাজ করে।

em এর উপর কিভাবে ইনহেরিটেন্স এর প্রভাব পরে

em নিয়ে কাজ করার জন্য এটা অটোমেটিক্যালি প্যারেন্ট ইলিমেন্টের ফন্ট সাইজ ইনহেরিট করে। এই ইনহেরিটেন্স অভাররাইড করে অন্য ফন্ট সাইজ বসিয়ে এটা দূর করতে হয়। যেমন px বা vw.

ফন্ট সাইজের উপর ডিপেন্ড করে em ইউনিটের সাইজ ডিটারমিনড হয়। কোন ইলিমেন্ট সেটার প্যারেন্ট ইলিমেন্টের ফন্ট সাইজ ইনহেরিট করতে পারে, যেটা নিজের প্যারেন্ট ইলিমেন্ট থেকে ফন্ট সাইজ ইনহেরিট করতে পারে। এভাবে এটা চলতেই থাকে। কারণ যে কোন প্যারেন্ট দ্বারা em এর ভ্যালু ইফেক্টেড হতে পারে।

আসুন একটি উদাহরণ দেখি। কোডপেনের এই ডেমোটি দেখে নিন, ধাপগুলো সম্পর্কে আইডিয়া হবে। ক্রোম ডেভেলাপার টুলস বা ফায়ারবাগ ব্যবহার করে, em এর জন্য ইউনিটের পিক্সেল ভ্যালু চেক করুন।

em এর ইনহেরিটেন্স ভ্যালুর উদাহরণ

পেজের রুট ফন্ট সাইজ যদি 16px হয় (সাধারণত বাই ডিফল্ট থাকে) তাহলে এর ভিতরের চাইল্ড ডিভের প্যাডিং 1.5em হয়ে যাবে ইনহ্যারিট ভ্যালুর জন্য 16px এর গুনিতক। পুয়াডিং হবে 24px, মানে 1.5 x 16 = 24

কিন্তু যদি ডিভের font-size 1.5em সেট করি?

তখন 16px আবার font-size দিয়ে গুন হবে, 1.5em এর জন্য তাহলে ডিভের ফন্ট সাইজ হবে 20px, মানে. 1.25 x 16 = 20.

এখন ডিভটি অরিজিনার রুটের স্টাইল সরাসরি ইনহেরিট করছে না। এখন ইনহেরিটেড ফন্ট সাইজ 20px. তাই 1.5em এর প্যাডিং ভ্যালু এখন হবে 30px, i.e. 1.5 x 20 = 30.

em এর এই স্কেলিং ভ্যালু অরিজিনাল ডিভের একটা ফন্ট ভ্যালু বসিয়ে ঠিক করা যাবে। 1.2em বসাই।

তাহলে ডিভ 20px ইনহেরিট করবে, 1.2em সেটিংস এর জন্য। নতুন ফন্ট সাইজ হবে 24px, i.e. 1.2 x 20 = 24.

ডিভের 1.5em প্যাডিং হবে 36px, i.e. 1.5 x 24 = 36.

ফাইনালি, em ইউনিট কিভাবে ভ্যালু ইনহেরিট করে, (প্যারেন্ট ইলিমেন্ট থেকে না) সেটা আমরা প্যাদিং 1.5em এর জন্য ফন্ট ভ্যালু কিভাবে 14px হবে সেটা করে দেখাবো।

এখন, আমাদের প্যাডিং কমে 21px, i.e. 1.5 x 14 = 21 হয়েছে। এটা প্যারেন্ট ইলিমেন্টের ফন্ট সাইজ ইনহেরিট করেনি।

এই জটিলতার মাঝেই, em এর ভ্যালু ম্যানেজ করে ডিজাইন করতে হয়।

HTMLইলিমেন্ট ফন্ট সাইজের জন্য ব্রাউজার সেটিংস এর পরা ইফেক্ট

বাই ডিফল্ট ব্রাউজারের রুট পেজ ফন্ট সাইজ 16px দাওয়া থাকে। কিন্তু এটা 9px থেকে 72px পর্যন্ত চেঞ্জ করা যায়।

জানা জরুরীঃ

রুট html ইলিমেন্ট ব্রাউজারের সেটিংস থেকে একটা ভ্যালু ইনহেরিট করে, যদি না একটা ফিক্স ভ্যালু সেট করে সেটা ওভাররাইড করা হয়।

তো html ইলিমেন্টের ফন্ট ভ্যালু সরাসরি rem ভ্যালুর উপর নির্ভর করে, এবং ব্রাউজার সেটিংস এর উপরেও নির্ভর করে।

ফলে ব্রাউজার ফন্ট সাইজের সেটিংস এর ভ্যালুও ডিজাইনের rem ইউনিট থেকে সেট হতে পারে, আবার em ইউনিক থেকে ইনহেরিটও করতে পারে।

যখন কোন HTML ফন্ট সেট ক্রয়া থাকে না, তখন ব্রাউজারে ডিফল্ট ফন্ট সাইজ

যদি না ভাররাইড করা হয়, html ইলিমেন্ট ব্রাউজারের ডিফন্ট ফন্ট ভ্যালু ইনহেরিট করে নেয়। উদাহরণস্বরূপ, একটা সাইট নেই যেখানে font-size প্রপার্টি html ইলিমেন্ট থেকে সেট করা।

কারো ব্রাউজারে ডিফল্ট ফন্ট সাইজ 16px সেট করা থাকলে, রুট ফন্ট সাইজও 16px হবে। ক্রোম ডেভেলাপার টুল দিয়ে দেখে নেয়া যায় যে কন ইলিমেন্ট কি ভ্যালু ইনহেরিট করছে - Computed ট্যাবে গিয়ে Show inherited properties দেখে নিন।

এখানে 10rem সমান সমান 160px অথবা 10 x 16 = 160.

ইউজার এই ফন্ট সাইজ বারিয়ে 18px করে নিলে, রুট ফন্ট সাইজ হয়ে যাবে 18px. এখন 10rem মানে হচ্ছে 180px, অথবা 10 x 18 = 180.

তাই ব্রাউজার সেটিংস em ইউনিট দিয়ে HTMLফন্ট সাইজ সেট করতে প্রভাব ফেলে।

html ইলিমেন্টের ফন্ট সাইজ em বেসড হলে, পিক্সের ভ্যালু ট্রান্সলেট হয়ে অনেক রকম ফন্ট সেটিংস হতে পারে।

উদাহরণস্বরূপ, যদি সাইটের html ইলিমেন্টে font-size প্রপার্টি 1.25em হয়, রুট ফন্ট সাইজ হবে ব্রাউজার ফন্ট সাইজের 1.25 গুণ।

ব্রাউজার ফন্ট সাইজ 16px সেট করা থাকলে, রুট ফন্ট সাইজ হবে 20px, কারণ 1.25 x 16 = 20.

আর যদি 10rem সমান সমার 200px হয়, তাহলে 10 x 20 = 200.

তবে, যদি ব্রাউজারের ফন্ট সাইজ 20px সেট করা থাকে, রুট ফন্ট সাইজ হয়ে যাবে 250px, কারণ 1.25 x 20 = 25.

এখন 10rem এর মান হবে 250px, কারণ 10 x 25 = 250.

em এবং rem এর পার্থক্যের সারসংক্ষেপ

উপরে যত কথা বললাম, তার সারমর্ম হচ্ছেঃ

• rem ইউনিটের পিক্সেল ভ্যালু সেট হয় html ইলিমেন্টের ফন্ট সাইজের মানের উপর নির্ভর করে। ফন্ট সাইজ ব্রাউজারের ফন্ট সাইজ ইনহেরিট করে, যদি না আগে থেকে ওয়াররাইড করা হয়।

• em এর পিক্সেল ভ্যালু ইলিমেন্টের ফন্ট সাইজ ইনহেরিট করে। এই ফন্ট সাইজ আবার প্যারেন্ট ইলিমেন্টের ফন্ট ভ্যালু ইনহেরিট করে। কিন্তু ওভাররাইড করা থাকলে ইনহেরিট করেনা।

কেন rem ইউনিট ব্যবহার করবেনঃ

rem ফিক্সড একটা ভ্যালু দেয় না। এটা ইনহেরিটেন্স কাজে লাগিয়ে একটা ডায়নামিক ভ্যালু সেট করে। যেখানে আনুপাতিক মাপে মান সেট করতে হয়, সেখানে px এর পরিবর্তে rem ব্যবহার করা উচিৎ।

তাই, rem ব্যবহারের মূল কারণ হচ্ছে ব্রাউজারের ডিফল্ট ফন্ট সাইজের সাথে মিলিয়ে ভ্যালু সেট করা।

এটার ফোকাস সবচেয়ে সাধারণ ব্রাউজার ফন্ট সাইজ 16px এর উপর ভিত্তি করে হতে পারে।

কিন্তু rem ব্যবহার করলে, ইনহেরিটেড ভ্যালু প্রিজার্ভ থেকেও আনুপাতিক মান সেট হবে।

আর যদি ইউজার নিজের ফন্ট সাইজ কমিয়ে দিয়ে থাকে, পুরো লেআউটেরই সাইজ স্কেল ডাউন হয়ে যায়, তখন তারা টেক্সত পড়তেই পারবে না।

ইউজারের চেঞ্জ করা ফন্ট সাইজ পরিবর্তনের অনেক কারণ থাকতে পারে, একেকজন একেক সাইজের লেখা পড়তে স্বাচ্ছন্দ্যবোধ করেন। এগুলা মাথায় রেখে ডিজাইন করতেই এই ইউনিট।

জানা জরুরিঃ 

অনেক ডিজাইনার html ইলিমেন্টের font-size সেট করতে px ভ্যালুর পরিবর্তে rem ব্যবহার করছেন। ডিজাইনের সাথে সামঞ্জস্য রেখে html ইলিমেন্টের ফন্ট সাইজ সেট করতেই সেই কাজ করা হয়।

html ইলিমেন্টের দিফল্ট ব্রাউজার ভ্যালু কখনই চেঞ্জ করা উচিৎ না। এতে করে ভিউয়ারের সেটিংস নিজের মত সেট করে নেয়ার সুবিধা নষ্ট হয়।

html ইলিমেন্টের ফন্ট সাইজ চেঞ্জ করতেই হবে সেটা রুট ফন্ট সাইজে করুন। কিন্তু ব্রাউজারের ডিফন্ট ভ্যালুতে em বা rem দিয়ে নয়।

এতেও html ইলিমেন্টের ফন্ট সাইজ চেঞ্জ করে ডিজাইন স্কেল আপ ও ডাউন করা যাবে।

কেন em ইউনিট ব্যবহার করবেন।

html ইলিমেন্টের ডেফিনিট ফন্ট ভ্যালু সেট করতে em ব্যবহার করবেন।

em ব্যবহারে স্কেলেবিলিটি নিশ্চিত হয়।

উদাহরণস্বরূপ, ন্যাভিগেশন মেন্যুতে padding, margin এবং line-height em দিয়ে সেট করবেন।

এতে করে সেট করা মেন্যু ফন্ট সাইজের স্কেলেবিলিটি বাড়বে

em এর আগের কোন ভ্যালু ইনহেরিটেন্স হচ্ছে কিনা চেক করে দেখার জন্য। তাই কিছু আইডেন্টিফাই করতে em ইউনিক ভ্যালু ব্যবহার করবেন।

বাস্তব ব্যবহার

একেক ডিজাইনার একেকভাবে কাজ করে, এবং নিজের কাজ করার ধরনকেই বতর্কে সমর্থন করে।

em ইউনিট ব্যবহার করবেনঃ

ইলিমেন্ট রুট ছাড়া যে কোন ইলিমেন্টের স্কেলেবল font-size সেট করতে

em ব্যবহার করবেন নন ডিফল্ট ফন্ট সাইজ সেট করতে ।

উপরে দেয়া উদাহরণ এর মত, মেন্যু আইটেম, বাটন, হেডিং ইত্যাদি ইলিমেন্ট। এই ফন্ট সাইজ পরিবর্তন করলে স্কেলও পরিবর্তন হবে।

margin, padding, width, height  এবং line-height এর মত কমন প্রপার্টি এই নিয়মে সেট করা হয়।

ফাঁকা em ইউনিট ব্যবহারের সময়, rem সেট করে ইনহেরিটেন্স এর কনফিউশন দূর করা যায়।

ফন্ট সাইজের জন্য em ব্যবহার করবেন না।

প্রায় সময়ই দেখা যায় ফন্ট সাইজ em দিয়ে সেট করা হয়। তবে এটা rem দিয়ে ম্যানেজ করাই বেটার।

হেডিং এ px এর পরিবর্তে rem ব্যবহার করাই উত্তম। rem দিয়ে এই ডিজাইনের উদ্দেশ্য পূরণ ঠিক মত হয়। html ইলিমেন্টে কোন অ্যাডজাস্টমেন্ট করা হলে, সেটা স্কেল করতে সুবিধা হয়।

html ইলিমেন্টে em ফন্ট সাইজ সেট করুন। এরপর নিজেই দেখন ফলাফলঃ

প্রায় সময়ই আমরা চাই না ফন্ট সাইজ ইমিলেন্টের উপর নির্ভর করে স্কেল হোক। কয়েকটি ব্যতিক্রম বাদে।

একটি এমন ব্যতিক্রম হচ্ছে ড্রপ ডাউন মেন্যু। যেখানে একটি সেকেন্ড লেভেল মেন্যু আছে সেখানে em ব্যবহার হবে। যেই সেকেন্ড লেভেল মেন্যুর ফন্ট সাইজ ফার্স্ট লেভেল মেন্যুর উপর ভিত্তি করে সেট হবে। আরেকটি এমন উদাহরণ হচ্ছে বাটনের ভিতরে আইকন।

কন্তু জেনারেলি rem ব্যাবহারেই চলবে। em বিশেষ কেসে ব্যবহারের জন্য।

rem ইউনিট ব্যবহার করবেন কারণঃ

উপরে উল্লেখিত বিশেষ কারণ বাদে এমন ইলিমেন্ট যেখানে em ব্যবহার দরকার নেই, সেখানে ফন্ট সাইজ রেম দিয়ে সেট করবেন।

বেশিরভাগ heights, বেশিরভাগ widths, বেশিরভাগ padding, বেশিরভাগ margins, border widths, বেশিরভাগ font sizes, shadows সহ প্রায় লেআউটের সবই।

সবই rem ইউনিটে সেট করবেন।

টিপ

পিক্সেলে চিন্তা করে নিয়ে rem এ বসানো সহজ।

স্টাইলাস / স্যাস / লেস এর মত প্রিপ্রসেসর ব্যবহার করলে নিজে থেকেই rem ব্যবহৃত হয়। অথবা PXtoRem প্লাগিন সহ পোষ্টসিএসএস এর মত কোন পোস্টপ্রসেসর। 

বা কনভার্সনের জন্য PXtoRem নিজে ম্যানুয়েলি ব্যবহার করতে পারেন।

মিডিয়া কুয়েরিতে সব সময় rem ব্যবহার করবেন

না জানা স্কেলের জন্য যখন rem দিয়ে মান বসাচ্ছেন, তখন মিডিয়া কুয়েরিতে rem ইউনিট ব্যবহার করবেন। এতে করে ফন্ট সাইজ যাই হোক কুয়েরিতে স্কেলিং ঠিক মত হবে।

উদাহরণ সরুপ, বড় স্ক্রিনে নরমাল ফন্টসাইজ ও অনেক ছোট স্ক্রিনে বড় পরিষ্কার ফন্ট সাইজ সেট হবে।

ব্রেকপয়েন্টের উইড পিক্সেলে সেট করা থাকলে, সেটা শুধু মাত্র ভিউপোর্ট দিয়ে ট্রিগার করা সম্ভব। rem বেসড ব্রেক পয়েন্টের মাধ্যমে ব্রেক পয়েন্টের জন্য ফন্ট সাইজিং ফিক্স করা সম্ভব।

em এবং rem যে সব যায়গায় ব্যবহার করবেন নাঃ

মাল্টি কলাম লেআউট উইদ

লেআউটের ফ্লুইডিটি রক্ষা করতে এখানে % বেসড ভিউপোর্ট সাইজ ব্যবহার করতে হবে।

কিন্তু সেইম কলামে সেট করার সময় max-width সেট rem দিয়ে করা যায়।

উদাহরণস্বরূপঃ

1

.container {

2

    width: 100%;

3

    max-width: 75rem;

4

}

এটা কলাম ফ্লেক্সিবল ও স্কেলেবল রাখে। কিন্তু ওয়াইড টেক্সট প্রিভেন্ট করে। ফলে পাঠকের পড়তে সুবিধা হয়।

কখন একটা ইলিমেন্ট আনস্কেলেবল রাখতে হবে

সাধারণ ওয়েবসাইটে এমন ইলিমেন্ট সাধারণত থাকে না যেটা স্কেল করা সম্ভব না। কিছু কিছু ব্যাতিক্রত কেসে আন স্কেলেবল ইলিমেন্ট রাখা বাধ্যতামূলক হয়ে দাঁড়ায়।

এই প্রিকন্ডিশনে ওই ইমিলেন্ট স্কেল করলে ব্রেক হয়। যদিও এমন কেস অনেক রেয়ার, এসব যায়গায় px ভ্যালু ব্যবহার করা দরকার নেই, যদি না একেবারেই উপায় না থাকে।

শেষের কথা

আসুন দেখি আমরা এই আর্টিকেলে কি কি কভার করলাম

• rem বনাম em উইনিটের পিক্সেল ভ্যালুতে ডিজাইনের তুলনা ।
• em ইউনিট ইলিমেন্টের ফন্ট সাইজের উপর নির্ভর করে সেট হয়।
• rem ইউনিট html ইলিমেন্টের ফন্ট সাইজের উপর ভিত্তি করে সেট হয়।
• em ইউনিট ফন্ট সাইজ ইনহেরিট করে।

• rem  ব্রাউজারের ফন্ট সেটিংস ইনহেরিট করে।

• em ইউনিট ফন্ট সাইজের উপর ভিত্তি করে স্কেল হয়।
• rem ইউনিটের ফন্ট সাইজিং এর জন্য em দরকার পরেনা। এটা ব্রাউজারের ফন্ট সাইজ সেটিংস থেকে ইনহেরিট হয়।
• যদি শিওর না থাকেন যে em ব্যবহার করতে হবে, তাহলে rem ব্যবহার করুন।
• মিডিয়া কুয়েরিতে rem ব্যবহার করুন
• মাল্টি কলাম লেআউট ডিজাইনে em বা rem ব্যবহার করা দরকার নেই, বরং % ব্যবহার করুন।
• লে আউট ইলিমেন্ট ব্রেকের ভয় থাকলে em বা rem ব্যবহার থেকে বিরত থাকুন।

তো আমরা দেখলাম কিভাবে কেন আর কখন কোথায় em এবং rem এর ব্যবহার হয়। এগুলা ডিজাইনের কি কাজে ব্যবহার করা যায়।

এই আর্টিকেলের টিপস ব্যবহার করে দেখুন আপনার ডিজাইন ইম্প্রুভ হয় কিনা।