Dua properti CSS untuk memangkas spasi di kotak teks

13/09/2024

itutext-box-trimDantext-box-edge Properti CSS memungkinkan pengembang untuk memangkas jumlah spasi putih yang dapat ditentukan yang muncul di atas baris teks pertama yang diformat dan di bawah baris teks terakhir yang diformat dalam kotak teks, menjadikan kotak teks secara vertikal lebih besar daripada konten di dalamnya.

Ruang putih ini disebutpelopordan muncul di atas dan di bawah (sebenarnya ini adalah dua bagian baris) semua baris teks untuk membuat teks lebih mudah dibaca. Namun, kami hanya ingin itu munculDi antara merekaBaris teks, bukan? Kami tidak ingin mereka muncul di sepanjang tepi atas atau bawah kotak teks, karena mengganggu margin, padding, gap, dan spasi lainnya.

-Advertisement-.

proxmox
netbird

Misalnya kita menerapkan50pxmargin tetapi kemudian menambahkan jurusan lain37pxkita akan mendapatkan total keseluruhan 87pxLuar angkasa. Kemudian kita perlu mengatur marginnya13pxUntuk memberi ruang50pxDalam praktiknya.

Kata pembakar muncul sebagai kotak teks dengan spasi putih di atas dan di bawahnya.

Sebagai orang yang merancang sistem, saya berusaha menjaga konsistensi sebanyak mungkin dan menggunakan tag sesedikit mungkin, yang memungkinkan saya menggunakan kompiler saudara tetangga (+) untuk membuat aturan komprehensif seperti ini:

/* Whenever <element> is followed by <h1> */
<element> + h1 {
  margin-bottom: 13px; /* instead of margin-bottom: 50px; */
}

Pendekatan ini masih memusingkan karena Anda masih harus melakukan perhitungan (walaupun lebih sedikit). Tapi dengan text-box-trim Dan text-box-edge properti, 50px Seperti yang didefinisikan oleh sarana CSS 50px Secara visual:

Kata pembakar dengan kotak teks mengalir di tepi atas dan bawahnya.

Penafian: text-box-trim Dan text-box-edge Itu hanya dapat diakses melalui tanda fitur di Chrome 128+ dan Safari 16.4+, serta Pratinjau Teknologi Safari tanpa tanda fitur. Lihat Caniuse untuk dukungan browser terbaru.

Mulailah dengan text-box-trim

text-box-trim adalah properti CSS yang pada dasarnya mengaktifkan pemangkasan kotak teks. Tidak ada gunanya selain itu, tapi memberi kita pilihan untuk memangkas dari awal saja, atau akhir saja, atau awal dan akhir, atau none:

text-box-trim: trim-start;
text-box-trim: trim-end;
text-box-trim: trim-both;
text-box-trim: none;

Catatan:Di browser web lama, Anda mungkin perlu menggunakan versi yang lebih lamastart/end/bothnilai-nilai, bukan yang terbarutrim-start/trim-end/trim-bothnilai masing-masing. Bahkan di browser web lama, Anda mungkin perlu menggunakannyatop/bottom/bothSayangnya, tidak ada referensi untuk ini, jadi Anda hanya perlu melihat mana yang berhasil.

Sekarang, di mana Anda ingin memangkas?

Anda mungkin bertanya-tanya apa yang saya maksud dengan itu. Perlu diingat bahwa karakter tipografi memiliki banyak simpul.

Ada x-height, yang menentukan bagian atas huruf “x” dan huruf kecil lainnya (tidak termasuk ascender atau superskrip), cap-height, yang menentukan bagian atas huruf besar (sekali lagi, tidak termasuk ascender atau superskrip), dan font alfabet, yang Dia tentukan<>dasarDari sebagian besar huruf (kecuali<>Mereka yang turunatau melampauinya). Lalu tentu saja ada bullish high dan bearish high juga.

Anda dapat memotong ruang putih di antara text-underline-position Sudah diatur ke under).

Jangan potong apa pun

