CSS টেক্সট স্পেসিং (CSS Text Spacing) [বাংলায় CSS মাস্টার ক্লাস]: CSS (ক্যাসকেডিং স্টাইল শীট) টেক্সট উপাদান নিয়ন্ত্রণ এবং উন্নত করার জন্য একটি সমৃদ্ধ সরঞ্জাম সহ ওয়েব বিকাশকারীদের ক্ষমতায়ন করে। এই টুলগুলির মধ্যে, CSS টেক্সট স্পেসিং বৈশিষ্ট্যগুলি ডিজাইনারদের টেক্সটের চারপাশে এবং ভিতরে স্থানটি সূক্ষ্ম-টিউন করার অনুমতি দেয়, ওয়েব সামগ্রীর নান্দনিকতা, পঠনযোগ্যতা এবং লেআউটের উপর সুনির্দিষ্ট নিয়ন্ত্রণ সক্ষম করে।
CSS লেটার-স্পেসিং, ওয়ার্ড-স্পেসিং এবং লাইন-উচ্চতা সহ বেশ কয়েকটি পাঠ্য ব্যবধান বৈশিষ্ট্য অফার করে। এই বৈশিষ্ট্যগুলি ডিজাইনারদের নির্দিষ্ট চাক্ষুষ এবং কার্যকরী উদ্দেশ্যগুলি অর্জনের জন্য অক্ষর, শব্দ এবং লাইনের মধ্যে স্পেসগুলি পরিচালনা করতে দেয়।
CSS টেক্সট স্পেসিং (CSS Text Spacing) property গুলি হলঃ
- text-indent
- letter-spacing
- line-height
- word-spacing
- white-space
ব্যবহারকারীর ইন্টারঅ্যাকশনের সময় ভিজ্যুয়াল ফিডব্যাক দেওয়ার জন্য টেক্সট স্পেসিং বৈশিষ্ট্যগুলিও ব্যবহার করা যেতে পারে। উদাহরণস্বরূপ, হোভারে অক্ষরের ব্যবধান বা লাইনের উচ্চতা সামঞ্জস্য করা ইন্টারেক্টিভ উপাদানগুলিকে হাইলাইট করে ব্যবহারকারীর অভিজ্ঞতা বাড়াতে পারে।
প্রতিক্রিয়াশীল ওয়েব ডিজাইনের প্রেক্ষাপটে, পাঠ্য ব্যবধানের বৈশিষ্ট্যগুলি বিভিন্ন স্ক্রীনের আকার এবং অভিযোজনের সাথে নির্বিঘ্নে মানিয়ে নেয়। তারা নিশ্চিত করে যে পাঠ্য উপাদানগুলি বিভিন্ন ডিভাইসে দৃশ্যত আনন্দদায়ক এবং পাঠযোগ্য থাকে।
টেক্সট স্পেসিং সৃজনশীল সম্ভাবনার ক্ষেত্র অফার করে। ডিজাইনাররা শৈল্পিক শিরোনামের জন্য বর্ধিত অক্ষর ব্যবধান, শক্তভাবে সারিবদ্ধ কলামগুলির জন্য শব্দ ব্যবধান হ্রাস, বা একটি অনন্য এবং আকর্ষক টাইপোগ্রাফিক শৈলী অর্জনের জন্য এই বৈশিষ্ট্যগুলির সংমিশ্রণ ব্যবহার করতে পারেন।
CSS টেক্সট স্পেসিং (CSS Text Spacing) সম্পর্কে বিস্তারিত নিচে দেওয়া হল।
Example:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS MASTER JHUTANDA</title>
<!--https://jhutanda.com-->
<!--https://github.com/jhutanda-->
</head>
<body>
<h1>example text spacing</h1>
<h2>example text spacing</h2>
<p class="p1">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis sit, corrupti vitae ipsam ab vero
consequuntur?
Mollitia possimus rem asperiores.</p>
<p class="p2">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis sit, corrupti vitae ipsam ab vero
consequuntur?
Mollitia possimus rem asperiores.</p>
<p class="p3">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis sit, corrupti vitae ipsam ab vero
consequuntur?
Mollitia possimus rem asperiores.</p>
<!-- text-indent
letter-spacing
line-height
word-spacing
white-space -->
<!-- css style -->
<style>
body {
height: 400px;
width: 300px;
border: 1px solid red;
}
h1 {
letter-spacing: 10px;
}
h2 {
word-spacing: 4px;
}
.p1 {
line-height: 1.5;
}
.p2 {
white-space: nowrap;
}
.p3 {
white-space: wrap;
}
</style>
</body>
</html>