সাইজিং ইউনিট

সিএসএস পডকাস্ট - 008: সাইজিং ইউনিট

ওয়েব একটি প্রতিক্রিয়াশীল মাধ্যম, কিন্তু কখনও কখনও আপনি সামগ্রিক ইন্টারফেসের গুণমান উন্নত করতে এর মাত্রা নিয়ন্ত্রণ করতে চান৷ এটির একটি ভাল উদাহরণ হল পঠনযোগ্যতা উন্নত করতে লাইনের দৈর্ঘ্য সীমিত করা। আপনি কিভাবে ওয়েবের মত একটি নমনীয় মাধ্যমে তা করবেন?

এই ক্ষেত্রে, আপনি একটি ch ইউনিট ব্যবহার করতে পারেন, যা তার গণনাকৃত আকারে রেন্ডার করা ফন্টে "0" অক্ষরের প্রস্থের সমান। এই ইউনিটটি আপনাকে পাঠ্যের আকারের জন্য ডিজাইন করা একটি ইউনিটের সাথে পাঠ্যের প্রস্থ সীমিত করতে দেয়, যা সেই পাঠ্যের আকার নির্বিশেষে অনুমানযোগ্য নিয়ন্ত্রণের অনুমতি দেয়। ch ইউনিট হল মুষ্টিমেয় এককগুলির মধ্যে একটি যা এই উদাহরণের মতো নির্দিষ্ট প্রসঙ্গের জন্য সহায়ক।

সংখ্যা

সংখ্যাগুলি opacity , line-height এবং এমনকি rgb তে রঙ চ্যানেলের মান নির্ধারণ করতে ব্যবহৃত হয়। সংখ্যা এককহীন পূর্ণসংখ্যা (1, 2, 3, 100) এবং দশমিক (.1, .2, .3)।

সংখ্যার অর্থ তাদের প্রেক্ষাপটের উপর নির্ভর করে। উদাহরণস্বরূপ, line-height সংজ্ঞায়িত করার সময়, একটি সংখ্যা একটি অনুপাতের প্রতিনিধিত্ব করে যদি আপনি এটিকে সমর্থনকারী ইউনিট ছাড়াই সংজ্ঞায়িত করেন: 

p {
  font-size: 24px;
  line-height: 1.5;
}

এই উদাহরণে, 1.5 হল p উপাদানের গণনাকৃত পিক্সেল ফন্টের আকারের 150% এর সমান। এর মানে হল যদি p এর font-size 24px হয়, তাহলে লাইনের উচ্চতা 36px হিসাবে গণনা করা হবে।

সংখ্যাগুলি নিম্নলিখিত জায়গায়ও ব্যবহার করা যেতে পারে:

  • ফিল্টারগুলির জন্য মান নির্ধারণ করার সময়: filter: sepia(0.5) উপাদানটিতে একটি 50% সেপিয়া ফিল্টার প্রয়োগ করে।
  • অস্বচ্ছতা সেট করার সময়: opacity: 0.5 একটি 50% অস্বচ্ছতা প্রয়োগ করে।
  • রঙিন চ্যানেলে: rgb(50, 50, 50) , যেখানে মান 0-255 একটি রঙের মান সেট করার জন্য গ্রহণযোগ্য। রঙের পাঠ দেখুন ।
  • একটি উপাদানকে রূপান্তর করতে: transform: scale(1.2) উপাদানটিকে তার প্রাথমিক আকারের 120% দ্বারা স্কেল করে।

শতাংশ

সিএসএসে শতাংশ ব্যবহার করার সময় আপনাকে জানতে হবে শতাংশ কীভাবে গণনা করা হয়। উদাহরণস্বরূপ, মূল উপাদানে উপলব্ধ প্রস্থের শতাংশ হিসাবে width গণনা করা হয়। 

div {
  width: 300px;
  height: 100px;
}

div p {
  width: 50%; 
}

উপরের উদাহরণে, div p এর প্রস্থ হল 150px , ধরে নিলাম যে লেআউটটি ডিফল্ট box-sizing: content-box ।

আপনি যদি শতাংশ হিসাবে margin বা padding সেট করেন, তাহলে দিকনির্বিশেষে অভিভাবক উপাদানের প্রস্থের একটি অংশ হবে। 

div {
  width: 300px;
  height: 100px;
}

div p {
  margin-top: 50%; /* calculated: 150px */
  padding-left: 50%; /* calculated: 150px */
}

