Ambil kembali ruang dari atas dan bawah konten teks Anda; capai keseimbangan optik.
Dipublikasikan: 14 Jan 2025
Mulai Chrome 133, text-box memungkinkan developer dan desainer menyesuaikan ruang di atas dan di bawah teks.
Tulisan tangan:
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 spasi di atas dan di bawah teks, misalnya , , dan . 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!
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.
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 yang sebelumnya dimiliki text-box) pertama kali diperkenalkan.
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.
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 perintah 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 ini beberapa kali. Namun, contoh sebelumnya juga menampilkan 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.
Hal yang dapat dicoba:
- Memeriksa secara visual cara kerja
text-box-trimdi seluruh varian teks baris tunggal dan multi-baris. - Mengarahkan kursor ke varian, melihat nilai pemangkasan yang digunakan untuk mencapai efek tersebut.
- Mengubah font.
- Hanya memangkas satu sisi kotak teks.
- Tinjau sintaksis saat Anda bermain.
Apa yang dapat saya buat dengan teknologi ini atau masalah apa yang dapat dipecahkannya?
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.
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 awal dari teks, sehingga nilai padding yang sama seperti 10px menjadi berguna:
button {
text-box: trim-both cap alphabetic;
padding: 10px;
}
Berikut adalah beberapa elemen 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 yang sangat berbeda.
Berikut adalah elemen , 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
Spasi tambahan yang tidak dapat dikontrol dan setengah spasi 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 membuat 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.
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.
Melanjutkan studi
Ingin mengetahui info selengkapnya? Daftar link berikut menawarkan berbagai jumlah informasi tambahan dan kasus penggunaan.
- https://codepen.io/collection/zxQBaL - koleksi Codepen dari semua demo di atas
- https://github.com/jantimon/text-box-trim-examples - Riset dan demo yang bagus oleh Jan Nicklas
- https://css-tricks.com/two-css-properties-for-trimming-text-box-whitespace/
- https://drafts.csswg.org/css-inline-3/#text-edges
- Jangan dikelirukan dengan
size-adjustatauascent-overridehttps://web.dev/articles/css-size-adjust - https://www.smashingmagazine.com/2012/12/css-baseline-the-good-the-bad-and-the-ugly/
- https://css-tricks.com/two-css-properties-for-trimming-text-box-whitespace/
- diterapkan ke banyak elemen HTML https://codepen.io/nileshprajapati/pen/RweKdmw
- Postingan blog Safari https://webkit.org/blog/16301/webkit-features-in-safari-18-2/
- https://piccalil.li/blog/why-im-excited-about-text-box-trim-as-a-designer/