Properti initial-letter CSS akan mempermudah segala sesuatunya.
Dukungan browser
Di mana Anda bisa mencoba initial-letter? 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 Anda menentukan gaya batas bawah di CSS saat ini?
Elemen pseudo ::first-letter memberi kita bagian dari jalan.
p::first-letter {
color: hsl(220, 94%, 51%);
font-weight: bold;
font-size: 4rem;
}
Namun, Anda mungkin perlu menjangkau 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 kesulitan 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 terhadap 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 ditempatinya. Skala huruf akan diperbesar dengan tetap mempertahankan rasio aspeknya. Anda tidak dapat menggunakan nilai negatif, tetapi dapat menggunakan nilai desimal.
- Argumen kedua menentukan sink huruf. Ini bisa dianggap sebagai offset di mana huruf itu akan diletakkan. Nilai kedua bersifat opsional dan tidak boleh negatif. Jika tidak ada, atribut ini mengasumsikan nilai untuk ukuran huruf yang diturunkan ke bilangan bulat terdekat. Tindakan ini sama dengan menggunakan kata kunci “drop”. Sink juga menerima nilai kata kunci lain, "menaikkan" yang setara dengan sink 1.
Lihat demo ini untuk mengubah nilai guna melihat pengaruhnya terhadap gaya visual drop cap.
Gabungkan dengan ::first-line dan Anda akan memiliki hasil 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 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 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 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 penataan gaya drop Cap dengan initial-letter. Apakah Anda akan menambahkan {i>drop cap<i} pada tipografi? Bagaimana Anda akan menata gayanya? Beri tahu kami.