উপরের স্নিপেটে, margin-top এবং padding-left উভয়ই 150px গণনা করবে। 

div {
  width: 300px;
  height: 100px;
}

div p {
  width: 50%; /* calculated: 150px */
  transform: translateX(10%); /* calculated: 15px */
}

আপনি যদি শতাংশ হিসাবে একটি transform মান সেট করেন তবে এটি রূপান্তর সেট সহ উপাদানের উপর ভিত্তি করে। এই উদাহরণে, p এর translateX মান 10% এবং width 50% । প্রথমে, প্রস্থটি কী হবে তা গণনা করুন: 150px কারণ এটি তার পিতামাতার প্রস্থের 50% । তারপর, 150px এর 10% নিন, যা হল 15px ।

মাত্রা এবং দৈর্ঘ্য

আপনি যদি একটি সংখ্যার সাথে একটি ইউনিট সংযুক্ত করেন তবে এটি একটি মাত্রা হয়ে যায়। উদাহরণস্বরূপ, 1rem একটি মাত্রা। এই প্রসঙ্গে, একটি সংখ্যার সাথে সংযুক্ত ইউনিটটিকে একটি মাত্রা টোকেন হিসাবে নির্দিষ্টকরণে উল্লেখ করা হয়। দৈর্ঘ্য হল মাত্রা যা দূরত্বকে নির্দেশ করে এবং সেগুলি হয় পরম বা আপেক্ষিক হতে পারে।

পরম দৈর্ঘ্য

সমস্ত নিখুঁত দৈর্ঘ্য একই বেসের বিরুদ্ধে সমাধান করে, সেগুলি আপনার CSS-এ যেখানেই ব্যবহার করা হোক না কেন সেগুলিকে অনুমানযোগ্য করে তোলে৷ উদাহরণস্বরূপ, যদি আপনি আপনার উপাদানের আকারের জন্য cm ব্যবহার করেন এবং তারপরে মুদ্রণ করেন, যদি আপনি এটিকে একটি শাসকের সাথে তুলনা করেন তবে এটি সঠিক হওয়া উচিত।

div {
  width: 10cm;
  height: 5cm;
  background: black;
}

আপনি যদি এই পৃষ্ঠাটি মুদ্রণ করেন, তাহলে div একটি 10x5cm কালো আয়তক্ষেত্র হিসাবে মুদ্রণ করবে। মনে রাখবেন, CSS শুধুমাত্র ডিজিটাল কন্টেন্টের জন্য নয়, প্রিন্ট কন্টেন্ট স্টাইল করার জন্যও ব্যবহৃত হয়। প্রিন্টের জন্য ডিজাইন করার সময় পরম দৈর্ঘ্য সত্যিই কাজে আসতে পারে।

ইউনিট নাম এর সমতুল্য
সেমি সেন্টিমিটার 1cm = 96px/2.54
মিমি মিলিমিটার 1 মিমি = 1 সেমি এর 1/10তম
প্র কোয়ার্টার-মিলিমিটার 1Q = 1cm এর 1/40 তম
মধ্যে ইঞ্চি 1in = 2.54cm = 96px
পিসি পিকাস 1pc = 1in এর 1/6 তম
pt পয়েন্ট 1pt = 1in এর 1/72তম
px পিক্সেল 1px = 1in এর 1/96তম

আপেক্ষিক দৈর্ঘ্য

একটি আপেক্ষিক দৈর্ঘ্য একটি ভিত্তি মানের বিপরীতে গণনা করা হয়, অনেকটা শতাংশের মতো। এই এবং শতাংশের মধ্যে পার্থক্য হল যে আপনি প্রাসঙ্গিকভাবে উপাদান আকার দিতে পারেন। এর মানে হল যে CSS-এ ch এর মতো ইউনিট রয়েছে যা ভিত্তি হিসাবে পাঠ্যের আকার ব্যবহার করে এবং vw যা ভিউপোর্টের প্রস্থের উপর ভিত্তি করে (আপনার ব্রাউজার উইন্ডো)। আপেক্ষিক দৈর্ঘ্য তার প্রতিক্রিয়াশীল প্রকৃতির কারণে ওয়েবে বিশেষভাবে উপযোগী।

হরফ-আকার-আপেক্ষিক একক

CSS সহায়ক ইউনিটগুলি প্রদান করে যা রেন্ডার করা টাইপোগ্রাফির উপাদানগুলির আকারের সাথে সম্পর্কিত, যেমন পাঠ্যের আকার ( em ইউনিট) বা টাইপফেস অক্ষরগুলির প্রস্থ ( ch ইউনিট)।

