ستسهّل عليك خاصية initial-letter في CSS الأمور كثيرًا.
دعم المتصفح
أين يمكنني تجربة initial-letter؟ تتوفّر هذه الميزة في Safari وبدءًا من الإصدار 110 من Chrome. في متصفّح 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
تتيح لك السمة initial-letter إمكانية التحكّم بدقة في نمط الحد الأقصى هذا. يأخذ هذا المقياس قيمتَين مفصولتَين بمسافة:
p::first-letter {
initial-letter: 3.5 3;
}
- تحدد الوسيطة الأولى حجم الحرف وعدد الأسطر التي ستشغلها. وسيزيد حجم الحرف مع الحفاظ على نسبة العرض إلى الارتفاع. لا يمكنك استخدام قيمة سلبية، ولكن يمكنك استخدام القيم العشرية.
- تحدّد الوسيطة الثانية مسار تصريف الأحرف. يمكن اعتبار هذا المقياس كموضع مبدئي للحرف. القيمة الثانية اختيارية ولا يمكن أن تكون سالبة. في حال عدم توفّر هذه السمة، يتم الافتراض أنّ قيمة حجم الرسالة هي أقرب عدد صحيح أقل منها. ويعادل ذلك استخدام الكلمة الرئيسية "drop". ويقبل المصرف أيضًا قيمة كلمة رئيسية أخرى، وهي "raise"، والتي تساوي المصرف 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. هل يمكنك إضافة أحرف كبيرة في بداية السطر إلى أسلوب الخط؟ كيف يمكنك تصميمها؟ يُرجى إعلامنا.