CSS font-variant প্রপার্টি ব্যবহার করে টেক্সটে Small Caps (ছোট বড় হাতের অক্ষর) তৈরি করা শিখুন—এবং কবে এটি ব্যবহার করা উচিত।
CSS font-variant প্রপার্টি নির্দেশ করে যে আপনার টেক্সট নরম্যাল টেক্সট কেসে দেখাবে নাকি Small Caps ফন্টে। এর তিনটি ভ্যালু:
- normal (ডিফল্ট)
- inherit
- small-caps
বেসিক ব্যবহার
.small-caps { font-variant: small-caps; }গুরুত্বপূর্ণ: এই প্রপার্টি ব্যবহার করার আগে নিশ্চিত হন যে আপনি এটি সঠিকভাবে বুঝছেন (অনেকেই বুঝেন না)।
নরম্যাল টেক্সট বনাম Small Caps
- নরম্যাল টেক্সট (Sentence case) → বাক্যের প্রথম অক্ষর বড় হাতের।
- Small Caps → ছোট বড় হাতের অক্ষর যা লোয়ারকেস অক্ষরের সাথে মিশে যায় (সমান x-height)।
দুর্ভাগ্যবশত, অনেক ওয়েব ফন্টে আসল Small Caps থাকে না।
যদি আপনি font-variant: small-caps সেট করেন, তবে দুটি ফলাফল আসতে পারে:
- আসল Small Caps: সুন্দরভাবে লোয়ারকেসের সাথে মিশে যায় 👌
- নকল (Computer-generated) Small Caps: লোয়ারকেসের সাথে মিশে না, অনপ্রফেশনাল লাগে 😒
আসল Small Caps উদাহরণ
উপরোক্ত উদাহরণে Alegreya ফন্ট ফ্যামিলি ব্যবহার করা হয়েছে যাতে আসল Small Caps থাকে।
নকল Small Caps উদাহরণ
Notice how these small caps don't blend naturally with the regular text case.
এখানেও Alegreya ব্যবহার করা হয়েছে, কিন্তু Alegreya SC ফন্ট ফেস ডিজেবল করা হয়েছে যাতে নকল ভার্সন দেখা যায়।
কী করবেন?
- আপনার টাইপফেসে আসল Small Caps আছে কিনা তা রিসার্চ করুন (টাইপফেস ডিজাইনার স্পেসিফাই করে থাকেন)।
- যদি থাকে, সেগুলো সঠিকভাবে ইম্পোর্ট/এনাবল করুন।
অন্যথায়, এই প্রপার্টি ব্যবহার করবেন না। font-variant প্রপার্টি অটোমেটিক্যালি OpenType Small Caps এক্সেস করে যদি থাকে, কিন্তু আপনাকে সেগুলো প্রজেক্টে ইম্পোর্ট করতে হবে। না করলে কম্পিউটার-জেনারেটেড নকল Small Caps ফলব্যাক হিসেবে আসবে—যেটা আপনি চান না।
