با حرف ابتدایی CSS، افت کلاه های خود را کنترل کنید

جی تامپکینز
هنر طراحی کلاهک‌ها صدها، شاید هزاران سال است که وجود داشته است. استفاده از آن در سبک های چاپ برای نشان دادن شروع یک بخش یا فصل جدید را می توان در طول تاریخ مشاهده کرد. اما، استایل کردن در عصر دیجیتال همیشه مشکل ساز بوده است. راه حل "تمیز" برای استایل دادن به آنها وجود ندارد.

خصوصیت initial-letter CSS کارها را بسیار ساده تر می کند.

پشتیبانی از مرورگر

کجا می توانید initial-letter امتحان کنید؟ در Safari و Chrome 110 در دسترس است. در Safari، ویژگی به پیشوند -webkit- نیاز دارد. یک مشکل باز برای پیاده سازی آن در فایرفاکس وجود دارد.

تست پشتیبانی از initial-letter با:

@supports (initial-letter: 1 1) { /* Your supported styles */ }

راه حل های فعلی

چگونه می‌توانید امروز یک drop cap را در CSS استایل کنید؟

شبه عنصر ::first-letter ما را بخشی از راه می کند.

p::first-letter {
  color: hsl(220, 94%, 51%);
  font-weight: bold;
  font-size: 4rem;
}

اما پس از آن احتمالاً باید در حین محاسبه اندازه آن حرف اول، به ویژگی هایی مانند "float" برسید.

p::first-letter {
  color: hsl(220, 94%, 51%);
  font-weight: bold;
  font-size: 4rem;
  float: left;
  line-height: 1;
  margin-right: 0.25rem;
}

معرفی واحدهای CSS جدید مانند lh می تواند تا حدودی این درد را کاهش دهد. اما، اینها نیز پشتیبانی محدودی دارند ( lh در حال حاضر فقط در کروم پشتیبانی می شود).

p::first-letter {
  color: hsl(220, 94%, 51%);
  font-weight: bold;
  font-size: 3lh;
  float: left;
  line-height: 1;
  margin-right: 0.1lh;
}

معرفی حرف اول

ویژگی initial-letter به شما کنترل دقیق تری بر روی این استایل کلاهک می دهد. دو مقدار جدا شده از فضا می گیرد:

p::first-letter {
  initial-letter: 3.5 3;
}
  • آرگومان اول اندازه حرف و تعداد خطوط را مشخص می کند. حروف با حفظ نسبت ابعاد خود بزرگ می شود. شما نمی توانید از یک مقدار منفی استفاده کنید اما می توانید از مقادیر اعشاری استفاده کنید.
  • آرگومان دوم حرف سینک را تعریف می کند. این را می توان به عنوان جبرانی برای جایی که نامه قرار می گیرد در نظر گرفت. مقدار دوم اختیاری است و نمی تواند منفی باشد. اگر وجود نداشته باشد، مقدار اندازه حرف را با نزدیکترین عدد صحیح در نظر می گیرد. این معادل استفاده از کلمه کلیدی "افت" است. سینک همچنین مقدار کلمه کلیدی دیگری را می پذیرد، "افزایش" که معادل سینک 1 است.

این نسخه ی نمایشی را بررسی کنید که در آن می توانید مقادیر را تغییر دهید تا ببینید چگونه روی استایل دراپ کلاپ تأثیر می گذارد.

آن را با ::first-line ترکیب کنید و می توانید چیزی شبیه به این داشته باشید

p::first-line {
  font-variant: small-caps;
  font-weight: bold;
  font-size: 1.25rem;
}
p::first-letter {
  font-family: "Merriweather", serif;
  initial-letter: 3.5 3;
  font-weight: bold;
  line-height: 1;
  margin-right: 1rem;
  color: #3b5bdb;
  text-shadow: 0.25rem 0.25rem #be4bdb;
}

یا شاید به آن یک border بدهید. توجه داشته باشید که چگونه در مثال زیر از کلمه کلیدی "drop" استفاده می شود که در صورت حذف شدن پیش فرض و برابر با 3 است: css p::first-letter { font-family: "Merriweather", serif; initial-letter: 3.5 drop; font-weight: bold; line-height: 1; margin-right: 1rem; color: #3b5bdb; border: 0.25rem dashed #be4bdb; padding: 0.5rem; border-radius: 5px; }

شاید یک background یا مقداری box-shadow اضافه کنید:

p::first-letter {
  font-family: "Merriweather", serif;
  initial-letter: 3.5 3;
  font-weight: bold;
  line-height: 1;
  margin-right: 1rem;
  color: var(--surface-1);
  background: #be4bdb;
  padding: 0.5rem;
  border-radius: 5px;
  box-shadow: 0.5rem 0.5rem 0 #3b5bdb;
}

یا پس‌زمینه را بر روی متن کلیپ کنید:

p::first-letter {
  background: linear-gradient(to bottom right,#1f005c,#5b0060,#870160,#ac255e,#ca485c,#e16b5c,#f39060,#ffb56b);
  font-family: "Merriweather", serif;
  initial-letter: 3.5 3;
  font-weight: bold;
  line-height: 1;
  margin-right: 1rem;
  color: transparent;
  -webkit-background-clip: text;
  padding: 0.5rem;
}

شما امکانات زیادی دارید!

و در اینجا شما آن را دارید، کنترل دقیق تری بر استایل دراپ کلاه خود با initial-letter ! آیا به تایپوگرافی خود خط های دراپ اضافه می کنید؟ چگونه می توانید آنها را سبک کنید؟ به ما اطلاع دهید!