Perataan Teks yang Akurat

Masalah

Browser otomatis menambahkan spasi kosong tambahan di atas dan di bawah karakter teks untuk mengakomodasi tinggi baris dan metrik khusus font seperti ascender dan descender. "Ruang hantu" ini membuat perataan vertikal yang sempurna piksel tidak mungkin dicapai menggunakan CSS standar.

Masalah umum mencakup:

• Ikon Tidak Sejajar: Teks tampak lebih rendah atau lebih tinggi secara visual daripada ikon yang berdekatan, meskipun menggunakan align-items: center.
• Padding Tidak Akurat: Tombol dengan padding: 12px secara visual tampak memiliki lebih banyak ruang di bagian atas atau bawah karena leading internal font.
• Perataan Rata: Anda tidak dapat meratakan bagian atas huruf kapital tepat dengan bagian atas penampung atau gambar yang berdekatan tanpa menggunakan margin negatif "angka ajaib".

Solusi

Properti text-box-trim dan text-box-edge (singkatan text-box) memungkinkan Anda memangkas leading internal ini berdasarkan metrik font tertentu. Dengan memangkas kotak teks ke tinggi huruf kapital (bagian atas huruf kapital) dan garis dasar alfabet (bagian bawah sebagian besar huruf), Anda dapat memastikan bahwa kotak pembatas elemen cocok dengan konten visualnya.

Strategi Penerapan

1. WAJIB: Terapkan text-box-trim: trim-both (atau singkatan text-box) ke elemen yang berisi teks.
2. WAJIB: Tentukan metrik yang akan digunakan untuk pemangkasan dengan text-box-edge. Untuk sebagian besar perataan UI, gunakan cap alphabetic.
3. GUNAKAN ini untuk mencapai pemusatan vertikal visual dalam penampung flex atau petak.
4. LAKUKAN penggunaan ini untuk memastikan nilai padding CSS Anda cocok dengan celah visual antara teks dan tepi penampung.
5. JANGAN gunakan pada teks isi panjang yang memerlukan spasi baris tradisional agar mudah dibaca. Font ini paling cocok untuk judul, tombol, dan label UI.

Panduan Penerapan

Kasity penggunaan 1: Memangkas leading internal untuk badge

Font yang berbeda memiliki jumlah spasi bawaan yang berbeda di atas dan di bawah teks. Hal ini dapat menimbulkan tantangan dalam mencocokkan desain, atau dalam memusatkan teks secara visual di badge. Jika Anda ingin padding penampung pas dengan teks, gunakan text-box: trim-both cap alphabetic. Hal ini sangat berguna untuk komponen UI yang padat seperti badge atau tag. Hal ini memungkinkan padding dimulai tepat di tepi teks di semua sisi.

.badge {
  padding: 10px;
  background: hotpink;
  border-radius: 10px;
  /* 
    Trims the top to the cap-height and 
    the bottom to the alphabetic baseline.
  */
  text-box: trim-both cap alphabetic;
}

Kasus penggunaan 2: Teks di tengah dengan ikon

Saat menggunakan Flexbox untuk meratakan teks dan ikon, "ruang kosong" sering kali membuat teks terlihat sedikit tidak di tengah. Pemangkasan kotak memastikan mesin tata letak menggunakan tinggi huruf yang terlihat sebenarnya untuk perataan.

.button {
  display: inline-flex;
  align-items: center;
  gap: 8px; 
}
/* 
  text-box does NOT inherit, and must be applied directly to the text element.
*/
.button-text{
  /* 
    The flex container now centers against the 
    visible letters, not the invisible font box.
  */
  text-box: trim-both cap alphabetic;
}

Kasus penggunaan 3: Meratakan teks dengan tepi atas

Untuk menyelaraskan judul dengan sempurna dengan bagian atas gambar atau elemen dekoratif yang berdekatan, gunakan trim-start cap alphabetic. Meskipun bagian akhir tidak akan dipangkas, tepi akhir harus ditentukan.

.hero {
  display: flex;
  align-items: flex-start;
}

h1 {
  /* MANDATORY: The bottom edge must also be defined, even though only the top is trimmed. */
  text-box: trim-start cap alphabetic;
}

Praktik Terbaik

• LAKUKAN penggunaan singkatan text-box agar lebih ringkas: text-box: <trim-direction> <edges>.
• LAKUKAN selalu tentukan kedua tepi, meskipun hanya satu tepi yang dipangkas (kecuali jika menggunakan tepi text default).
• LAKUKAN penggabungan dengan line-height untuk pengaturan jarak yang terkontrol. Pemangkasan akan menghapus leading sebelum baris teks pertama dan terakhir, tetapi line-height masih memengaruhi jarak antarbaris dalam teks multibaris.
• JANGAN terapkan ke setiap elemen. Gunakan hanya jika penyelarasan presisi diperlukan.

Strategi penggantian

text-box adalah progressive enhancement. Di browser yang tidak mendukungnya, teks akan dirender dengan leading default-nya. Tata letak Anda akan tetap berfungsi, meskipun sedikit kurang presisi. Tidak diperlukan kode penggantian khusus karena properti diabaikan dengan aman oleh browser lama.

Pertimbangan Lainnya

1. Metrik Font: Font yang berbeda memiliki metrik internal yang berbeda. cap alphabetic adalah default yang andal, tetapi beberapa font atau kasus penggunaan mungkin memerlukan ex (x-height) untuk perataan huruf kecil yang lebih baik.
2. Teks Multibaris: Pemangkasan berlaku untuk baris pertama dan terakhir blok. Saluran internal tidak terpengaruh.