Text Transform

Tombol bertuliskan “Kirim” sering tampil sebagai “KIRIM”, dan menu navigasi tampil kapital padahal HTML-nya ditulis huruf biasa. Yang bekerja di balik layar adalah text-transform — property yang mengubah tampilan huruf tanpa menyentuh teks aslinya. Sifat “hanya visual” ini justru menjadi keunggulan besar untuk aksesibilitas dan mesin pencari. Pada chapter ini kita mempelajari empat nilai text-transform, konvensi pemakaiannya pada tombol dan label, serta perilaku capitalize yang sering disalahpahami.

Empat Nilai text-transform #

.badge-status { text-transform: uppercase; }
.nama-produk  { text-transform: capitalize; }

Demo berikut membandingkan teks aslinya dengan hasil capitalize-nya:

Hanya Visual: Teks Asli Tidak Berubah #

text-transform bekerja murni pada tahap rendering. Teks yang disalin pengguna tetap bentuk aslinya, screen reader membaca bentuk aslinya, dan mesin pencari mengindeks bentuk aslinya. Inilah alasan property ini lebih baik daripada mengetik huruf kapital langsung di HTML:

<!-- Teks asli tetap rapi di markup -->
<button type="button" class="tombol-utama">Tambah ke Keranjang</button>

.tombol-utama { text-transform: uppercase; }

Kalimat di markup tetap terbaca wajar oleh semua alat, sementara tampilannya mengikuti desain.

Konvensi: Tombol, Label, dan Navigasi #

Huruf kapital penuh membuat teks tampak lebih tinggi, sehingga lazim dipakai pada teks UI pendek: tombol, label form, badge, dan item navigasi. Karena huruf kapital menghilangkan variasi tinggi antarhuruf, kemiringan jarang pada teks kapital biasanya ditambal dengan spasi ekstra melalui letter-spacing:

.tombol-utama {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.875rem;
}

.judul-section {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

Pairing text-transform dengan letter-spacing seperti ini adalah pola yang akan kita dalami di chapter berikutnya.

Perilaku capitalize yang Perlu Diwaspadai #

capitalize membesarkan huruf pertama setiap kata — dan itu saja. Huruf lainnya tidak diturunkan:

.nama-produk { text-transform: capitalize; }

CSS tidak memiliki mode “Title Case” yang menurunkan huruf lain sekaligus; bila kapitalisasi judul yang konsisten dibutuhkan, tulis teksnya dengan benar di HTML atau rapikan lewat JavaScript.

Ringkasan #

text-transform mengubah tampilan huruf dengan uppercase, lowercase, dan capitalize, sementara none mengembalikannya ke bentuk asli. Karena transformasinya hanya visual, teks di markup tetap asli untuk disalin, dibaca screen reader, dan diindeks mesin pencari — keuntungan yang membuatnya unggul daripada mengetik kapital langsung. Konvensi terkuatnya ada pada tombol, label, dan navigasi yang dipasangkan dengan letter-spacing. Chapter berikutnya membahas property itu sendiri: letter-spacing dan word-spacing.