Properti initial-letter CSS akan mempermudah berbagai hal.
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 mengatur drop cap di CSS saat 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 menjangkau properti seperti "float" sambil 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, fitur ini 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 huruf awal
Properti initial-letter memberi Anda kontrol yang lebih baik atas gaya visual drop-cap ini. Dibutuhkan 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 ditingkatkan skalanya sambil mempertahankan rasio aspeknya. Anda tidak dapat menggunakan nilai negatif tetapi dapat menggunakan nilai desimal.
- Argumen kedua menentukan sink huruf. Hal ini dapat dianggap sebagai offset di mana huruf akan ditempatkan. Nilai kedua bersifat opsional dan tidak boleh negatif. Jika tidak ada, nilai tersebut akan dianggap sebagai nilai untuk ukuran huruf yang ditetapkan ke bilangan bulat terdekat. Ini sama dengan menggunakan kata kunci “penurunan”. Sink juga menerima nilai kata kunci lain, “raise” yang setara dengan sink 1.
Lihat demo ini yang dapat Anda gunakan untuk mengubah nilai untuk melihat pengaruhnya terhadap gaya visual drop-cap.
Gabungkan dengan ::first-line agar Anda dapat memiliki aset 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, berikan 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 menambahkan 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.
Demikianlah, kontrol yang lebih baik atas gaya visual drop-cap Anda dengan initial-letter. Apakah Anda akan menambahkan {i>drop cap<i} ke tipografi? Bagaimana Anda bisa menata gayanya? Beri tahu kami.