text-box-trim CSS

Adam Argyle

Dipublikasikan: 14 Jan 2025

Mulai Chrome 133, text-box memungkinkan developer dan desainer menyesuaikan ruang di atas dan di bawah teks.

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: not supported.
  • Safari: 18.2.

Source

Longhand:

text-box-trim: trim-start | trim-end | trim-both | none;
text-box-edge: cap | ex | text | leading + alphabetic | text;

Singkatan:

text-box: trim-both cap alphabetic;

Properti ini memungkinkan Anda mengontrol ruang di atas dan di bawah teks, misalnya <h1>, <button>, dan <p>. Setiap font menghasilkan jumlah ruang arah blok yang berbeda, yang berkontribusi pada ukuran elemen. Kontribusi ruang yang kacau ini tidak mudah diukur, dan tidak mungkin dikendalikan, hingga saat ini.

Font sudah tahu, sekarang CSS juga tahu.

Coba di CodePen

Ruang di atas dan di bawah font ada karena cara web menata teks, yang disebut "setengah jarak baris". Hal ini dibahas secara ahli dalam postingan oleh Matthias Ott yang berjudul The Thing With Leading In CSS. Pada dasarnya, saat tata huruf dilakukan secara manual, potongan timbal logam digunakan untuk memisahkan baris teks. Web, yang terinspirasi oleh iklan utama, membagi iklan utama menjadi dua bagian dan mendistribusikan satu bagian di atas dan satu bagian di bawah konten.

Judul ditampilkan dengan batang merah muda di atas dan di bawah teks untuk mendemonstrasikan setengah jarak baris. Sumber

Histori ini bermakna karena text-box memberi kita nama untuk setiap bagian: atas dan bawah. Selain itu, Anda dapat memangkasnya.

Ada juga karya sebelumnya untuk text-box, Anda mungkin ingat postingan menarik dari Ethan Wang yang berjudul Leading-Trim: The Future Of Digital Typesetting, yang memperkenalkan leading-trim (nama text-box sebelumnya).

Judul dengan ruang berlebih di atas dan di bawahnya tampak dipotong dengan gunting dan dihapus.

Titik entri Anda ke pemangkasan teks mungkin berasal dari Figma dan kontrol "pemangkasan vertikal" untuk desainer. Postingan X ini menunjukkan lokasi opsi pemangkasan vertikal ini dan cara opsi ini berguna untuk tombol.

Sumber

Terlepas dari cara Anda sampai di sini, kontrol tipografi yang terdengar kecil ini dapat membuat perbedaan besar.

Fitur dan sintaksis

Menurut pendapat saya, berikut adalah dua kalimat singkat yang paling umum yang akan Anda perlukan saat bekerja dengan text-box:

h1 {
  /* trim both sides to the capital letters */
  text-box: trim-both cap alphabetic;

  /* trim both sides to the lowercase letter x */
  text-box: trim-both ex alphabetic;
}

Memangkas keduanya menjadi cap alphabetic akan menjadi penggunaan paling umum dari fitur ini. Demo berikut menggunakannya berkali-kali. Namun, contoh sebelumnya juga menampilkan ex alphabetic karena berguna untuk keseimbangan optik dengan cara uniknya sendiri.

Taman bermain Explorer

Jelajahi sintaksis di playground kami, dan lihat hasilnya menggunakan menu drop-down. Anda dapat mengubah font, mengubah nilai pangkas atas dan bawah, serta mengikuti visual dan label berkode warna.

Pratinjau sintaksis dengan kotak teks: sintaksis alfabetis trim-both cap ditandai dan ditampilkan. Ada 3 drop-down lagi untuk memilih nilai pangkas.

Hal yang dapat dicoba:

  1. Memeriksa secara visual cara kerja text-box-trim di seluruh varian teks baris tunggal dan multi-baris.
  2. Arahkan kursor ke varian, lihat nilai pangkas yang digunakan untuk mencapai efek tersebut.
  3. Mengubah font.
  4. Memangkas hanya satu sisi kotak teks.
  5. Tinjau sintaksis saat Anda bermain.
Coba di CodePen

Apa yang dapat saya buat dan masalah apa yang dapat diselesaikannya?

