The text-transformproperti di CSS mengontrol kasus teks dan kapitalisasi.
.lowercase ( text-transform: lowercase; )Nilai Transformasi Teks
lowercasemembuat semua huruf dalam teks yang dipilih menjadi huruf kecil.uppercasemembuat semua huruf dalam teks yang dipilih menjadi huruf besar.capitalizemenggunakan huruf besar pada huruf pertama dari setiap kata dalam teks yang dipilih.nonemeninggalkan kapitalisasi dan kapitalisasi teks persis seperti yang dimasukkan.inheritmemberi teks kasus dan kapitalisasi induknya.
Demo di bawah ini menunjukkan lowercase, uppercasedan capitalizedigunakan. Lihat tab HTML untuk melihat bagaimana teks aslinya ditulis, kemudian beralih kembali ke tab hasil untuk melihatnya setelah CSS diterapkan.
Lihat Pena 0f4293fce0d14aafc3818c950ab0ded3 oleh mariemosley (@mariemosley) di CodePen.
Tempat Menarik
capitalizeakan menggunakan huruf besar untuk kata yang muncul di dalam tanda kutip tunggal atau ganda, dan huruf pertama setelah tanda hubung. Ini tidak akan mengubah huruf pertama setelah angka, jadi tanggal seperti "4 Februari 2015" tidak akan berubah menjadi "4 Februari 2015".
capitalizehanya mempengaruhi huruf pertama dari kata-kata. Itu tidak akan mengubah kasus sisa huruf dalam satu kata. Misalnya, jika capitalizekata Anda sudah menggunakan huruf kapital, huruf lain dalam kata tersebut tidak akan berubah menjadi huruf kecil. Ini bagus jika teks Anda menyertakan akronim atau singkatan yang tidak boleh menyertakan huruf kecil.
CSS tidak dapat melakukan “title case”, gaya kapitalisasi yang digunakan dalam judul buku, film, lagu, dan puisi, di mana artikel menggunakan huruf kecil (seperti dalam “Raiders of the Lost Ark”). Tapi, ada solusi JavaScript untuk kasus judul, termasuk toTitleCase () David Gouch.
Informasi Lebih Lanjut
- teks-transform di MDN
- teks-transform dalam Spesifikasi W3C
- Catatan tentang aksesibilitas teks huruf besar dari WebAIM
Dukungan Browser
| Chrome | Safari | Firefox | Opera | YAITU | Android | iOS |
|---|---|---|---|---|---|---|
| Apa saja | Apa saja | Apa saja | Apa saja | Apa saja | Apa saja | Apa saja |
Firefox mendukung aturan kapitalisasi khusus bahasa untuk bahasa Turki, Jerman, Belanda, dan Yunani yang tidak didukung oleh browser lain. Firefox juga merupakan satu-satunya browser yang mendukung text-transform: full-width;, yang dapat membantu meningkatkan keterbacaan teks yang mencakup campuran skrip latin dan Asia Timur. Lihat detailnya di MDN.