text-box-edge: leadingBerarti mencakup semua awalan; Jangan potong apa pun. Ini memiliki efek yang sama dengantext-box-trim: noneAtau menyerahtext-box-trimDantext-box-edgeSama sekali. Anda juga dapat membatasi pemangkasan di bawah tepi dengan text-box-trim: Pangkas di awal atau potong di tepi atas dengantext-box-trim: trim-endYa, ada banyak cara untuk tidak melakukan hal ini sama sekali!

Browser web yang lebih baru telah menyimpang dari rancangan kerja spesifikasi CSSWG dengan menghapusleadingnilai dan ganti denganautomeskipun ada peringatan “Belum mengisi daya (belum)” (*abaikan*).

Tentu saja,text-box-edgeIa menerima dua nilai (instruksi untuk tepi atas, lalu instruksi untuk tepi bawah). Namun,autoHarus digunakan sendiri.

text-box-edge: auto; /* Works */
text-box-edge: ex auto; /* Doesn't work */
text-box-edge: auto alphabetic; /* Doesn't work */

Saya dapat menjelaskan semua skenario di mana mobil dapat berfungsi, namun tidak ada satupun yang berguna. Saya pikir hanya itu yang kami inginkanautoKeuntungannya adalah Anda dapat mengatur tepi atas atau bawah ke mode otomatis dan tepi lainnya ke mode lain, tetapi hanya itu yang tidak dilakukannya. Ini merupakan masalah, namun kami akan segera membahasnya secara detail.

Potong di atas anak tangga dan/atau di bawah anak tangga

itutextNilai di atas riser akan dipangkas jika digunakan sebagai nilai pertama dan di bawah descender jika digunakan sebagai nilai kedua dan juga merupakan nilai default jika gagal mendeklarasikan nilai kedua. (Saya pikir Anda ingin menjadi seperti ituautotapi itu tidak akan terjadi.)

text-box-edge: ex text; /* Valid */
text-box-edge: ex; /* Computed as `text-box-edge: ex text;` */
text-box-edge: text alphabetic; /* Valid */
text-box-edge: text text; /* Valid */
text-box-edge: text; /* Computed as `text-box-edge: text text;` */

Perlu dicatat bahwa metrik ketinggian bullish dan bearish berasal dari garis yang sama (atau tidak!), sehingga teks bisa sangat fluktuatif. Misalnya dengan Arial, ketinggian naik termasuk tanda diakritik dan tinggi jatuh termasuk tanda diakritik, sedangkan dengan Fraunces, tinggi jatuh termasuk tanda diakritik dan saya tidak tahu apa saja yang termasuk dalam ketinggian menaik. Karena alasan ini, ada pembicaraan tentang penggantian namatextkefrom-font.

Kata pembakar ditulis dalam dua versi berbeda dengan tanda yang menunjukkan bagaimana kotak tes terpengaruh.

Potong tepat di atas tinggi tutupnya

Untuk memangkas tinggi penutup atas:

text-box-edge: cap; /* Computed as text-box-edge: cap text; */
Kata pembakar dengan huruf D terletak sedikit di luar batas atas kotak teks.

Ingatlah bahwa nilai yang tidak dideklarasikan adalah teks default, bukan otomatis (seperti yang ditunjukkan di atas). Oleh karena itu, untuk memilih untuk tidak memotong tepi bawah, Anda perlu menggunakantrim-start instead ketrim-both:

text-box-trim: trim-start; /* Not text-box-trim: trim-both; */
text-box-edge: cap; /* Not computed as text-box-edge: cap text; */

Potong di atas tinggi sampul dan di bawah garis dasar alfabet

Untuk memangkas bagian di atas tinggi sampul dan di bawah garis dasar alfabet:

text-box-trim: trim-both;
text-box-edge: cap alphabetic;
Kata membara tanpa spasi.

Ngomong-ngomong, opsi “Cover Height to Baseline” di pengaturan “Vertical Trim” Figma melakukan hal ini. Namun, mode pengembangannya menghasilkan kode CSS dengan nama properti yang sudah ketinggalan zaman (leading-trimDantext-edge) dan nilai-nilai lama)top Danbottom).

