CSS Line Height (লাইন হাইট): কিভাবে প্রয়োগ করবেন

CSS line-height প্রপার্টি বিভিন্ন HTML এলিমেন্টের লাইন হাইট নির্ধারণ করে। এটি সাধারণত টেক্সটের লাইনগুলোর মধ্যে দূরত্ব সেট করার জন্য ব্যবহৃত হয়। লাইন হাইট কীওয়ার্ড, পারসেন্টেজ, বা সংখ্যাগত মান দিয়ে সেট করা যায়।

CSS line-height প্রপার্টি ডেভেলপারদের এক ওয়েব পেজে দুটি ইনলাইন এলিমেন্টের মধ্যে जगह নির্ধারণ করতে দেয়। ডেভেলপাররা প্রায়শই এই প্রপার্টি ব্যবহার করে ওয়েব পেজে টেক্সটের লাইনগুলোর মধ্যে দূরত্ব বাড়াতে বা কমাতে।

এই টিউটোরিয়ালে CSS line-height প্রপার্টি কীভাবে ব্যবহার করবেন তা আলোচনা করা হয়েছে। আপনাকে শুরুতে সাহায্য করার জন্য একটি উদাহরণ রেফারেন্স দেওয়া হয়েছে। এটি পড়া শেষ করলে আপনি আপনার কোডে line-height প্রপার্টি ব্যবহারে দক্ষ হবেন।

CSS line-height

CSS line-height প্রপার্টি একটি লাইন বক্সের উচ্চতা সেট করে। লাইন বক্সগুলো হলো CSS-এ একটি বক্স তৈরী করা লাইনগুলো। এই মেথডটি প্রায়শই টেক্সটের লাইনগুলোর মধ্যে দূরত্ব সেট করার জন্য ব্যবহৃত হয়।

লাইন হাইট সমন্বয় করলে আপনি ওয়েব পেজে টেক্সটের লাইনগুলোর (অথবা অন্যান্য এলিমেন্টের) মধ্যে স্পেসিং غیر langsung সমন্বয় করতে পারেন। এটি মাইক্রোসফট ওয়ার্ডে টেক্সটকে ডাবল স্পেসড বা ১.১৫ স্পেসড ফরম্যাট করার মতো।

CSS line-height প্রপার্টির সিনট্যাক্স নিচের মত:

line-height: lineHeight;

এখানে "lineHeight" হলো একটি দৈর্ঘ্য মান যা একটি এলিমেন্টের লাইন হাইট সেট করে।

line-height প্রপার্টির সাথে আপনি তিন ধরনের মান ব্যবহার করতে পারেন: দৈর্ঘ্য, সংখ্যা, এবং পারসেন্টেজ:

মান	বিবরণ	উদাহরণ মান	উদাহরণ মানের ফলাফল
দৈর্ঘ্য (Length)	নির্দিষ্ট মাপের একক (যেমন em, px, cm) ব্যবহার করে লাইন হাইট সেট করে।	10px, 15px, 20px	আপনি 10px নির্দিষ্ট করলে, আপনার লাইন হাইট 10px হবে।
সংখ্যা (Number)	লাইন হাইটকে ফন্ট আকারের এক গুণিতক হিসেবে সেট করে।	1, 1.8, 2	আপনার ফন্ট আকার 10px হলে, লাইন হাইট যথাক্রমে 10px, 18px, এবং 20px হবে।
পারসেন্টেজ (Percentage)	এলিমেন্টের ফন্ট আকারের পারসেন্টেজ হিসেবে লাইন হাইট সেট করে।	30%, 50%, 110%	আপনার ফন্ট আকার 10px হলে, লাইন হাইট যথাক্রমে 3px, 5px, এবং 11px হবে।

বিকল্পভাবে, আপনি "normal" কীওয়ার্ড নির্দিষ্ট করতে পারেন। এই কীওয়ার্ড ব্রাউজার ডিফল্ট ব্যবহার নির্দেশ করে। এই মান সাধারণত ১.২ এর körül রয়েছে, ব্রাউজার অনুযায়ী।

আপনি যদি line-height প্রপার্টি একটি বক্সে প্রয়োগ করেন, তবে সেই বক্সের সব টেক্সট আপনার নির্দিষ্ট করা লাইন হাইট ব্যবহার করবে।

অ্যাক্সেসিবিলিটির ওপর একটি নোট

লাইন স্পেসিং পরিবর্তন করা line-height প্রপার্টির একটি সাধারণ ব্যবহার। এর কারণ হলো আপনি সবসময় চান লাইনগুলোর মধ্যে পর্যাপ্ত জায়গা রয়ে। যদি লাইনগুলোর মধ্যে পর্যাপ্ত জায়গা না থাকে, তবে টেক্সট পড়া কঠিন হতে পারে।

