Properti initial-letter CSS akan mempermudah semuanya.
Dukungan browser
Di mana Anda dapat mencoba initial-letter? Fitur ini tersedia di Safari dan dari Chrome 110. Di Safari, properti memerlukan awalan -webkit-. Terdapat masalah yang belum terselesaikan pada implementasinya di Firefox.
Uji dukungan initial-letter dengan:
@supports (initial-letter: 1 1) { /* Your supported styles */ }
Solusi saat ini
Bagaimana Anda akan menata gaya drop cap di CSS hari ini?
Elemen pseudo ::first-letter membantu kita.
p::first-letter {
color: hsl(220, 94%, 51%);
font-weight: bold;
font-size: 4rem;
}
Namun, Anda mungkin perlu menggunakan properti seperti "float" saat menghitung ukuran untuk huruf pertama tersebut.
p::first-letter {
color: hsl(220, 94%, 51%);
font-weight: bold;
font-size: 4rem;
float: left;
line-height: 1;
margin-right: 0.25rem;
}
Pengenalan unit CSS baru seperti lh dapat meringankan beberapa masalah ini. Namun, keduanya juga memiliki dukungan terbatas (lh saat ini hanya didukung di Chrome).
p::first-letter {
color: hsl(220, 94%, 51%);
font-weight: bold;
font-size: 3lh;
float: left;
line-height: 1;
margin-right: 0.1lh;
}
Memperkenalkan initial-letter
Properti initial-letter memberi Anda kontrol yang lebih baik atas gaya huruf besar awal ini. Perintah ini memerlukan dua nilai yang dipisahkan spasi:
p::first-letter {
initial-letter: 3.5 3;
}
- Argumen pertama menentukan ukuran huruf dan berapa banyak baris yang akan ditempati. Huruf akan diskalakan sambil mempertahankan rasio aspeknya. Anda tidak dapat menggunakan nilai negatif tetapi dapat menggunakan nilai desimal.
- Argumen kedua menentukan letter sink. Hal ini dapat dianggap sebagai offset untuk tempat huruf akan berada. Nilai kedua bersifat opsional dan tidak boleh negatif. Jika tidak ada, nilai untuk ukuran huruf akan diasumsikan ke bilangan bulat terdekat. Hal ini setara dengan menggunakan kata kunci “drop”. Sink juga menerima nilai kata kunci lain, “raise” yang setara dengan sink 1.
Lihat demo ini tempat Anda dapat mengubah nilai untuk melihat pengaruhnya terhadap gaya huruf besar awal.
Gabungkan dengan ::first-line dan Anda bisa mendapatkan tampilan seperti ini
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;
}
Atau mungkin, beri border. Perhatikan bagaimana contoh berikut menggunakan kata kunci “drop” yang akan menjadi default jika dihilangkan dan sama dengan 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;
}
Mungkin tambahkan background atau beberapa 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;
}
Atau buat klip latar belakang ke teks:
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;
}
Anda memiliki banyak kemungkinan.
Dan begitulah, kontrol yang lebih baik atas gaya drop cap dengan initial-letter. Apakah Anda akan menambahkan {i>drop cap<i} ke tipografi? Bagaimana Anda akan menata gayanya? Beri tahu kami.