Tangkapan layar Figma dari pengaturan teks.

Potong di atas x tinggi saja

Untuk memangkas tinggi x tertinggi saja:

text-box-trim: trim-start;
text-box-edge: ex;
Kata pembakar dengan sedikit spasi di sepanjang tepi bawah kotak teksnya.

Potong tinggi x atas dan bawah garis dasar alfabet

Untuk memangkas bagian di atas tinggi x dan di bawah garis dasar alfabet:

text-box-trim: trim-both;
text-box-edge: ex alphabetic;
Kata membara tanpa spasi.

Potong tepat di bawah garis dasar abjad

Untuk hanya memotong apa yang berada di bawah garis dasar abjad, ikuti langkah-langkah berikuttidak akanPekerjaan (Segalanya berjalan baik untuk sementara waktu, bukan?):

text-box-trim: trim-end;
text-box-edge: alphabetic;

Hal ini karena nilai pertama selalu merupakan nilai tepi akhir yang wajib sedangkan nilai kedua adalah nilai tepi bawah opsional. Artinya alfabet bukanlah nilai trailing edge yang valid, meskipun sudah disertakantrim-endIni menunjukkan bahwa kami tidak akan menyediakannya. Selain keluhan tentang verbositas, sintaksis yang benar akan membuat Anda mendeklarasikan nilai berlebih meskipun Anda benar-benar menggantinyatrim-end:

text-box-trim: trim-end;
text-box-edge: [any over edge value] alphabetic;
Kata pembakar dengan sedikit spasi putih di sepanjang tepi atas kotak teksnya.

Bagaimana dengan mesin terbang?

Sulit untuk mengetahui bagaimana browser web memotong mesin terbang sampai Anda mengetahuinya, tetapi Anda dapat membaca semuanya di spesifikasi. Secara teori, Anda mungkin ingin menggunakanideographic-inkPemangkasan nilai danideographicNilai tanpa pemangkasan, keduanya belum didukung:

text-box-edge: ideographic; /* No trim */
text-box-edge: ideographic-ink; /* Trim */
text-box-edge: ideographic-ink ideographic; /* Top trim */
text-box-edge: ideographic ideographic-ink; /* Bottom trim */

text-boxsifat reduksi

Jika Anda tidak tertarik dengan panjang kliping kotak teks, ada jalan pintasnyatext-boxProperti yang membuatnya agak tidak berarti. Aturan yang sama berlaku bagi mereka.

/* Syntax */
text-box: [text-box-trim] [text-box-edge (over)] [text-box-edge (under)]?

/* Example */
text-box: trim-both cap alphabetic;

Pikiran terakhir

Sekilas,text-box-trimDantext-box-edgeIni mungkin kedengarannya tidak terlalu menarik, tetapi mereka membuat spasi item menjadi lebih mudah.

Apakah saran saat ini merupakan cara terbaik untuk menangani pemangkasan kotak teks? Secara pribadi, menurut saya tidak. saya percayatext-box-trim-startDantext-box-trim-endTapi itu akan lebih masuk akaltext-box-trimIni digunakan sebagai properti singkatantext-box-edgeIni tidak digunakan sama sekali, tapi saya akan puas dengan beberapa penyederhanaan dan/atau latihan yang konsisten. Bagaimana pendapat Anda?

Ada beberapa kekhawatiran lain juga. Misalnya, haruskah ada opsi untuk menyertakan garis bawah, superskrip, tanda baca gantung, atau diakritik? Saya akan mengatakan ya, terutama jika Anda menggunakannyatext-underline-position: underAtau sangat tebaltext-decoration-thicknesskarena dapat membuat jarak antar elemen tampak lebih kecil.

Dua Properti CSS untuk Mengecilkan Spasi di Kotak Teks awalnya diterbitkan di CSS-Tricks, bagian dari keluarga DigitalOcean. Anda harus mendapatkan buletin.

Sumber

-Advertisement-.

IDJ