Huruf awal - Trik CSS

Anonim

initial-letter adalah properti CSS yang memilih huruf pertama dari elemen yang akan diterapkan dan menentukan jumlah baris yang ditempati huruf tersebut.

Anda mungkin pernah melihat hal seperti ini di situs berita, di mana huruf pertama dari paragraf utama lebih besar dari konten lainnya.

Situs New Yorker memberi gaya huruf awal

Trik dengan menata huruf pertama dari konten yang digunakan untuk mengambil sedikit retasan di mana Anda membungkus huruf dalam a dan menerapkan kelas untuk menatanya:

/* Style that first letter! */ .first-letter ( font-size: 35px; line-height: 70px; )


Once upon a time in a faraway land…

Itu berfungsi, tetapi lebih banyak markup HTML daripada yang kita inginkan dan memecah konten kita. Plus, sakit rasanya harus menerapkan kelas itu secara manual kapan pun Anda ingin menggunakannya.

Yang mana initial-lettermasuk:

/* Style that first letter! */ .subhead ( initial-letter: 2; )


Once upon a time in a faraway land…

Itu lebih bersih! Pendekatan lain adalah dengan menerapkannya ke ::first-letterpsuedo-selector:

/* Style that first letter! */ .subhead::first-letter ( initial-letter: 2; )

Apakah kamu melihat itu? The initial-letterproperti otomatis menghitung baik ukuran font dan jumlah baris yang dibutuhkan untuk membuat penurunan topi bergaya kami! Ingin mengambil tepat 2, 3, 4 baris atau lebih? Beri tahu properti dan itu akan melakukan pekerjaan berat.

Mengubah properti untuk menempati 1, 2 dan 4 baris

Sintaks dan Nilai

initial-letter: normal | ( );

initial-letter menerima nilai-nilai berikut:

  • normal: Tidak menerapkan efek penskalaan pada huruf pertama. Ini dapat berguna untuk menyetel ulang nilai yang mungkin diwarisi dari kaskade.
  • : Berapa banyak baris yang harus ditempati huruf dimana nilai negatif tidak diperbolehkan.
  • : Berapa banyak baris yang harus dimasukkan huruf di mana nilai negatif tidak diperbolehkan. Ini berguna jika Anda perlu memposisikan huruf lebih rendah untuk mengakomodasi masalah spasi yang rumit tetapi, jika tidak ditentukan, ini membutuhkan nilai

Contoh

Drop Cap, Raised Cap dan Block Cap menggunakan Huruf Awal

Styling huruf awal dapat digunakan untuk mencapai beberapa metode desain tipografi yang mewah. Harap perhatikan bahwa contoh berikut saat ini hanya didukung oleh Safari.

Drop Caps mungkin adalah kasus penggunaan yang paling familiar:

Lihat huruf awal Pena: Drop Cap oleh Geoff Graham (@geoffgraham) di CodePen.

Raised Caps adalah contoh lain:

Lihat huruf awal Pena: Cap Raised oleh Geoff Graham (@geoffgraham) di CodePen.

Block Caps mengingatkan kembali ke dongeng lama:

Lihat huruf awal Pena: Block Cap oleh Geoff Graham (@geoffgraham) di CodePen.

Dukungan Browser

Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.

Desktop

Chrome Firefox YAITU Tepi Safari
Tidak Tidak Tidak Tidak TP *

Ponsel / Tablet

Android Chrome Android Firefox Android iOS Safari
Tidak Tidak Tidak 14.0-14.4 *

Terkait

  • ::first-letter
  • Jatuhkan cuplikan Caps

Informasi Lebih Lanjut

  • CSS Inline Layout Module Level 3: Spesifikasi resmi
  • Jen Simmons Labs: Demo dan contoh kasus penggunaan
  • Tiket Firefox: Buka tiket untuk mendukung fitur tersebut
  • Tiket Internet Explorer: Buka tiket untuk mendukung fitur tersebut