Teks Gradien dengan `background-clip: text` Memotong Ekor Huruf (g, p, q, y) — Ini Perbaikannya

Saya lagi merapikan hero section di custom theme klien, dan ada satu headline besar dengan teks gradien. Tekniknya klasik: kasih background berupa gradien ke sebuah span, lalu klip gradiennya ke bentuk huruf pakai background-clip: text dan bikin warna teks jadi transparan. Di banyak kata kelihatan mulus. Tapi begitu headline-nya kebetulan memuat kata dengan huruf turun seperti "engaging", "typography", atau "happy", ekor huruf g, p, q, dan y kepotong rata di bagian bawah. Bukan blur, bukan ketutupan elemen lain — benar-benar terpotong seolah ada gunting tak kelihatan tepat di garis baseline.

Ini kode pemicunya, persis seperti yang awalnya saya tulis:

.accent {
  background: linear-gradient(90deg, #f0f0f0, #8a8a8a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
}

<h1>Building <span class="accent">engaging typography</span></h1>

Render di browser, dan ekor "g" sama "y" di kata "engaging" dan "typography" hilang separuh. Awalnya saya kira masalah font — coba ganti font, ganti font-size, sampai curiga ke rendering antialias. Semua buntu. Padahal kalau warnanya saya balikin ke solid (hapus color: transparent), hurufnya utuh lagi. Jadi jelas masalahnya ada di mekanisme klipnya, bukan di font atau ukuran.

Kenapa ini terjadi

Inti masalahnya: background-clip: text mengklip gambar latar (gradien) ke bentuk glif, tapi area yang dilukis dan diklip itu mengikuti line box dari teks, bukan bentuk asli setiap huruf. Line box tingginya ditentukan oleh line-height. Saya pasang line-height: 1, yang artinya tinggi barisnya benar-benar mepet ke ukuran font, nyaris tanpa ruang ekstra di atas maupun di bawah.

Masalahnya, descender — ekor huruf g, p, q, y — itu turun ke bawah garis baseline. Dengan line-height serapat itu dan tanpa padding bawah sama sekali, bagian bawah glif jatuh di luar area yang dilukis dan diklip. Begitu keluar dari kotak klip, ekornya tidak ikut dilukis, alias kepotong. Huruf yang tidak punya descender (kayak "i", "n", "a") aman, makanya bug-nya intermittent dan bikin saya sempat ragu apa benar ini bug. Padahal konsisten: setiap kali ada descender dan ruang bawahnya kurang, ekornya pasti dikorbankan.

Jadi ini bukan bug font dan bukan bug browser. Ini perilaku wajar dari klip yang dibatasi line box — kebetulan saja line-height: 1 bikin batasnya terlalu ketat sampai descender keluar.

Perbaikannya

Kuncinya: beri kotak klip ruang napas di bawah baseline. Caranya, ubah span aksen jadi inline-block supaya dia bisa menerima padding vertikal dengan benar, tambahkan padding-bottom kecil, dan naikkan sedikit line-height biar ada ruang di bawah baseline. Begini versi yang sudah benar:

.accent {
  background: linear-gradient(90deg, #f0f0f0, #8a8a8a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
  padding-bottom: 0.12em;
  line-height: 1.15;
}

padding-bottom: 0.12em memberi sedikit ruang di bawah glif sehingga kotak klip ikut melar ke bawah dan mencakup ujung descender. Pakai satuan em biar paddingnya ikut skala terhadap ukuran font — jadi tetap proporsional di headline besar maupun kecil. line-height: 1.15 menambah sedikit kelegaan vertikal. Kalau ekornya masih kepotong tipis di font tertentu, naikkan paddingnya sedikit, misalnya 0.15em atau 0.2em.

Satu hal yang harus diwaspadai: display: inline-block mengubah cara span ikut mengalir dan rata dengan teks di sekitarnya. Span yang inline-block tidak akan membungkus per baris seperti teks inline biasa — dia jadi satu blok utuh yang bisa "loncat" ke baris baru. Karena itu, terapkan ini ke span aksen di dalam kalimat, bukan ke seluruh blok headline. Dan setelah dipasang, cek perilaku wrapping-nya: kalau aksennya panjang dan harus pecah jadi beberapa baris, inline-block bisa bikin layout-nya tidak seperti yang diharapkan. Untuk satu atau dua kata aksen, ini aman.

Setelah perubahan ini, ekor g, p, q, dan y di headline saya muncul utuh, gradiennya tetap mulus dari kiri ke kanan, dan tidak ada efek samping ke teks non-aksen di sekitarnya.

Pelajaran

Teks yang diklip butuh ruang napas di bawah baseline. Begitu kamu mengandalkan background-clip: text dengan color: transparent, kotak klipnya terikat ke line box — dan line box yang terlalu rapat akan memangkas apa pun yang turun di bawah baseline, termasuk ekor descender. Solusinya sederhana: kasih padding-bottom pada kotak klip (lewat inline-block) plus sedikit line-height, supaya descender punya tempat untuk dilukis. Lain kali kamu lihat ekor huruf kepotong di teks gradien, jangan langsung curiga font atau browser — cek dulu seberapa rapat line box-nya.