Pertanyaan dan konteks
Sebuah situs konten memuat judul kartu, ringkasan artikel, prosa panjang, dan catatan yang dapat diedit. Tim desain menginginkan judul pendek terlihat seimbang, prosa meminimalkan orphan, dan baris sebelum caret tetap stabil saat mengedit; tim juga membutuhkan biaya tata letak yang dapat diprediksi serta perilaku browser lama yang baik. Jelaskan bagaimana text-wrap-style berpartisipasi dalam pemilihan soft-wrap dan bagaimana Anda akan memilih, membatasi, serta memvalidasi setiap nilai.
Pertanyaan ini cocok untuk posisi frontend, design system, dan platform konten. Kuncinya adalah mengetahui bahwa properti ini mengubah pemilihan pemutusan baris (wrap), bukan peluang pemutusan yang tersedia, lebar, atau aturan bahasa.
Apa yang dievaluasi pewawancara
Jawaban yang kuat membedakan tujuan dari auto, balance, pretty, dan stable: performa default, blok pendek yang seimbang, tata letak teks panjang yang lebih lambat tetapi lebih baik, serta pengeditan yang stabil untuk contenteditable. Jawaban tersebut juga harus mencakup batas baris, text-wrap-mode: nowrap, aturan bahasa dan pemutusan, CLS, kompatibilitas, dan pengukuran.
Klarifikasi yang perlu ditanyakan terlebih dahulu
- Konten mana yang merupakan judul pendek, ringkasan, prosa panjang, atau bidang yang dapat diedit?
- Apakah prioritasnya adalah keseimbangan visual, pengurangan orphan, stabilitas pengeditan, atau biaya tata letak minimum?
- Berapa panjang konten, locale, perilaku pemuatan font, dan lebar kontainer?
- Berapa anggaran tata letak yang tersedia untuk layar pertama dan daftar gulir?
- Apakah browser lama harus tetap menggunakan pemutusan baris otomatis atau menerima peningkatan melalui skrip?
Jawaban 30 detik
"Saya akan membagi nilai berdasarkan jenis konten: gunakan balance untuk judul pendek, pertimbangkan pretty untuk prosa penting dalam anggaran performa yang terukur, gunakan stable untuk area yang dapat diedit, dan pertahankan auto di tempat lain. Nilai-nilai ini hanya memilih peluang soft-wrap yang sudah ada, sehingga lebar, pemutusan baris, dan aturan bahasa tetap penting. Saya akan mengirimkan auto sebagai fallback yang aman, kemudian mengukur konten multibahasa riil, biaya rendering daftar, CLS, dan perilaku pengeditan daripada hanya menilai tangkapan layar."
Solusi langkah demi langkah
Langkah 1: Tentukan apa yang berubah
text-wrap-style memberi tahu browser cara memilih di antara peluang soft-wrap yang ada. Properti ini tidak membuat nowrap terputus, dan tidak menggantikan overflow-wrap, hyphens, atau penentuan ukuran kontainer.
Langkah 2: Gunakan balance untuk judul pendek
balance mencoba meratakan teks di sejumlah baris yang terbatas, yang cocok untuk judul, takarir (caption), dan ringkasan pendek. Browser membatasi jumlah baris yang terpengaruh, sehingga prosa panjang tidak boleh mengasumsikan adanya pengoptimalan global.
.card-title {
text-wrap-style: balance;
max-inline-size: 32rem;
}Langkah 3: Gunakan pretty secara selektif
pretty mengutamakan komposisi keseluruhan yang lebih baik dan lebih sedikit orphan, tetapi memakan biaya komputasi lebih tinggi daripada auto. Batasi penggunaannya pada prosa artikel atau teks pemasaran penting, lalu ukur teks panjang, perubahan font, dan perangkat kelas bawah daripada mengaktifkannya di seluruh situs.
Langkah 4: Gunakan stable untuk pengeditan
stable ditargetkan untuk pengalaman pengeditan seperti contenteditable, menjaga baris sebelum caret sestabil mungkin saat pengguna mengetik. Ini bukan riwayat versi, undo stack, atau resolusi konflik kolaboratif.
Langkah 5: Tangani text-wrap-mode dan pemutusan baris
Ketika text-wrap-mode bernilai nowrap, text-wrap-style tidak berpengaruh. URL panjang, bahasa Mandarin, kata majemuk Jerman, dan skrip campuran juga diatur oleh overflow-wrap, word-break, hyphens, dan metadata bahasa; rancang semuanya secara bersamaan.
Langkah 6: Tetapkan batasan tata letak dan performa
Perubahan pemutusan baris dapat mengubah tinggi blok, kisi kartu, dan tata letak layar pertama. Untuk daftar virtual, hasil pencarian, dan halaman yang di-render di server, catat layout shift, biaya penghitungan gaya, dan re-layout setelah font dimuat; tangkapan layar pengembangan dengan lebar tetap saja tidak cukup.
Langkah 7: Rencanakan kompatibilitas dan progressive enhancement
Browser tanpa dukungan untuk suatu nilai umumnya mengabaikan deklarasi tersebut dan mempertahankan pemutusan default mereka. Jadikan auto sebagai perilaku dasar dan terapkan peningkatan setelah deteksi dukungan atau pemilih (selector). Jangan membuat skrip pengukuran per karakter untuk meniru setiap algoritma kecuali target browser dan manfaat produk sebanding dengan kompleksitas serta risiko aksesibilitasnya.
Langkah 8: Buat uji penerimaan multibahasa
Uji bahasa Mandarin, Inggris, kata-kata panjang bahasa Jerman, bahasa Arab RTL, bahasa Jepang, emoji, font dinamis, zoom, pengeditan, salin/tempel, dan pembaruan konten. Bandingkan first paint, pengguliran daftar, fokus, tinggi judul, jumlah orphan, dan fallback browser lama agar pemolesan visual tidak mengurangi keterbacaan.
Kompromi dan batasan
balance cocok untuk blok pendek, pretty memprioritaskan komposisi dengan biaya lebih tinggi, dan stable menangani stabilitas baris saat mengedit; auto adalah baseline umum yang dapat diprediksi. Tidak ada satupun yang mengubah semantik, konten, atau rangkaian peluang soft-wrap.
Nilai tipografi harus dinilai bersama kontainer, font, locale, pemutusan, dan aturan responsif. Penerapan lokal lebih mudah dianggarkan daripada aturan global pada daftar berfrekuensi tinggi atau editor langsung.
Rencana peluncuran dan bukti
Lakukan uji coba (pilot) pada satu judul kartu, badan artikel, dan editor catatan. Catat distribusi panjang konten, jumlah baris, font, dan anggaran performa. Pertahankan auto dalam gaya dasar, lalu aktifkan balance, pretty, atau stable untuk jenis konten yang cocok.
Dokumentasikan alasan, matriks dukungan, batasan teks panjang, aturan bahasa, dan metrik. Gunakan konten nyata untuk regresi visual, performa, keyboard, dan pengeditan, serta simpan bukti bahwa perilaku dasar tetap dapat digunakan saat peningkatan dinonaktifkan.
Kesalahan umum dan tindak lanjut
Memperlakukan balance sebagai optimasi global untuk panjang berapa pun
Browser membatasi baris yang diseimbangkan, sehingga prosa panjang tidak boleh mengasumsikan setiap baris diratakan. Batasi penggunaannya pada judul dan ringkasan pendek.
Menerapkan pretty di seluruh situs
Mengurangi orphan dapat meningkatkan beban kerja tata letak. Uji coba pada prosa penting dan gunakan data teks panjang serta perangkat kelas bawah untuk menetapkan batasannya.
Menggunakan stable untuk menyelesaikan semua masalah editor
stable hanya memengaruhi stabilitas pemutusan baris. Properti ini tidak menyediakan fungsionalitas undo, kolaborasi, atau semantik caret; editor tetap membutuhkan manajemen status dan desain aksesibilitasnya sendiri.
Mengabaikan aturan nowrap dan locale
nowrap membuat properti ini tidak efektif, sementara aturan pemutusan dan metadata bahasa menentukan peluang yang tersedia. Uji CSS dan locale secara bersamaan.
Bagaimana jika judul masih sulit dibaca?
Periksa lebar kontainer, pemuatan font, batas baris, locale, dan titik pemutusan yang tersedia sebelum mengubah balance, aturan pemutusan, ukuran font, atau teks; terus-menerus mengganti nilai wrap bukanlah cara diagnosis yang tepat.