text-box-trim CSS

Ambil kembali ruang dari atas dan bawah konten teks Anda; capai keseimbangan optik.

Adam Argyle

Dipublikasikan: 14 Januari 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.

Tulisan tangan:

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

Singkatan:

text-box: trim-both cap alphabetic;

Properti ini memungkinkan Anda mengontrol spasi 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 hingga saat ini tidak dapat dikontrol.

Font tahu, sekarang CSS tahu!

https://codepen.io/web-dot-dev/pen/xbKjRxL

Ruang di atas dan di bawah font disebabkan oleh cara web menata letak teks, yang disebut "half-leading". Hal ini dibahas secara mendalam dalam postingan oleh Matthias Ott yang berjudul The Thing With Leading In CSS. Pada dasarnya, saat pengaturan huruf dilakukan dengan tangan, potongan timah logam digunakan untuk memisahkan baris teks. Web, yang terinspirasi oleh leading, membagi bagian lead tersebut menjadi dua dan mendistribusikan satu bagian di atas dan satu bagian di bawah konten.

Judul ditampilkan dengan batang hotpink di atas dan di bawah teks untuk menampilkan setengah leading.
Source

Histori ini bermakna karena text-box memberi kita nama untuk setiap bagian: lebih dan kurang. Selain itu, kemampuan untuk 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, tempat leading-trim (nama text-box sebelumnya) pertama kali diperkenalkan.

Judul ditampilkan dengan spasi berlebih di atas dan di bawah yang tampak seperti dipotong dengan gunting dan dihapus.

Titik entri Anda ke pemangkasan teks mungkin berasal dari Figma dan kontrol "pemangkasan vertikal"-nya untuk desainer. Postingan X ini menunjukkan letak opsi pemangkasan vertikal ini dan manfaatnya untuk tombol.

Sumber

Terlepas dari cara Anda membuka halaman ini, kontrol tipografi yang terdengar kecil ini dapat membuat perbedaan besar.

Ringkasan fitur dan sintaksis

Menurut saya, berikut adalah dua baris yang paling umum yang akan Anda perlukan saat menggunakan 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 fitur ini yang paling umum. Demo berikut menggunakan ini berkali-kali. Namun, contoh sebelumnya juga menunjukkan ex alphabetic karena berguna untuk keseimbangan optik dengan caranya yang unik.

Playground penjelajah

Demo berikut memungkinkan Anda mempelajari sintaksis dan melihat hasilnya menggunakan menu dropdown. Anda dapat mengubah font, mengubah nilai trim atas dan bawah, serta mengikuti visual dan label berkode warna.

Screenshot demo syntax explorer. Menampilkan font dan menu drop-down untuk memilih font lain. Pratinjau sintaksis dengan text-box: trim-both cap alphabetic syntax ditandai dan ditampilkan. Terakhir, ada 3 dropdown lagi untuk memilih nilai pemangkasan.

Hal-hal yang dapat dicoba:

  1. Memeriksa secara visual cara kerja text-box-trim di seluruh varian teks baris tunggal dan multibaris.
  2. Mengarahkan kursor ke varian, melihat nilai pemangkasan yang digunakan untuk mencapai efek tersebut.
  3. Mengubah font.
  4. Hanya memangkas satu sisi kotak teks.
  5. Tinjau sintaksis saat Anda bermain.
https://codepen.io/web-dot-dev/pen/RNbyooE

Apa yang dapat saya buat dengan teknologi ini atau masalah apa yang dapat diselesaikannya?

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

Perbandingan ditampilkan antara 2 grup konten. Grup pertama memiliki setengah leading, grup kedua memiliki leading yang dipangkas. Hasilnya adalah grup kedua lebih rapat.
https://codepen.io/web-dot-dev/pen/RNbyoKE

Pemusatan yang lebih mudah

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

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

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

Pada tahap ini, kita harus mencoba kombinasi nilai hingga semuanya dipusatkan secara optik. Hal 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 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 menunjukkan elemen yang sama dengan text-box: trim-both cap alphabetic. Hasilnya adalah tombol kedua dipusatkan secara optik.
https://codepen.io/web-dot-dev/pen/NPKMbgq

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

Tiga grup tombol ditampilkan. Grup pertama menampilkan font sans serif biasa. Grup kedua menampilkan font yang mewah atau menyenangkan. Grup ketiga menunjukkan efek yang sama, tetapi dengan font tulisan tangan. Intinya adalah untuk menunjukkan bahwa setiap font memiliki spasi setengah leading yang berbeda, tetapi nilai pemangkasannya sama dan dapat menormalisasi spasi.
https://codepen.io/web-dot-dev/pen/mybLOMg

Berikut adalah elemen <span>, yang sering digunakan untuk menampilkan kategori atau badge. Momen lain saat padding sisi yang sama harus menjadi solusi terbaik, tetapi hingga text-box, kita harus mengatasinya.

Tag ditampilkan secara berdampingan. Grup pertama memiliki setengah leading, grup kedua memiliki leading yang dipangkas. Hasilnya adalah grup kedua lebih rapat dan dipusatkan secara optik.
https://codepen.io/web-dot-dev/pen/mybLOMg

Perataan yang Lebih Mudah

Ruang tambahan yang tidak dapat dikontrol, setengah ruang di atas (over) dan di bawah (under) kotak teks juga mempersulit perataan. Contoh berikut menunjukkan kapan setengah leading dapat mempersulit perataan dan bagaimana 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, tetapi tanpa text-box, gambar akan selalu sedikit lebih tinggi. Dengan text-box, gambar dapat disejajarkan dengan sempurna dengan konten teks.

https://codepen.io/web-dot-dev/pen/yyBjVpg

Perhatikan spasi kosong di atas baris teks berformat pertama dan di bawah baris teks berformat terakhir dalam skenario dengan penggabungan baris.

Pada contoh berikut, perhatikan bagaimana fitur beradaptasi secara logis dengan perubahan pada writing-mode. Coba ubah teks, perhatikan bagaimana tata letak tetap sejajar.

https://codepen.io/web-dot-dev/pen/dPbeOJQ

Lanjutkan studi

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