ফন্ট মাপ পরিবর্তন করতে EMS ব্যবহার করে
যখন আপনি একটি ওয়েব পৃষ্ঠা তৈরি করছেন তখন বেশিরভাগ পেশাদাররা আপনাকে ইম্ফ, এক্সস, শতকরা, বা পিক্সেলের মতো একটি আপেক্ষিক পরিমাপের সাথে ফন্টগুলি (এবং প্রকৃতপক্ষে, সবকিছু) আকারে সুপারিশ করে। এটি কারন আপনি আসলে এমন কোনও উপায় জানেন না যা কেউ আপনার সামগ্রী দেখতে পারে না। এবং যদি আপনি একটি সম্পূর্ণ পরিমাপ (ইঞ্চি, সেন্টিমিটার, মিলিমিটার, পয়েন্ট, বা পিকাস) ব্যবহার করেন তবে এটি বিভিন্ন ডিভাইসগুলিতে পৃষ্ঠাটির প্রদর্শন বা পঠনযোগ্যতা প্রভাবিত করতে পারে।
এবং W3C আপনাকে মাপের জন্য ems ব্যবহার করার পরামর্শ দেয়।
কিন্তু কত বড় একটি এম হয়?
W3C একটি এম অনুযায়ী:
"উপাদানটির 'ফন্ট-আকার' সম্পত্তির গণনাকৃত সমমানের সমতুল্য এটি ব্যবহার করা হয়। ব্যতিক্রম যখন 'em' 'ফন্ট-আকার' সম্পত্তির মূল্যের মধ্যে ঘটে, তখন সেই ক্ষেত্রে এটি উল্লেখ করে মূল উপাদান ফন্টের আকারে। "
অন্য কথায়, ems এর একটি পূর্ণ আকার নেই। তারা যেখানে তাদের উপর ভিত্তি করে তাদের আকার মান গ্রহণ। বেশিরভাগ ওয়েব ডিজাইনারের জন্য , এর মানে হল যে তারা একটি ওয়েব ব্রাউজারে রয়েছে, তাই 1 ম লম্বা ফন্টটি একই ব্রাউজারের ডিফল্ট ফন্টের আকারের আকারের সমান।
কিন্তু ডিফল্ট সাইজ কত লম্বা? গ্রাহকরা তাদের ব্রাউজারে তাদের ডিফল্ট ফন্টের আকার পরিবর্তন করতে পারেন, তবে 100% নির্দিষ্ট হওয়ার কোন উপায় নেই, তবে অধিকাংশ মানুষ এটিকে অনুমান করতে পারেন না যে অধিকাংশ ব্রাউজারে 16px এর একটি ডিফল্ট ফন্ট আকার রয়েছে। সুতরাং অধিকাংশ সময় 1em = 16px ।
পিক্সেলগুলিতে চিন্তা করুন, পরিমাপের জন্য EMS ব্যবহার করুন
একবার জানতে হলে ডিফল্ট ফন্ট সাইজ 16 পিএক্স হয়, তাহলে আপনি আপনার ক্লায়েন্টকে সহজেই পৃষ্ঠার আকার পরিবর্তন করার জন্য ems ব্যবহার করতে পারেন কিন্তু আপনার ফন্ট মাপের জন্য পিক্সেল মনে করতে পারেন।
বলুন আপনি এই মত একটি আকার পরিবর্তন কাঠামো আছে:
- শিরোনাম 1 - ২0px
- শিরোনাম 2 - 18px
- শিরোনাম 3 - 16 পিএক্স
- প্রধান পাঠ্য - 14px
- উপ পাঠ্য - 1২px
- পাদটীকা - 10 পিএক্স
আপনি পরিমাপ জন্য পিক্সেল ব্যবহার করে যে ভাবে তাদের সংজ্ঞায়িত করতে পারেন, কিন্তু তারপর IE 6 এবং 7 ব্যবহার করে কেউ কেউ ভাল আপনার পৃষ্ঠার আকার পরিবর্তন করতে সক্ষম হবে না। তাই আপনি ems থেকে মাপ রূপান্তর করা উচিত এবং এই কিছু গণিত একটি ব্যাপার মাত্র:
- শিরোনাম 1 - 1.25 এম (16 x 1.25 = ২0)
- শিরোনাম 2 - 1.1২5 সংখ্যা (16 × 1.1২5 = 18)
- শিরোনাম 3 - 1em (1em = 16px)
- প্রধান পাঠ্য - 0.875েম (16 x 0.875 = 14)
- উপ পাঠ্য - 0.75েম (16 x 0.75 = 1২)
- পাদটীকা - 0.6২5 সংখ্যা (16 x 0.6২5 = 10)
উত্তরাধিকার ভুলে যান না!
কিন্তু যে সব ems পর্যন্ত আছে না আপনি স্মরণ রাখতে হবে অন্য জিনিস তারা অভিভাবক এর আকার নিতে। সুতরাং যদি আপনি ভিন্ন ফন্ট মাপের উপাদানগুলি নেস্টেড করে থাকেন, তাহলে আপনি আশা করতে পারেন যে আপনার চেয়ে ছোট বা বড় আকারের একটি ফন্টের সাথে আপনি শেষ করতে পারেন।
উদাহরণস্বরূপ, আপনার এই মত একটি শৈলী শীট থাকতে পারে:
পি {ফন্ট সাইজ: 0.875েম; }
.footnote {ফন্ট-আকার: 0.6২5 সংখ্যা; }
এর ফলে ফন্টগুলি প্রধান পাঠ্যের জন্য 14 পিক্স এবং 10 পিএক্স এবং যথাক্রমে পাদটীকা। কিন্তু যদি আপনি একটি অনুচ্ছেদের ভিতর একটি পাদটীকা রাখেন, আপনি 10px এর পরিবর্তে 8.75 পিএক্সের পাঠ্যাংশের সাথে শেষ হতে পারে। এটি নিজের চেষ্টা করে দেখুন, এটি উপরের CSS এবং নিম্নলিখিত HTML একটি নথিতে রাখুন:
এই ফন্ট 14px বা উচ্চতা 0.875 এমএমএস হয়।
এই অনুচ্ছেদে একটি পাদটীকা আছে।
যদিও এটি কেবল একটি পাদটীকা অনুচ্ছেদ।
পাদটীকা পাঠ 10px এ পড়তে কঠিন, এটি 8.75 পিক্সে প্রায় অস্পষ্ট।
তাই, আপনি যখন ems ব্যবহার করছেন, তখন আপনাকে পিতামাতার বস্তুর আকার সম্পর্কে খুব সচেতন হতে হবে, অথবা আপনার পৃষ্ঠায় কিছু সত্যিই অদ্ভুত আকারের উপাদানগুলির সাথে শেষ হবে।