Ada beberapa solusi penataan dan perataan yang jauh lebih sederhana yang muncul dari kemampuan pemangkasan ini. Anda bahkan dapat lebih dekat dengan leading yang tepat, di mana sesuatu seperti gap dapat digunakan di antara konten.

Perbandingan antara 2 grup konten.
Grup pertama memiliki setengah jarak antarbaris, grup kedua memiliki jarak antarbaris yang dipangkas. Hasilnya adalah kelompok kedua lebih rapat. Coba di CodePen

Penengahan yang lebih mudah

Untuk komponen yang lebih kecil, lebih inline, dan intrinsik konten, padding: 10px adalah gaya yang wajar untuk ditentukan bagi elemen agar memiliki jarak yang sama di semua sisi. Namun, hasilnya dapat membingungkan orang, karena sering kali memiliki ruang ekstra di bagian atas dan bawah.

Untuk mengatasi hal ini, developer sering kali secara eksplisit menempatkan padding yang lebih sedikit di bagian atas dan bawah (blok) untuk mengimbangi efek setengah jarak antarbaris.

button {
  padding-block: 5px;
  padding-inline: 10px;
}

Pada tahap ini, kita harus mencoba kombinasi nilai hingga semuanya berpusat secara visual. Tampilan ini mungkin terlihat bagus di satu layar dan sistem operasi, tetapi tidak di layar dan sistem operasi lainnya.

text-box memungkinkan kita memangkas setengah spasi di awal dari teks, sehingga nilai padding yang sama seperti 10px menjadi berguna:

button {
  text-box: trim-both cap alphabetic;
  padding: 10px;
}
Dua contoh ditampilkan.
Yang pertama menampilkan elemen dengan padding: 10 px dan setengah leading. Yang kedua menampilkan elemen yang sama dengan text-box: trim-both cap alphabetic. Hasilnya adalah tombol kedua dipusatkan secara optik. Coba di CodePen

Berikut beberapa elemen <button> yang menunjukkan cara memangkas ruang dengan text-box membuat padding: 10px terlihat sama di semua sisi dalam elemen interaktif yang praktis. Perhatikan bagaimana font alternatif dapat menghasilkan ruang setengah leading yang sangat berbeda.

Tiga grup tombol. Yang pertama menggunakan font sans serif biasa, yang kedua menggunakan font unik atau menyenangkan, dan yang ketiga menggunakan efek yang sama dengan font tulisan tangan.
Setiap font memiliki ruang setengah leading yang berbeda, tetapi nilai pangkasnya sama dan dapat menormalisasi ruang. Coba di CodePen

Berikut adalah elemen <span>, yang sering digunakan untuk menampilkan kategori atau badge. Contoh lain saat padding sisi yang sama akan menjadi solusi terbaik, tetapi hingga text-box kami harus mencari solusi alternatif.

Tag ditampilkan berdampingan. Grup pertama memiliki setengah jarak antarbaris, grup kedua memiliki jarak antarbaris yang dipangkas.
Grup tag kedua lebih rapat dan berpusat secara optik, berkat ruang kosong di awal yang dipangkas.

Penyesuaian yang lebih mudah

Ruang setengah leading yang tidak dapat dikontrol di atas (over) dan di bawah (under) kotak teks juga menyulitkan perataan. Contoh berikut menunjukkan kapan setengah jarak antar-baris dapat menyulitkan perataan dan cara memangkas sisi blok kotak teks dapat menghasilkan perataan yang lebih baik.

Di sini, gambar ditempatkan di samping teks. Gambar akan bertambah tinggi sesuai kebutuhan teks. Tanpa text-box, gambar akan selalu sedikit lebih tinggi. Dengan text-box, gambar dapat selaras sempurna dengan konten teks.

Coba di CodePen

Perhatikan bahwa ruang kosong berada di atas baris teks berformat pertama dan di bawah baris teks berformat terakhir dalam skenario dengan pemisahan baris.

Dalam contoh berikut, perhatikan bagaimana fitur beradaptasi secara logis terhadap perubahan writing-mode. Coba ubah teks, perhatikan bagaimana tata letak tetap selaras.

Coba di CodePen

Lanjutkan belajar

Ingin mengetahui info selengkapnya? Daftar link berikut menawarkan berbagai jumlah informasi tambahan dan kasus penggunaan.