הרבה יותר קל לעשות את זה בעזרת המאפיין 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'. הערך 'sink' מקבל גם ערך אחר של מילת מפתח, 'raise', שווה ערך ל-sink של 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! רוצה להוסיף אותיות גדולות בתחילת הפסקה לטיפוגרפיה? איך אפשר לעצב אותם? שלח לנו הודעה!