CSS দিয়ে সব ক্যাপিটাল লেটার (All Caps): ধাপে ধাপে গাইড

CSS text-transform: uppercase প্রপার্টি একটি টেক্সট এলিমেন্টের কন্টেন্টকে সব ক্যাপিটাল লেটারে রূপান্তর করে। এই প্রপার্টি ব্যবহার করে টেক্সটকে লোয়ারকেস বা টাইটেল কেসেও রূপান্তর করা যায়। text-transform প্যারাগ্রাফ, হেডিং বা যেকোনো টেক্সট এলিমেন্টে প্রয়োগ করা যায়।

ওয়েবসাইট লেখা ও ডেভেলপ করার সময় ডেভেলপাররা প্রয়োজন অনুযায়ী CSS প্রপার্টি ব্যবহার করে টেক্সট ফন্টের কেস পরিবর্তন করতে পারেন। এই আর্টিকেলে আমরা দুটি পদ্ধতি আলোচনা করব: text-transform এবং font-variant ব্যবহার করে। চলুন দুটির সিনট্যাক্স দেখি।

CSS All Caps (সব ক্যাপিটাল)

CSS text-transform প্রপার্টি ব্যবহার করে একটি টেক্সট এলিমেন্টের কন্টেন্টকে সব ক্যাপিটাল লেটারে রূপান্তর করা যায়। এই প্রপার্টি ওয়েব পেজে টেক্সট কীভাবে ক্যাপিটালাইজ হবে তা নির্ধারণ করে। আপনি এটিও ব্যবহার করে টেক্সটকে লোয়ারকেসও করতে পারেন।

এক ব্লক টেক্সটকে সব বড় হাতের অক্ষরে রূপান্তর করতে আপনার CSS সিলেক্টরে text-transform: uppercase ব্যবহার করতে হবে:

text-transform: uppercase;

text-transform প্রপার্টি তিনটি সম্ভাব্য মান গ্রহণ করে:

• uppercase: একটি টেক্সট এলিমেন্টের প্রতিটি শব্দকে আপারকেসে রূপান্তর করে।
• lowercase: টেক্সটকে লোয়ারকেসে রূপান্তর করে।
• capitalize: প্রতিটি শব্দের প্রথম অক্ষর বড় হাতের করে (টাইটেল কেস)।

চলুন text-transform মেথডের একটি উদাহরণ দেখি।

All Caps CSS উদাহরণ

আমরা একটি ওয়েব পেজ তৈরি করব যা "This page does not exist." লেখাটি সব ক্যাপিটাল লেটারে দেখাবে।

এটি করতে আমরা সব অক্ষর ম্যানুয়ালি ক্যাপিটালে লিখতে পারি। কিন্তু এই পদ্ধতিতে আমাদের টেক্সট ম্যানুয়ালি রি-রাইট করতে হয়। এটার খুব ছোট বাক্যের জন্য সমস্যা নয়। কিন্তু লম্বা টেক্সটের কেস পরিবর্তন করার সময় ম্যানুয়ালি করা অসুবিধাজনক হয়ে যায়।

সুরক্ষিত পক্ষে থাকতে আমরা text-transform মেথড ব্যবহার করব।

আমাদের টেক্সট এবং text-transform নিয়মসহ একটি HTML ডকুমেন্ট সংজ্ঞায়িত করি:

<html>
<head>
  <style>
    p {
      text-transform: uppercase;
    }
  </style>
</head>
<body>
  <p>this is in all caps</p>
</body>
</html>

সিলেক্ট করা টেক্সটের সব অক্ষর আপারকেসে দেখাবে।

প্রথমে আমরা একটি <head> ট্যাগ সংজ্ঞায়িত করি। এতে একটি <style> ট্যাগ রয়েছে। আমরা এই স্টাইল ট্যাগে আমাদের text-transform নিয়ম যোগ করি। আমরা এক্সটার্নাল CSS স্টাইলশীটও ব্যবহার করতে পারতাম কিন্তু এই উদাহরণটা খুব ছোট হলে তার প্রয়োজন নেই।

<body> ট্যাগে, আমরা একটি প্যারাগ্রাফ সংজ্ঞায়িত করি। এই প্যারাগ্রাফ সব বড় হাতের অক্ষরে দেখাবে যদিও আমরা বাক্যটি সেন্টেন্স কেসে লিখেছি। আমরা এটি জানি কারণ text-transform প্রপার্টি আমাদের ওয়েব পেজের সব HTML <p> ট্যাগে প্রয়োগ হয়।

font-variant: small-caps; সম্পর্কে একটি কথা

আপনি যদি টাইটেল কেসের বৈশিষ্ট্য পাওয়ার পাশাপাশি লোয়ারকেসও ব্যবহার করতে চান, তবে font-variant: small-caps ব্যবহার করতে পারেন। টাইটেল কেস বলতে এমন বাক্যকে বোঝায় যেখানে প্রতিটি শব্দের প্রথম অক্ষর বড় হাতের থাকে।

font-variant নিয়মের একটি উদাহরণ:

<head>
  <style>
    p {
      font-variant: small-caps;
    }
  </style>
</head>
<body>
  <p>this is in all caps</p>
</body>
</html>

উপসংহার

text-transform প্রপার্টি আমাদের একটি এলিমেন্টের সব টেক্সটকে আপারকেসে রূপান্তর করার অপশন দেয়। font-variant প্রপার্টি আমাদের সব স্মল কেস টেক্সটকে স্মল কেস অক্ষরের উচ্চতার সাথে আপারকেসে দেখানোর অপশন দেয়।

এই দুটি নিয়ম HTML-এ টেক্সট ফরম্যাট করার জন্য আপনার টুলবক্সে দুটি আরও টুল যোগ করে।

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