text-box-trim CSS

Adam Argyle

Dipublikasikan: 14 Januari 2025

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

Bentuk panjang:

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

Bentuk singkat:

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 tidak teratur ini tidak mudah diukur, dan tidak dapat dikontrol, hingga saat ini.

Font tahu, dan CSS juga tahu.

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

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

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

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 bagaimana opsi ini berguna untuk tombol.

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

Fitur dan sintaksis

Berikut, menurut pendapat saya, adalah dua satu baris 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 ke cap alphabetic akan menjadi penggunaan paling umum dari fitur ini. Demo berikut menggunakan fitur ini berkali-kali. Namun, contoh sebelumnya juga menunjukkan ex alphabetic karena berguna untuk keseimbangan optik dengan caranya sendiri yang unik.

Playground Explorer

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

Hal yang dapat dicoba:

1. Memeriksa secara visual cara kerja text-box-trim di seluruh varian teks satu baris dan multi-baris.
2. Mengarahkan kursor ke varian, melihat nilai pemangkasan yang digunakan untuk mencapai efek tersebut.
3. Mengubah font.
4. Memangkas hanya satu sisi kotak teks.
5. Meninjau sintaksis saat Anda bermain.

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

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

Pemusatan yang lebih mudah

Untuk komponen yang lebih kecil, lebih inline, dan intrinsik konten, 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 memberikan padding yang lebih sedikit di bagian atas dan bawah (blok) untuk mengimbangi efek setengah leading.

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

Pada titik ini, kita harus mencoba kombinasi nilai hingga semuanya berpusat secara optik. Hal ini mungkin terlihat bagus di satu layar dan sistem operasi, tetapi tidak di layar dan sistem operasi lain.

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

button {
  text-box: trim-both cap alphabetic;
  padding: 10px;
}

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

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.

Perataan yang lebih mudah

Ruang setengah leading tambahan yang tidak dapat dikontrol di atas (over) dan di bawah (under) kotak teks juga membuat perataan menjadi sulit. Contoh berikut menunjukkan kapan setengah leading dapat membuat perataan menjadi sulit dan bagaimana pemangkasan sisi blok kotak teks dapat membuat perataan yang lebih baik.

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

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

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

Lanjutkan studi

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

• Koleksi Codepen dari semua demo.
• Penelitian dan demo yang bagus oleh Jan Nicklas.
• Dua Properti CSS untuk Memangkas Spasi Kosong Kotak Teks di CSS Tricks.
• Tata Letak Inline CSS di tepi teks.
• Jangan sampai tertukar dengan size-adjust atau ascent-override
• CSS Baseline: Yang Baik, Yang Buruk, dan Yang Jelek.
• Diterapkan ke banyak elemen HTML: CodePen.
• Postingan blog Safari.
• Alasan saya tertarik dengan text-box-trim sebagai desainer.