CSS দিয়ে Drop Caps (ড্রপ ক্যাপস) তৈরি করা [Typography]

Drop Cap হলো একটি টেক্সট ব্লকের প্রথম অক্ষর। সাধারণত লিড প্যারাগ্রাফে ব্যবহার হয় (যেমন এই প্যারাগ্রাফটি)। Drop Cap বাকি টেক্সট থেকে আলাদা স্টাইল করা হয় যাতে এটি আউটস্ট্যান্ড করে। এটি একটি পাওয়ারফুল ভিজ্যুয়াল মার্কার যা টাইপোগ্রাফাররা রিডারের অটেনশন ঠিক যেখানে চান সেখানে আকর্ষণ করতে ব্যবহার করেন।

Drop Cap ডিজাইনের কোনো একক নিয়ম নেই। সবচেয়ে কমন: বডি টেক্সটের মতো ফন্ট/টাইপফেস ব্যবহার করা, কিন্তু প্রথম অক্ষরের ফন্ট সাইজ বড় (কখনো কখনো বোল্ড) করা।

আমার ব্যবহৃত CSS

.dropcap { 
  float: left; 
  font-size: 6em; 
  line-height: 0.60; 
  margin: 0; 
  margin-left: -0.04em; 
  padding: .09em .04em 0em 0em; 
}

ব্যবহার পদ্ধতি

প্যারাগ্রাফের প্রথম শব্দের প্রথম অক্ষরকে <span> দিয়ে র‍্যাপ করুন:

<p><span class="dropcap">D</span>rop cap is the first letter...</p>

সতর্কতা: আপনার ডকুমেন্টের জন্য Drop Cap স্টাইল করা সম্পূর্ণরূপে আপনার টাইপফেসের অ্যানাটমিক্যাল স্ট্রাকচার, ফন্ট সাইজ, লাইন হাইট, এবং অন্যান্য ফ্যাক্টরে নির্ভর করে। একক CSS রুল-সেট সব কেস কভার করবে না—নাজ আপনার ফলাফল পেতে হবে।

উপরের CSS টেমপ্লেট হিসেবে ব্যবহার করুন, তারপর font-size বাড়াতে/কমাতে করে ফিট করান। এডজাস্টমেন্টের জন্য line-height বা margin-top নাজ করুন।

Drop Cap স্টাইল ভেরিয়েশন

Drop Cap অবশ্যই টপ-বটম ইকুয়ালি অ্যালাইন হবে এমন নিয়ম নেই। কিছু ডিজাইনার ড্রপ ক্যাপকে ফার্স্ট লাইনের এসেন্ডারের ওপর লিফ্ট করে, কিছু গভীরে টাকিয়ে হোয়াইটস্পেস তৈরি করে। কালার/ব্যাকগ্রাউন্ড কালারও ভিন্ন হতে পারে।

ভিন্ন টেক্সট কালারের Drop Cap

L orem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.

ভিন্ন ব্যাকগ্রাউন্ড কালারের Drop Cap

উপরোক্ত দুটি উদাহরণে একই CSS, শুধু কালার/ব্যাকগ্রাউন্ড-কালার ভিন্ন। দ্বিতীয়টিতে প্যাডিং-বটম এবং মার্জিন-রাইট যোগ করে নাজ করা হয়েছে।

Drop Cap টাইপোগ্রাফিক এমফেসিস টুলের একটি—সবচেয়ে আটেনশন-গ্র্যাবিং। মডারেশন میں ব্যবহার করুন।