পড়া কঠিন টেক্সট দৃষ্টিবাধিত মানুষের ওপর বিশেষভাবে গাড় প্রভাব ফেলে। ওয়েবসাইট তৈরি করার সময় অ্যাক্সেসিবিলিটি সবসময় বিবেচনা করা উচিত।

যখন আপনি CSS-এ একটি সংখ্যা ব্যবহার করে এলিমেন্টের লাইন হাইট সেট করেন, তবে আপনাকে ১.৫ এর নিচে যেকোনো মান ব্যবহার করা উচিত নয়। এর কারণ হলো ১.৫ এর চেয়ে কম লাইন হাইটের মান দৃষ্টিবাধিত পাঠকদের আপনার ওয়েবসাইট ব্যবহার করা কঠিন করে দেয়।

line-height CSS উদাহরণ

ধরুন, আমরা একটি স্থানীয় রান্না ক্লাবের ওয়েবসাইটের "About Us" পেজ ডিজাইন করছি। পেজে একটি হেডিং এবং ক্লাবের বর্ণনায় একটি প্যারাগ্রাফ টেক্সট রয়েছে।

আমরা চাই আমাদের টেক্সট যথাযথভাবে স্পেসড হোক। তাই আমরা ওয়েব পেজের প্যারাগ্রাফ টেক্সটের লাইন হাইট ১.৬rem সেট করতে সিদ্ধান্ত নেই। নিচের কোড ব্যবহার করে এটি করা যায়:

<html>
<h2>About Us</h2>
<p>Fantastic Chefs, founded in 2007, is a cooking club local to Seattle, WA. Our cooking club meets on a weekly basis to share recipes, discuss cooking techniques, and make food together. Every Saturday afternoon, our members gather at our Seattle-based kitchen.</p>
<style>
p {
  font-size: 16px;
  line-height: 1.6rem;
}
</style>

আমাদের কোড ফলাফল: CSS Line Height (লাইন হাইট): কিভাবে প্রয়োগ করবেন উপরের কোড এডিটরের রান বাটন দবান HTML/CSS কোডের আউটপুট দেখতে।

আমাদের HTML ফাইলে, আমরা <h2> ট্যাগ ব্যবহার করে "About Us" হেডার সংজ্ঞায়িত করেছি। তারপর, আমরা Fantastic Chefs-এর বর্ণনা লিখেছি এবং সেটি HTML <p> ট্যাগের মধ্যে রাখেছি।

আমাদের CSS ফাইলে, আমরা একটি নিয়ম সংজ্ঞায়িত করেছি। আমাদের নিয়ম দুটি CSS প্রপার্টি ব্যবহার করে। আমরা সব HTML <p> ট্যাগের জন্য লাইন হাইট ১.৬rem এবং ফন্ট আকার ১৬px সেট করেছি।

line-height প্রপার্টির সাথে আমরা যে "rem" মাপের এককটি ব্যবহার করেছি, সেটি রুট এলিমেন্টের ফন্ট-সাইজের আপেক্ষিক লাইন হাইট সেট করে। "rem" মানে "root element"। তাই, যেহেতু আমাদের ফন্ট আকার ১৬px ছিল, এই প্যারাগ্রাফের লাইন হাইট ২৫.৬px (১৬px × ১.৬) হয়েছে।

উপরের প্যারাগ্রাফের টেক্সট যথাযথভাবে স্পেসড আউট রয়েছে এবং ওভারল্যাপ করছে না।

আমরা উপরের উদাহরণে আমাদের <div> এলিমেন্টেও line-height প্রয়োগ করতে পারতাম। এটি আমাদের <div> ট্যাগের সব টেক্সটের লাইন হাইট আমাদের নির্দিষ্ট মানগুলোতে সেট করত। এর মানে হয় আমাদের টাইটেল এবং <p> ট্যাগ দুটোই প্রভাবিত হত।

উপসংহার

CSS line-height প্রপার্টি একটি লাইন বক্সের উচ্চতা সেট করে। সাধারণত এই প্রপার্টি প্যারাগ্রাফ বা হেডিংয়ের টেক্সট লাইনগুলোর মধ্যে স্পেসিং সেট করার জন্য ব্যবহৃত হয়। line-height নরমাল কীওয়ার্ড, পারসেন্টেজ, দৈর্ঘ্য, বা সংখ্যাগত মান দিয়ে সেট করা যায়।

এই টিউটোরিয়ালে CSS line-height প্রপার্টির মৌলিক বিষয় এবং আপনার কোডে এর ব্যবহার আলোচনা করা হয়েছে। এখন আপনার কাছে CSS line-height প্রপার্টি এক্সপার্টের মতো ব্যবহার করার জ্ঞান রয়েছে!

ওয়েব ডেভেলপার হতে চান? এক্সপার্ট টিপস এবং শীর্ষ শিক্ষামূলক সংস্থান ও কোর্সের গাইডেন্সের জন্য আমাদের How to Learn CSS গাইড দেখুন।