Perintah dan kasus penggunaan
Tombol, lencana (badge), dan judul dalam suatu sistem desain sering kali diratakan ke pusat visual, sementara line box CSS tetap mempertahankan half-leading atas dan bawah dari font. Jelaskan cara menggunakan text-box-trim dan text-box-edge untuk mengontrol kotak teks, cara menerapkannya ke produksi ketika dukungannya terbatas, serta cara memperhitungkan pemuatan font, mode penulisan, dan aksesibilitas.
Apa yang sedang diuji oleh pewawancara
- Membedakan glyph, metrik font, line box, dan box model elemen.
- Menjelaskan pemangkasan start, end, dan dua sisi secara tepat.
- Memilih tepi cap, ex, text, alphabetic, atau leading dengan
text-box-edge. - Menangani arah blok logis, font fallback, dan progressive enhancement.
- Memverifikasi hasil dengan peramban nyata, font, dan bukti aksesibilitas.
Pertanyaan untuk diklarifikasi terlebih dahulu
- Apakah tujuannya adalah pemusatan optik, stabilitas lintas font, atau line-height dan baseline yang tetap?
- Bolehkah komponen mengaktifkan fitur ini hanya pada peramban yang mendukung?
- Font, ukuran, bahasa, mode penulisan, dan rentang zoom apa saja yang berada dalam cakupan?
- Apakah teks dapat membungkus (wrap), dan apakah cincin fokus serta area sentuh (hit area) harus tetap tidak berubah?
Jawaban tiga puluh detik
Line box tradisional mencakup half-leading font, sehingga padding yang identik dapat terlihat berbeda secara vertikal di berbagai font. text-box-trim memangkas tepi sumbu blok dan text-box-edge memilih metrik font yang digunakan sebagai tepi; text-box adalah bentuk singkatnya (shorthand). Saya akan mempertahankan dimensi yang ada sebagai fallback, menerapkan progressive enhancement di dalam feature query, mempertahankan area klik tombol minimum, dan menguji font, bahasa, mode penulisan, zoom, serta teknologi asistif.
Jawaban mendalam, langkah demi langkah
1. Gambarkan empat kotak terlebih dahulu
Pisahkan area glyph yang digambar, metrik font, line box, serta padding dan border elemen. Memangkas kotak teks mengubah okupansi konten pada sumbu blok; hal ini tidak boleh digambarkan sebagai memotong garis luar glyph atau mengecilkan area klik.
2. Jelaskan sumber half-leading
Ketika line-height melebihi tinggi baris bawaan font, ruang ekstra biasanya didistribusikan di kedua sisi line box. Ascender, descender, cap height, dan x-height berbeda di setiap font, sehingga line-height yang sama dapat menghasilkan pusat optik yang berbeda.
3. Pilih tepi pemangkasan
text-box-trim menerima none, trim-start, trim-end, dan trim-both. Tombol sering kali memerlukan pemangkasan di kedua sisi; judul mungkin hanya memangkas tepi block-start untuk menjaga ritme dengan paragraf sebelumnya.
4. Pilih metrik font
text-box-edge dapat memilih tepi seperti cap, ex, text, alphabetic, atau leading. cap dapat sesuai dengan referensi visual judul huruf besar, sedangkan text lebih dekat ke batas teks font. Ujilah font dan bahasa yang sebenarnya; tidak ada metrik yang menjadi kebenaran universal untuk setiap font.
5. Gunakan shorthand secara lokal
.button {
text-box: trim-both cap alphabetic;
padding: 0.625rem 1rem;
}Shorthand menyatakan pemangkasan dan tepi secara bersamaan. Batasi cakupannya hanya pada komponen yang membutuhkannya agar pemangkasan global tidak merusak ritme paragraf, perataan ikon, atau konten multibaris.
6. Tangani arah penulisan logis
start dan end adalah tepi sumbu blok logis dan berubah sesuai dengan writing-mode. Ukur tata letak horizontal dan vertikal dengan nilai direction yang berbeda; jangan mengganti definisi logis dengan intuisi fisik atas/bawah.
7. Rancang progressive enhancement
Pertahankan line-height, padding, dan tinggi minimum yang ada secara default, lalu aktifkan penyempurnaan di dalam @supports (text-box-trim: trim-both). Jika peramban mengabaikan deklarasi tersebut, teks harus tetap dapat dibaca dan tombol harus mempertahankan dimensi sentuh dan keyboard-nya.
8. Verifikasi pemuatan font dan aksesibilitas
Ukur setelah font target dimuat, mencakup font fallback, jaringan lambat, zoom, font sistem, dan string multibahasa. Periksa indikasi fokus, kliping, urutan pembaca layar, dan persegi panjang area interaksi yang sebenarnya; pemusatan optik tidak boleh mengorbankan keteroperasian.
Pertukaran (Trade-off) dan batasan
Fitur ini dapat menghilangkan margin negatif sembarangan dan offset per font, tetapi dukungan peramban masih terbatas dan metrik font tetap bervariasi. Fitur ini tidak menggantikan line-height, padding, perataan flex, atau tinggi minimum yang wajar. Berhati-hatilah dengan teks isi multibaris, font dinamis, dan konten inline yang kompleks. Untuk paritas desain, catat font target, metrik, versi peramban, dan toleransi daripada hanya menyimpan tangkapan layar.
Rencana peluncuran dan bukti
- Catat font komponen, ukuran, bahasa, mode penulisan, dan toleransi.
- Pertahankan gaya saat ini sebagai baseline, tambahkan cabang feature-query, dan kunci ukuran interaktif minimum.
- Uji Chrome 133 dan peramban lain dalam matriks proyek; MDN menandai properti ini sebagai ketersediaan terbatas dan bukan Baseline.
- Ukur pergeseran optik, cincin fokus, pembungkusan teks, dan zoom dengan font nyata serta font fallback.
- Simpan tangkapan layar, pengukuran, versi peramban, dan kebijakan fallback dalam catatan penerimaan komponen.
Kesalahan umum dan tindak lanjut
Kesalahan 1: Menganggap trim sebagai kliping glyph
Ini terutama menyesuaikan tepi kotak teks; ini tidak memotong outline glyph berdasarkan piksel. Kembalilah ke metrik font, line box, dan box model elemen.
Kesalahan 2: Mengatur trim-both secara global
Paragraf, daftar, dan konten multibaris membutuhkan ritme normal. Nyatakan cakupan komponen dan batasan fallback.
Kesalahan 3: Hanya merekam font default
Pemuatan font yang gagal, perubahan bahasa, atau font sistem mengubah metrik. Sertakan pengujian dengan fallback dan jaringan lambat.
Kesalahan 4: Mengabaikan sumbu logis
trim-start tidak selalu merupakan bagian atas fisik. Verifikasi perilaku sumbu blok dalam penulisan vertikal dan nilai arah yang berbeda.
Kesalahan 5: Memeriksa tampilan visual tetapi bukan operasinya
Pemangkasan tidak boleh mengurangi area sentuh, fokus keyboard, atau area yang dapat dibaca. Berikan pemeriksaan ukuran minimum, cincin fokus, dan teknologi asistif.