حروف بزرگ ابتدای پاراگراف یا Drop Caps سالهاست که در رسانههای چاپی برای جذابتر کردن ابتدای فصلها و بخشهای مختلف استفاده میشوند. این حروف بزرگ توجه خواننده را جلب میکنند و باعث میشوند متن حرفهایتر و زیباتر به نظر برسد. در CSS نیز میتوان این افکت را با استفاده از شبهعنصر ::first-letter و ویژگی جدید initial-letter پیادهسازی کرد.
استفاده از شبهعنصر ::first-letter
شبهعنصر ::first-letter مشابه ::before و ::after عمل میکند و به شما اجازه میدهد اولین حرف یک عنصر را بدون نیاز به افزودن HTML اضافی، بهصورت جداگانه استایلدهی کنید.
نمونه کد:
article p:first-child::first-letter {
color: hotpink;
padding: 0 .3rem;
margin: 0 .3rem 0 0;
border: 2px solid;
border-radius: 8px;
font-family: "IBM Plex Mono", monospace;
}در این مثال، اولین حرف اولین پاراگراف داخل عنصر article با رنگ، حاشیه و فونت متفاوت نمایش داده میشود.
بزرگتر کردن حرف اول
معمولاً در Drop Cap حرف اول باید بزرگتر از متن عادی باشد. برای این کار میتوان از font-size استفاده کرد:
article p:first-child::first-letter {
color: hotpink;
padding: 0 .3rem;
margin: 0 .3rem 0 0;
border: 2px solid;
border-radius: 8px;
font-family: "IBM Plex Mono";
font-size: 4rem;
line-height: 1;
}در اینجا اندازه حرف اول ۴ برابر بزرگتر شده است. همچنین مقدار line-height کاهش یافته تا ارتفاع خط بیش از حد افزایش پیدا نکند.
اما هنوز یک مشکل وجود دارد: حرف بزرگ واقعاً به داخل چند خط متن “سقوط” نمیکند و ظاهر کلاسیک Drop Cap را ندارد.
استفاده از float
یکی از روشهای قدیمی و رایج برای ایجاد Drop Cap واقعی، استفاده از float است:
article p:first-child::first-letter {
color: hotpink;
padding: 0 .3rem;
margin: 0 .3rem 0 0;
border: 2px solid;
border-radius: 8px;
font-family: "IBM Plex Mono", monospace;
font-size: 4rem;
float: left;
line-height: 1;
}در این حالت، حرف اول به سمت چپ شناور شده و متن در اطراف آن قرار میگیرد؛ دقیقاً مشابه چیزی که در مجلات و کتابها مشاهده میکنید.
مزیت این روش، پشتیبانی تقریباً کامل در تمامی مرورگرها است.
ویژگی جدید initial-letter
CSS ویژگی جدیدی به نام initial-letter معرفی کرده که ساخت Drop Cap را بسیار سادهتر میکند.
به جای محاسبه اندازه فونت و استفاده از float، فقط کافی است تعداد خطوطی که حرف باید پوشش دهد را مشخص کنید:
article p:first-child::first-letter {
color: hotpink;
padding-right: 8px;
-webkit-initial-letter: 3;
initial-letter: 3;
}عدد 3 به این معناست که حرف اول باید ارتفاعی معادل سه خط متن داشته باشد. مرورگر بهصورت خودکار اندازه مناسب فونت را محاسبه میکند.
مزایای initial-letter
- کدنویسی سادهتر
- عدم نیاز به
float - عدم نیاز به تنظیم دستی
font-size - ایجاد Drop Cap حرفهای و استاندارد
نکته مهم
اگرچه ::first-letter تقریباً در تمام مرورگرها پشتیبانی میشود، اما initial-letter هنوز در برخی مرورگرها پشتیبانی کامل ندارد. بنابراین برای سازگاری بیشتر، بسیاری از توسعهدهندگان همچنان از روش float استفاده میکنند.
جمعبندی
برای ساخت حروف بزرگ ابتدای پاراگراف در CSS دو روش اصلی وجود دارد:
::first-letter+float→ سازگاری بالا با مرورگرهاinitial-letter→ روش مدرنتر و سادهتر
اگر به دنبال پشتیبانی گسترده هستید، از ::first-letter همراه با float استفاده کنید. اگر پروژه شما روی مرورگرهای مدرن اجرا میشود، initial-letter گزینهای تمیزتر و حرفهایتر خواهد بود.
از همراهی شما با پارمین کلود سپاسگزاریم.
نظرات کاربران