Text Alignment এবং Text Utilities

Foundation ফ্রেমওয়ার্কে Text Alignment এবং Text Utilities এমন বিভিন্ন ক্লাস প্রদান করে, যা ওয়েব পেজে টেক্সটের সজ্জা এবং সজ্জার ধরন পরিবর্তন করতে সাহায্য করে। এগুলি খুবই কার্যকরী এবং রেসপনসিভ ওয়েব ডিজাইন তৈরির জন্য গুরুত্বপূর্ণ। এই টুলগুলি ব্যবহার করে আপনি টেক্সটের অবস্থান, স্টাইল এবং ফরম্যাটিং সহজেই কাস্টমাইজ করতে পারবেন।

Text Alignment

Foundation এ টেক্সটের alignment পরিবর্তন করতে সহজেই বিভিন্ন ক্লাস ব্যবহার করা যায়। নিচে কিছু সাধারণ text alignment ক্লাস দেওয়া হলো:

১. Text Align Center

এটি টেক্সটকে সেন্টারে অবস্থান করতে ব্যবহার করা হয়।

<p class="text-center">এটি সেন্টারে অ্যালাইনড টেক্সট।</p>

২. Text Align Right

এটি টেক্সটকে ডান দিকে অবস্থান করতে ব্যবহৃত হয়।

<p class="text-right">এটি ডান দিকে অ্যালাইনড টেক্সট।</p>

৩. Text Align Left

এটি টেক্সটকে বাম দিকে অবস্থান করতে ব্যবহৃত হয়। (ডিফল্ট হিসেবে বাম দিকে থাকে)

<p class="text-left">এটি বাম দিকে অ্যালাইনড টেক্সট।</p>

Note: text-center, text-right, এবং text-left ক্লাসগুলো সাধারণত <p>, <h1>, <div> ইত্যাদি HTML উপাদানের জন্য কাজ করে।

Text Utilities

Foundation এর Text Utilities হল কিছু প্রি-ডিফাইনড ক্লাস, যা টেক্সট স্টাইল এবং কন্টেন্টের বৈশিষ্ট্য পরিবর্তন করতে সহায়তা করে। এটি টেক্সটের সাইজ, কলার, ফন্ট, কেস, ওজন ইত্যাদি কাস্টমাইজ করার জন্য ব্যবহৃত হয়।

১. Text Capitalize

এই ক্লাসটি টেক্সটের সমস্ত অক্ষরকে ক্যাপিটাল লেটারে রূপান্তরিত করে।

<p class="text-capitalize">এই টেক্সটটি ক্যাপিটাল লেটারে পরিবর্তিত হবে।</p>

২. Text Uppercase

এই ক্লাসটি টেক্সটের সমস্ত অক্ষরকে Uppercase (বড় অক্ষর) এ রূপান্তরিত করে।

<p class="text-uppercase">এই টেক্সটটি বড় অক্ষরে পরিবর্তিত হবে।</p>

৩. Text Lowercase

এই ক্লাসটি টেক্সটের সমস্ত অক্ষরকে Lowercase (ছোট অক্ষর) এ রূপান্তরিত করে।

<p class="text-lowercase">এই টেক্সটটি ছোট অক্ষরে পরিবর্তিত হবে।</p>

৪. Text Shrink

এই ক্লাসটি টেক্সটের সাইজ স্বয়ংক্রিয়ভাবে ছোট করে দেয়, বিশেষ করে যখন ডিসপ্লে সাইজ ছোট হয়।

<p class="text-shrink">এই টেক্সটটি ছোট আকারে দেখাবে।</p>

৫. Text Weight

এই ক্লাসটি টেক্সটের ফন্ট ওয়েট পরিবর্তন করতে ব্যবহৃত হয়। সাধারণত এটি bold, lighter, বা normal সাইজে ব্যবহৃত হয়।

<p class="text-weight-bold">এটি বোল্ড ফন্টে দেখাবে।</p>
<p class="text-weight-normal">এটি স্বাভাবিক ফন্টে দেখাবে।</p>

৬. Text Align Justify

এই ক্লাসটি টেক্সটকে দুই প্রান্তে (বাম এবং ডান) সোজা করে প্রদর্শন করতে ব্যবহৃত হয়, যেমন প্যারাগ্রাফে দেখা যায়।

<p class="text-justify">এই টেক্সটটি পুরো প্যারাগ্রাফ হিসেবে সোজা (justify) অবস্থানে দেখাবে।</p>

Text Alignment এবং Utilities এর সাথে ব্রেকপয়েন্ট ব্যবহার

Foundation এ Text Alignment এবং Text Utilities-এর সাথে ব্রেকপয়েন্ট ব্যবহার করা যায়, যা রেসপনসিভ ডিজাইন তৈরি করতে সহায়তা করে। এর মাধ্যমে আপনি নির্দিষ্ট স্ক্রীন সাইজের জন্য বিভিন্ন টেক্সট স্টাইল এবং অ্যালাইনমেন্ট কাস্টমাইজ করতে পারেন।

উদাহরণ: ব্রেকপয়েন্টের সাথে টেক্সট সেন্টার

<div class="row">
  <div class="small-12 medium-6 large-4 columns">
    <p class="text-center medium-text-left large-text-right">
      ছোট স্ক্রীনে সেন্টারে, মিডিয়াম স্ক্রীনে বামদিকে, এবং বড় স্ক্রীনে ডানদিকে অ্যালাইনড টেক্সট।
    </p>
  </div>
</div>

এখানে:

• small-12: মোবাইল স্ক্রীনে টেক্সট সেন্টার অবস্থানে থাকবে।
• medium-text-left: মিডিয়াম স্ক্রীনে টেক্সট বাম দিকে থাকবে।
• large-text-right: বড় স্ক্রীনে টেক্সট ডান দিকে থাকবে।

Foundation-এর Text Alignment এবং Text Utilities টুলস আপনাকে ওয়েব পেজের টেক্সটের সজ্জা এবং স্টাইল কাস্টমাইজ করার সহজ উপায় প্রদান করে। এটি দ্রুত এবং কার্যকরীভাবে আপনার ওয়েবসাইটে টেক্সট সাজানোর জন্য খুবই উপকারী। Foundation এর এই সুবিধাগুলি ব্যবহার করে আপনি রেসপনসিভ এবং পেশাদার ডিজাইন তৈরি করতে পারেন, যা বিভিন্ন স্ক্রীনে উপযুক্তভাবে টেক্সট প্রদর্শন করবে।