ستسهّل السمة initial-letter في CSS تنفيذ المهام.
دعم المتصفح
أين يمكنك تجربة initial-letter؟ وهي متوفرة في Safari ومن Chrome 110. في متصفّح Safari، يجب إضافة البادئة -webkit- إلى السمة. هناك مشكلة مفتوحة ليتم تنفيذها في Firefox.
اختبار دعم initial-letter باستخدام:
@supports (initial-letter: 1 1) { /* Your supported styles */ }
الحلول الحالية
كيف يمكنك تصميم غطاء رأس في 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 في الوقت الحالي في Chrome فقط).
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;
}
- تحدد الوسيطة الأولى حجم الحرف وعدد الأسطر التي ستشغلها. وسيزيد حجم الحرف مع الحفاظ على نسبة العرض إلى الارتفاع. لا يمكنك استخدام قيمة سالبة، ولكن يمكنك استخدام قيم الأعداد العشرية.
- تحدد الوسيطة الثانية مستودع الأحرف. ويمكن اعتبار هذا معادلة للمكان الذي سيظهر فيه الحرف. والقيمة الثانية اختيارية ولا يمكن أن تكون سالبة. وإذا لم يكن متوفّرًا، تفترض القيمة قيمة حجم الحرف التي تم تقريبها إلى أقرب عدد صحيح. ويعادل ذلك استخدام الكلمة الرئيسية "drop". يقبل الحوض أيضًا قيمة كلمة رئيسية أخرى، وهي "رفع" والتي تعادل خلاصة الرقم 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. هل تريد إضافة أحرف كبيرة عمودية إلى أسلوب الخط؟ كيف يمكنك اختيار نمطها؟ يُرجى إعلامنا.