ستسهّل عليك خاصية 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. هل يمكنك إضافة أحرف كبيرة في بداية السطر إلى أسلوب الخط؟ كيف يمكنك تصميمها؟ يُرجى إعلامنا.