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-. Ada masalah terbuka agar dapat diterapkan di Firefox.
Uji dukungan initial-letter dengan:
@supports (initial-letter: 1 1) { /* Your supported styles */ }
Solusi saat ini
Bagaimana cara Anda menata gaya drop cap di CSS hari ini?
Elemen pseudo ::first-letter membantu kita menyelesaikan sebagian pekerjaan.
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 jumlah baris yang akan ditempatinya. 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 setara 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 pangkas 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 huruf besar awal ke tipografi? Bagaimana Anda akan menata gayanya? Beri tahu kami.