সিএসএস (টাইপোগ্রাফি) দিয়ে কীভাবে ড্রপ ক্যাপ তৈরি করবেন

ড্রপ ক্যাপ একটি পাঠ্য ব্লকের প্রথম অক্ষর। ড্রপ ক্যাপগুলি সাধারণত একটি নথির প্রধান অনুচ্ছেদে ব্যবহৃত হয়, এই অনুচ্ছেদের মতো আপনি এখনই পড়ছেন। ড্রপ ক্যাপগুলিকে আলাদা করার জন্য বাকি টেক্সটের থেকে আলাদাভাবে স্টাইল করা হয়। একটি ড্রপ ক্যাপ একটি শক্তিশালী ভিজ্যুয়াল মার্কার যা টাইপোগ্রাফার এবং ভিজ্যুয়াল ডিজাইনাররা লোকেদের দৃষ্টি আকর্ষণ করতে ব্যবহার করে ঠিক যেখানে তারা এটি চান৷

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

এই নিবন্ধের প্রধান অনুচ্ছেদে ব্যবহৃত ড্রপ ক্যাপে নির্দিষ্ট শৈলী পেতে আমি নিম্নলিখিত কোড ব্যবহার করেছি:

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

এটিকে একটি অনুচ্ছেদে ব্যবহার করতে, আপনার অনুচ্ছেদের প্রথম শব্দের প্রথম অক্ষরটি একটি <span এ মোড়ানো। উপাদান এবং এটিকে dropcap এর একটি শ্রেণি বৈশিষ্ট্য দিন , এই মত:

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

সতর্ক থাকুন যে কিভাবে আপনার এর জন্য CSS দিয়ে আপনার ড্রপ ক্যাপ স্টাইল করবেন নির্দিষ্ট নথি, নির্ভর করে সম্পূর্ণভাবে আপনার নির্বাচিত টাইপফেস শারীরবৃত্তীয় কাঠামো, আপনার হরফের আকার, লাইনের উচ্চতা (প্রধান), এবং অন্যান্য কারণগুলিতে। একটি CSS নিয়ম-সেট নেই যা আপনার সমস্ত প্রয়োজনগুলিকে কভার করবে, তাই আপনাকে একটি ভাল ফলাফলের পথে যেতে হবে৷

আপনি উপরের CSSটিকে একটি টেমপ্লেট/স্টার্টিং পয়েন্ট হিসাবে ব্যবহার করতে পারেন এবং তারপরে font-size বাড়ানো/কমাতে পারেন। আপনার ড্রপ ক্যাপের সম্পত্তি যাতে এটি আপনার অনুচ্ছেদটি সঠিকভাবে ফিট করে। আপনি যদি এখনও আপনার ড্রপ ক্যাপটি আপনার পছন্দ মতো সারিবদ্ধ করতে না পারেন তবে line-height সামঞ্জস্য করার চেষ্টা করুন সম্পত্তির মান সামান্য উপরে বা নিচে। অবশেষে, আপনাকে হয়তো margin-top দিয়ে খেলতে হবে সম্পত্তি, সামান্য আপনার ড্রপ ক্যাপ উপরে বা নিচে সরাতে।

ড্রপ ক্যাপ শৈলী

আমার ড্রপ ক্যাপের জন্য আমি যে নির্দিষ্ট স্টাইলিংটি বেছে নিয়েছি তা অনেকের মধ্যে একটি। ড্রপ ক্যাপকে অনুচ্ছেদের বাকি অংশের সাথে সমানভাবে উপরের-নীচে সারিবদ্ধ করতে হবে এমন কোনো নিয়ম নেই। কিছু ডিজাইনার ড্রপ ক্যাপটিকে প্রথম লাইনের অ্যাসেন্ডারের উপরে একটু বাড়িয়ে দেবেন — অন্যরা এটিকে উল্লেখযোগ্যভাবে বাড়াবে। কেউ কেউ উল্টোটা করবে এবং ড্রপ ক্যাপটিকে টেক্সট ব্লকের গভীরে টেনে নেবে, এর উপরের এবং বাম দিকে প্রচুর পরিমাণে হোয়াইটস্পেস তৈরি করবে।

কখনও কখনও ড্রপ ক্যাপ একটি ভিন্ন পাঠ্য, এবং/অথবা পটভূমির রঙ ব্যবহার করে৷

বিভিন্ন পাঠ্য রঙ সহ ড্রপ ক্যাপ

লোরেম ইপসাম, বা লিপসাম যা কখনও কখনও পরিচিত হয়, এটি ডামি টেক্সট যা প্রিন্ট, গ্রাফিক বা ওয়েব ডিজাইন তৈরিতে ব্যবহৃত হয়। অনুচ্ছেদটি 15 শতকের একজন অজানা টাইপসেটারকে দায়ী করা হয় যিনি একটি টাইপ নমুনা বইতে ব্যবহারের জন্য সিসেরোর ডি ফিনিবাস বোনোরাম এট ম্যালোরামের কিছু অংশ স্ক্র্যাম্বল করেছিলেন বলে মনে করা হয়।

বিভিন্ন ব্যাকগ্রাউন্ড-রঙ সহ ড্রপ ক্যাপ

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

ড্রপ ক্যাপটি অনেকগুলি টাইপোগ্রাফিক জোর দেওয়ার সরঞ্জামগুলির মধ্যে একটি, তবে এটি সবচেয়ে মনোযোগ আকর্ষণকারীগুলির মধ্যে একটি — তাই এটিকে পরিমিতভাবে ব্যবহার করুন৷