Gesaan dan kes penggunaan
Butang, lencana (badge) dan tajuk dalam sistem reka bentuk sering dijajarkan ke bahagian tengah visual, manakala kotak baris (line box) CSS mengekalkan half-leading atas dan bawah fon tersebut. Terangkan cara menggunakan text-box-trim dan text-box-edge untuk mengawal kotak teks, cara melancarkannya apabila sokongan pelayar adalah terhad, serta cara mengambil kira pemuatan fon, mod penulisan dan kebolehcapaian.
Perkara yang diuji oleh penemu duga
- Membezakan glif, metrik fon, line box dan model kotak elemen.
- Menerangkan pemangkasan start, end dan kedua-dua belah sisi secara tepat.
- Memilih tepi cap, ex, text, alphabetic atau leading dengan
text-box-edge. - Mengendalikan arah blok logikal, fon sandaran (fallback) dan peningkatan progresif (progressive enhancement).
- Mengesahkan hasil dengan pelayar sebenar, fon dan bukti kebolehcapaian.
Soalan untuk dijelaskan terlebih dahulu
- Adakah matlamatnya pemusatan optik, kestabilan rentas fon, atau line-height dan garis dasar (baseline) yang tetap?
- Bolehkah komponen mendayakan ciri ini hanya pada pelayar yang menyokongnya?
- Apakah fon, saiz, bahasa, mod penulisan dan julat zum yang berada dalam skop?
- Bolehkah teks membalut (wrap), dan adakah gelang fokus serta kawasan sentuhan (hit area) mesti kekal tidak berubah?
Jawapan tiga puluh saat
Line box tradisional menyertakan half-leading fon, jadi padding yang sama boleh kelihatan berbeza secara menegak merentas fon yang berlainan. text-box-trim memangkas tepi paksi blok dan text-box-edge memilih metrik fon yang digunakan sebagai tepi; text-box ialah trengkasnya (shorthand). Saya akan mengekalkan dimensi sedia ada sebagai sandaran, menggunakan peningkatan progresif di dalam pertanyaan ciri (feature query), mengekalkan kawasan sentuhan butang minimum, dan menguji fon, bahasa, mod penulisan, zum serta teknologi bantuan.
Jawapan mendalam, langkah demi langkah
1. Lukis empat kotak terlebih dahulu
Asingkan kawasan glif yang dicat, metrik fon, line box, serta padding dan border elemen. Memangkas kotak teks mengubah ruang pengisian kandungan pada paksi blok; ia tidak sepatutnya digambarkan sebagai memotong garis luar glif atau mengecilkan kawasan sentuhan.
2. Terangkan punca half-leading
Apabila line-height melebihi ketinggian baris fon itu sendiri, ruang tambahan secara amnya diagihkan pada kedua-dua belah line box. Asender, desender, cap height dan x-height berbeza mengikut fon, jadi line-height yang sama boleh menghasilkan pusat optik yang berbeza.
3. Pilih tepi pemangkasan
text-box-trim menerima none, trim-start, trim-end dan trim-both. Butang selalunya memerlukan pemangkasan pada kedua-dua belah; tajuk mungkin hanya memangkas tepi block-start untuk mengekalkan ritma dengan perenggan sebelumnya.
4. Pilih metrik fon
text-box-edge boleh memilih tepi seperti cap, ex, text, alphabetic atau leading. cap boleh bersesuaian dengan rujukan visual tajuk huruf besar, manakala text lebih dekat dengan sempadan teks fon. Uji fon dan bahasa sebenar; tiada metrik yang menjadi kebenaran sejagat untuk setiap fon.
5. Gunakan trengkas secara setempat
.button {
text-box: trim-both cap alphabetic;
padding: 0.625rem 1rem;
}Trengkas ini menyatakan pemangkasan dan tepi secara serentak. Hadkan skopnya kepada komponen yang memerlukannya supaya pemangkasan global tidak merosakkan ritma perenggan, penjajaran ikon atau kandungan berbilang baris.
6. Kendalikan arah penulisan logikal
start dan end ialah tepi paksi blok logikal dan berubah mengikut writing-mode. Ukur susun atur mendatar dan menegak dengan nilai direction yang berbeza; jangan gantikan intuisi fizikal atas/bawah untuk definisi logikal.
7. Reka bentuk peningkatan progresif
Kekalkan line-height, padding dan ketinggian minimum sedia ada secara lalai, kemudian dayakan peningkatan dalam @supports (text-box-trim: trim-both). Jika pelayar mengabaikan pengisytiharan tersebut, teks mesti kekal boleh dibaca dan butang mesti mengekalkan dimensi sentuhan dan papan kekuncinya.
8. Sahkan pemuatan fon dan kebolehcapaian
Ukur selepas fon sasaran dimuatkan, merangkumi fon sandaran, rangkaian perlahan, zum, fon sistem dan rentetan berbilang bahasa. Periksa petunjuk fokus, keratan (clipping), susunan pembaca skrin dan segi empat tepat kawasan sentuhan sebenar; pemusatan optik tidak boleh mengorbankan kebolehkendalian.
Pertukaran (Trade-off) dan sempadan
Ciri ini boleh menghapuskan margin negatif yang tidak menentu dan ofset bagi setiap fon, tetapi sokongan pelayar masih terhad dan metrik fon masih berbeza-beza. Ia tidak menggantikan line-height, padding, penjajaran flex atau ketinggian minimum yang munasabah. Berhati-hati dengan teks badan berbilang baris, fon dinamik dan kandungan sebaris (inline) yang kompleks. Untuk keselarasan reka bentuk, rekodkan fon sasaran, metrik, versi pelayar dan toleransi daripada hanya menyimpan tangkapan skrin.
Pelan pelancaran dan bukti
- Rekodkan fon komponen, saiz, bahasa, mod penulisan dan toleransi.
- Kekalkan gaya semasa sebagai garis dasar (baseline), tambah cabang feature-query, dan kunci saiz interaktif minimum.
- Uji Chrome 133 dan pelayar lain dalam matriks projek; MDN menandakan sifat ini sebagai ketersediaan terhad dan bukannya Baseline.
- Ukur ofset optik, gelang fokus, pembalutan teks dan zum dengan fon sebenar serta fon sandaran.
- Simpan tangkapan skrin, ukuran, versi pelayar dan dasar sandaran dalam rekod penerimaan komponen.
Kesilapan biasa dan soalan susulan
Kesilapan 1: Menganggap pemangkasan sebagai pemotongan glif
Ia terutamanya melaraskan tepi kotak teks; ia tidak memotong garis luar glif mengikut piksel. Rujuk semula metrik fon, line box dan model kotak elemen.
Kesilapan 2: Menetapkan trim-both secara global
Perenggan, senarai dan kandungan berbilang baris memerlukan ritma biasa. Nyatakan skop komponen dan sempadan sandaran.
Kesilapan 3: Hanya menguji fon lalai
Kegagalan pemuatan fon, pertukaran bahasa atau fon sistem akan mengubah metrik. Sertakan ujian dengan sandaran dan rangkaian perlahan.
Kesilapan 4: Mengabaikan paksi logikal
trim-start bukan sentiasa bahagian atas fizikal. Sahkan tingkah laku paksi blok dalam penulisan menegak dan nilai arah yang berbeza.
Kesilapan 5: Memeriksa visual tetapi mengabaikan operasi
Pemangkasan tidak boleh mengurangkan kawasan sentuhan, fokus papan kekunci atau kawasan yang boleh dibaca. Sediakan semakan saiz minimum, gelang fokus dan teknologi bantuan.