CSS টেক্সট অ্যালাইনমেন্ট (CSS Text Alignment) [বাংলায় CSS মাস্টার ক্লাস]: ওয়েব ডিজাইনের ক্রমবর্ধমান ল্যান্ডস্কেপে, টেক্সট বসানো বিষয়বস্তু প্রদানের ক্ষেত্রে একটি গুরুত্বপূর্ণ ভূমিকা রাখে যা আকর্ষণীয় এবং অ্যাক্সেসযোগ্য উভয়ই। CSS (ক্যাসকেডিং স্টাইল শীট) হল একটি সৃজনশীল অস্ত্রাগার যা ওয়েব বিকাশকারীরা পরিচালনা করে, ওয়েব পৃষ্ঠাগুলির মধ্যে পাঠ্য উপাদানগুলির প্রান্তিককরণ এবং অবস্থান নিয়ন্ত্রণ করার ক্ষমতা প্রদান করে। CSS টেক্সট অ্যালাইনমেন্ট প্রপার্টি, এই টুলকিটের একটি অবিচ্ছেদ্য অংশ, ওয়েব কন্টেন্টের লেআউট এবং ভিজ্যুয়াল হায়ারার্কি গঠনে একটি গুরুত্বপূর্ণ ভূমিকা পালন করে।
CSS টেক্সট অ্যালাইনমেন্ট তার ধারণকারী উপাদানের মধ্যে পাঠ্যের সুনির্দিষ্ট অবস্থানকে অন্তর্ভুক্ত করে। এটি নির্ধারণ করে যে পাঠ্যটিকে কেন্দ্রীভূত করা উচিত, বাম বা ডানে সারিবদ্ধ করা উচিত বা ন্যায়সঙ্গত, যেখানে এটি তার ধারকটির পুরো প্রস্থকে বিস্তৃত করে। এই সম্পত্তিটি পঠনযোগ্যতা বাড়াতে এবং একটি কাঠামোগত বিন্যাসে অবদান রাখার ক্ষমতা রাখে।
CSS টেক্সট অ্যালাইনমেন্ট (CSS Text Alignment) poperty গুলি হলঃ
- text-align
- text-align-last
- direction
- unicode-bidi
- vertical-align
CSS পাঠ্য সারিবদ্ধ বৈশিষ্ট্যের একটি পরিসীমা অফার করে। এর মধ্যে রয়েছে পাঠ্য-সারিবদ্ধ, যা অনুভূমিক প্রান্তিককরণ (বাম, ডান, কেন্দ্র বা ন্যায়সঙ্গত) নির্দিষ্ট করে এবং উল্লম্ব-সারিবদ্ধ, যা উল্লম্ব অবস্থান নির্ধারণ করে, বিশেষ করে ইনলাইন উপাদানগুলির জন্য প্রাসঙ্গিক।
প্রতিক্রিয়াশীল ওয়েব ডিজাইনের ক্ষেত্রে, পাঠ্য সারিবদ্ধকরণ অপরিহার্য হয়ে ওঠে। যেহেতু স্ক্রীনের আকার এবং অভিযোজন পরিবর্তিত হয়, পাঠ্য অবশ্যই নির্বিঘ্নে মানিয়ে নিতে হবে। সারিবদ্ধ মানগুলির জন্য আপেক্ষিক ইউনিটগুলি ব্যবহার করা নিশ্চিত করে যে পাঠ্যটি বিভিন্ন ডিভাইস এবং স্ক্রিনের প্রস্থে দৃশ্যত আনন্দদায়ক থাকে।
ন্যায্য পাঠ্য সারিবদ্ধকরণ, যেখানে পাঠ্যটি তার কন্টেইনারের পুরো প্রস্থকে বিস্তৃত করে, পরিষ্কার এবং পালিশ লেআউট তৈরি করতে সৃজনশীলভাবে ব্যবহার করা যেতে পারে। যাইহোক, এটির যত্ন সহকারে পরিচালনার প্রয়োজন, কারণ অত্যধিক ন্যায্যতা অসম শব্দ ব্যবধানের দিকে নিয়ে যেতে পারে এবং পাঠযোগ্যতাকে প্রভাবিত করতে পারে।
CSS টেক্সট অ্যালাইনমেন্ট (CSS Text Alignment) সম্পর্কে বিস্তারিত নিচে দেওয়া হল।
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>
<p class="p1">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum eos laudantium tempore maxime possimus
accusamus repellat sed voluptatem dolorem eligendi.</p>
<p class="p2">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum eos laudantium tempore maxime possimus
accusamus repellat sed voluptatem dolorem eligendi.</p>
<p class="p3">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum eos laudantium tempore maxime possimus
accusamus repellat sed voluptatem dolorem eligendi.</p>
<p class="p4">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum eos laudantium tempore maxime possimus
accusamus repellat sed voluptatem dolorem eligendi.</p>
<!-- css style -->
<style>
body {
height: 400px;
width: 400px;
border: 1px solid red;
}
.p1 {
text-align: center;
}
.p2 {
text-align: left;
}
.p3 {
text-align: right;
}
.p4 {
text-align: justify;
}
</style>
</body>
</html>