ইউনিট আপেক্ষিক:
em হরফের আকারের সাথে আপেক্ষিক, অর্থাৎ 1.5em হবে 50% বেস কম্পিউটেড ফন্ট সাইজের থেকে বড়। (ঐতিহাসিকভাবে, বড় অক্ষর "M" এর উচ্চতা)।
প্রাক্তন উপাদানটির বর্তমান গণনাকৃত ফন্ট আকারে x-উচ্চতা, একটি অক্ষর "x", বা `.5em` ব্যবহার করবেন কিনা তা নির্ধারণ করতে হিউরিস্টিক৷
টুপি উপাদানটির বর্তমান গণনাকৃত ফন্টের আকারে বড় অক্ষরের উচ্চতা।
ch উপাদানের ফন্টে একটি সংকীর্ণ গ্লিফের গড় অক্ষর অগ্রগতি ("0" গ্লিফ দ্বারা প্রতিনিধিত্ব করা হয়)।
আইসি "水" (CJK ওয়াটার আইডিওগ্রাফ, U+6C34) গ্লাইফ দ্বারা উপস্থাপিত হিসাবে উপাদানের ফন্টে একটি পূর্ণ প্রস্থের গ্লাইফের গড় অক্ষর অগ্রগতি ।
rem রুট এলিমেন্টের ফন্ট সাইজ (ডিফল্ট হল 16px)।
lh উপাদানের লাইনের উচ্চতা।
rlh মূল উপাদানের লাইনের উচ্চতা।
টেক্সট, CSS 10x দারুন লেবেল সহ আরোহী উচ্চতা, descender উচ্চতা এবং x-উচ্চতা। x-উচ্চতা 1ex এবং 0 প্রতিনিধিত্ব করে 1ch

ভিউপোর্ট-আপেক্ষিক ইউনিট

আপনি ভিউপোর্টের মাত্রা (ব্রাউজার উইন্ডো) আপেক্ষিক ভিত্তিতে ব্যবহার করতে পারেন। এই ইউনিটগুলি উপলব্ধ ভিউপোর্ট স্থানকে ভাগ করে।

ইউনিট আপেক্ষিক
vw ভিউপোর্টের প্রস্থের 1%। লোকেরা দুর্দান্ত ফন্টের কৌশলগুলি করতে এই ইউনিটটি ব্যবহার করে, যেমন পৃষ্ঠার প্রস্থের উপর ভিত্তি করে একটি হেডার ফন্টের আকার পরিবর্তন করা যাতে ব্যবহারকারীর আকার পরিবর্তন করা হয়, ফন্টটিও পুনরায় আকার দেয়।
vh ভিউপোর্টের উচ্চতার 1%। আপনি একটি UI এ আইটেম সাজানোর জন্য এটি ব্যবহার করতে পারেন, যদি আপনার কাছে একটি ফুটার টুলবার থাকে।
vi রুট এলিমেন্টের ইনলাইন অক্ষে ভিউপোর্টের আকারের 1%। অক্ষ লেখার মোড বোঝায়। ইংরেজির মতো অনুভূমিক লেখার মোডে, ইনলাইন অক্ষটি অনুভূমিক। কিছু জাপানি টাইপফেসের মতো উল্লম্ব লেখার মোডে, ইনলাইন অক্ষ উপরে থেকে নীচে চলে।
vb রুট এলিমেন্টের ব্লক অক্ষে ভিউপোর্টের আকারের 1%। ব্লক অক্ষের জন্য, এটি হবে ভাষার দিকনির্দেশনা। ইংরেজির মতো LTR ভাষার একটি উল্লম্ব ব্লক অক্ষ থাকবে, যেহেতু ইংরেজি ভাষার পাঠকরা পৃষ্ঠাটিকে উপরের থেকে নীচে পার্স করে। একটি উল্লম্ব লেখার মোডে একটি অনুভূমিক ব্লক অক্ষ রয়েছে।
vmin ভিউপোর্টের ছোট মাত্রার 1%।
vmax ভিউপোর্টের বৃহত্তর মাত্রার 1%। 
div {
  width: 10vw;
}

p {
  max-width: 60ch;
}

এই উদাহরণে, div হবে ভিউপোর্টের প্রস্থের 10% কারণ 1vw হল ভিউপোর্টের প্রস্থের 1% । p উপাদানটির max-width 60ch যার অর্থ এটি গণনাকৃত ফন্ট এবং আকারে 60 "0" অক্ষরের প্রস্থ অতিক্রম করতে পারে না৷

বিবিধ ইউনিট

কিছু অন্যান্য ইউনিট রয়েছে যা নির্দিষ্ট ধরণের মানগুলির সাথে মোকাবিলা করার জন্য নির্দিষ্ট করা হয়েছে।

কোণ একক

কালার মডিউলে , আমরা অ্যাঙ্গেল ইউনিট দেখেছি, যেগুলো ডিগ্রী মান নির্ধারণের জন্য সহায়ক, যেমন hsl এ hue। এগুলি রূপান্তর ফাংশনের মধ্যে উপাদানগুলি ঘোরানোর জন্যও কার্যকর। 

div {
  width: 150px;
  height: 150px;
  transform: rotate(60deg);
}

deg অ্যাঙ্গেল ইউনিট ব্যবহার করে, আপনি একটি div 90° এর কেন্দ্র অক্ষে ঘোরাতে পারেন।

div {
  background-image: url('a-low-resolution-image.jpg');
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  div {
    background-image: url('a-high-resolution-image.jpg');
  }
}

রেজোলিউশন ইউনিট

পূর্ববর্তী উদাহরণে min-resolution মান হল 192dpi । dpi এককটি প্রতি ইঞ্চিতে বিন্দু বোঝায়। এটির জন্য একটি দরকারী প্রেক্ষাপট হল খুব উচ্চ রেজোলিউশনের স্ক্রীন সনাক্ত করা, যেমন একটি মিডিয়া কোয়েরিতে রেটিনা প্রদর্শন এবং একটি উচ্চ রেজোলিউশন চিত্র পরিবেশন করা।

আপনার উপলব্ধি পরীক্ষা করুন

সাইজিং সম্পর্কে আপনার জ্ঞান পরীক্ষা করুন

নিচের কোনটি বৈধ মাত্রা?

সেমি
সেন্টিমিটার, একটি বৈধ পরম মাত্রা।
ui
ইউজার ইন্টারফেস CSS-এ একটি মাত্রা নয়।
মধ্যে
ইঞ্চি, একটি বৈধ পরম মাত্রা।
8তম
একটি CSS মাত্রা নয়
px
পিক্সেল, একটি বৈধ পরম মাত্রা।
ch
অক্ষর একক, একটি বৈধ আপেক্ষিক মাত্রা।
ux
ব্যবহারকারীর অভিজ্ঞতা CSS-এ একটি মাত্রা নয়।
em
অক্ষর 'M' একক, একটি বৈধ আপেক্ষিক মাত্রা।
প্রাক্তন
অক্ষর 'x' একক, একটি বৈধ আপেক্ষিক মাত্রা।

কিভাবে পরম এবং আপেক্ষিক একক ভিন্ন?

পরম মান পরিবর্তন করতে পারে না কিন্তু আপেক্ষিক ইউনিট করতে পারে
পরম মান পরিবর্তন করতে পারে, কিন্তু তারা যে ভিত্তির বিপরীতে গণনা করে তা পারে না।
একটি পরম দৈর্ঘ্য একটি একক ভাগ করা ভিত্তি মানের সাথে গণনা করা হয়, যেখানে একটি আপেক্ষিক ইউনিটকে একটি ভিত্তি মানের সাথে তুলনা করা হয় যা পরিবর্তন হতে পারে।
আপেক্ষিক ইউনিটগুলি তাদের প্রাসঙ্গিক সচেতনতার কারণে আরও অভিযোজিত এবং তরল, তবে পরম ইউনিটগুলির একটি শক্তি এবং পূর্বাভাসযোগ্যতা রয়েছে যা নির্দিষ্ট ডিজাইনের জন্য ভিত্তি হতে পারে।

ভিউপোর্ট ইউনিট পরম।

সত্য
তারা নিখুঁত বোধ করতে পারে, কিন্তু তারা একটি ভিউপোর্টের সাথে আপেক্ষিক, যা একটি iframe বা ওয়েবভিউ হতে পারে এবং সবসময় একটি ডিভাইস স্ক্রীন আকারের প্রতিনিধিত্ব করে না।
মিথ্যা
তারা যে ডকুমেন্ট উইন্ডোতে তৈরি করা হয়েছিল তার সাথে আপেক্ষিক, যা একটি ডিভাইস স্ক্রীনের মতো একই হতে পারে বা নাও হতে পারে।

সম্পদ