Untuk mendiagnosis jarak yang tidak merata pada teks rata kiri-kanan di browser pada Mac, pertama-tama ubah perataan paragraf menjadi rata awal. Kemudian uji aturan jarak, pemenggalan baris, lebar kolom, dan pemuatan font satu per satu. Urutan ini membantu mengidentifikasi perubahan mana yang benar-benar memperbaiki paragraf.

Panduan ini ditujukan bagi seseorang yang memeriksa halaman browser biasa, seperti katalog abstrak dengan kolom deskripsi yang sempit. Tugasnya adalah menjelaskan celah antarkata yang sangat lebar dan memilih perbaikan yang praktis. Semua label dan ukuran contoh di bawah ini bersifat sintetis.

Hal yang dapat diungkapkan oleh jarak yang tidak merata

Perataan rata kiri-kanan membagikan ruang yang tersedia di dalam baris untuk memenuhi kotak barisnya. Baris yang berbeda memuat kata-kata yang berbeda dan peluang pelebaran yang berbeda, sehingga jaraknya tidak harus sama. W3C juga memberi keleluasaan kepada browser dalam algoritme perataannya; CSS yang identik tidak menentukan jarak yang identik di setiap browser. CSS Text Module Level 3

Pisahkan dua pengamatan sebelum mengubah apa pun. Jika sebagian besar celah pada satu baris lebih lebar daripada celah pada baris berikutnya, periksa lebar yang tersedia untuk baris itu dan pilihan pemenggalan barisnya. Jika satu celah tertentu tampak sangat lebar, periksa juga teks dan gaya di sekitar batas tersebut. Ini adalah titik awal diagnosis, bukan bukti penyebab tertentu.

Perhitungan sederhana menjelaskan mengapa baris yang jarang perlu diperhatikan. Misalkan sebuah baris memiliki lebar tersedia 480 piksel CSS dan kontennya menempati 420 piksel sebelum perataan rata kiri-kanan. Dalam model ilustratif yang membagikan sisa 60 piksel secara merata ke enam spasi yang dapat dilebarkan, masing-masing bertambah 10 piksel. Jika hanya ada tiga spasi yang dapat dilebarkan dengan sisa lebar yang sama, masing-masing bertambah 20 piksel. Ini adalah contoh hasil perhitungan, bukan pengukuran browser atau rumus rendering universal.

Implikasi praktisnya adalah memeriksa kata-kata yang masuk ke baris tersebut sebelum mencoba mengatur celahnya. Baris dengan sedikit peluang pelebaran dapat menyingkap masalah pemenggalan baris yang tidak akan teratasi dengan penyesuaian jarak secara global.

Mulai dengan satu perbandingan terkontrol di Mac Anda

Pilih satu paragraf yang terdampak dan catat versi browser, zoom halaman, perkiraan lebar kolom, serta teks persisnya. Pertahankan kondisi tersebut saat membandingkan perubahan. Untuk paragraf uji yang netral, gunakan: “Panel amber berisi ubin bundar. Panel perak berisi ubin persegi. Setiap panel menyertakan label singkat dan deskripsi sederhana.”

Di Chrome, klik paragraf dengan menekan Control lalu pilih Inspect. Sebagai alternatif, buka alat developer dengan Command–Option–I, lalu pilih elemen yang sesuai. Alat developer browser memungkinkan Anda memeriksa dokumen saat ini dan melihat pratinjau perubahan HTML dan CSS secara lokal. Apa itu alat developer browser?

Pilih blok pembungkus paragraf, bukan hanya sebuah kata di dalam elemen inline. Di panel Elements Chrome, periksa Styles dan Computed. Bagian pertama mencakup deklarasi yang berlaku, termasuk yang ditimpa; bagian kedua membantu mengidentifikasi nilai yang benar-benar diterapkan. Gunakan filter properti untuk menemukan setiap pengaturan. Referensi fitur CSS

Catat text-align, text-align-last, word-spacing, letter-spacing, white-space, hyphens, font-family, dan font-size. Catat juga lebar konten paragraf. Dengan begitu, Anda memiliki catatan perbandingan singkat: kondisi awal, satu perubahan, hasil yang diamati.

Atur sementara text-align: start dan text-align-last: start pada paragraf. Jika celah lebar menghilang, perataan rata kiri-kanan berkontribusi pada gejala tersebut. Jika celah tetap ada, lanjutkan dengan memeriksa jarak eksplisit dan spasi putih. Pulihkan perataan semula sebelum melakukan pengujian terpisah berikutnya. DevTools mendukung pengaktifan dan penonaktifan deklarasi serta pengeditan nilai untuk melihat pratinjau langsung. Apa itu alat developer browser?

Periksa jarak eksplisit dan spasi putih yang dipertahankan

Dengan perataan awal aktif, uji word-spacing: normal. MDN mendefinisikannya sebagai jarak normal yang ditentukan oleh font atau browser; nilai panjang menambahkan jarak pada jarak kata bawaan font. Karena itu, nilai positif yang diwariskan dapat berpengaruh bahkan sebelum perataan rata kiri-kanan diterapkan. Properti CSS word-spacing

Periksa elemen induk dan setiap anak inline bergaya jika hanya sebagian paragraf yang berubah. Uji letter-spacing yang sudah ada secara terpisah, alih-alih mengatur ulang semua properti tipografi sekaligus. Jika dua pengaturan diubah bersamaan, hasil yang membaik tidak menunjukkan pengaturan mana yang berpengaruh.

Selanjutnya, periksa white-space. Dengan normal, rangkaian spasi putih biasa dirapatkan dan teks membungkus sesuai kebutuhan. Dengan pre-wrap, rangkaian spasi putih dan baris baru dalam sumber dipertahankan, sementara teks tetap dapat membungkus. Dengan pre-line, spasi dirapatkan tetapi baris baru dalam sumber tetap menghasilkan pemenggalan. Perbedaan ini dapat mengubah tampilan yang seolah-olah merupakan cacat jarak. Properti CSS white-space

Untuk deskripsi biasa yang mengalir, uji sementara white-space: normal. Jika hasilnya membaik, periksa teks asli dan aturan spasi putih sebelum memilih perubahan permanen. Pertahankan pemformatan yang bermakna: contoh yang sudah diformat sebelumnya dan deskripsi prosa memiliki kebutuhan berbeda. Pengujian ini mengidentifikasi masukan tata letak; hasilnya tidak membuktikan bahwa semua spasi putih yang dipertahankan harus dihapus.

Periksa baris pendek, pemenggalan paksa, dan lebar kolom

Apakah baris terakhir direnggangkan?

Periksa text-align-last ketika baris penutup yang pendek memiliki celah sangat lebar. Properti ini mengatur baris terakhir sebuah blok serta baris yang tepat sebelum pemenggalan paksa. Dengan text-align: justify, perilaku bawaan auto meratakan baris-baris tersebut ke awal; nilai eksplisit justify akan merenggangkannya. Uji text-align-last: start untuk mengisolasi kondisi ini. Properti CSS text-align-last

Cari elemen br pada bagian yang terdampak. WHATWG mendefinisikannya sebagai pemenggalan baris konten dan menyatakan bahwa elemen itu seharusnya digunakan ketika pemenggalan tersebut memang bagian dari konten. Untuk deskripsi biasa yang mengalir, tinjau pemenggalan yang disisipkan hanya untuk meniru satu tata letak desktop; biarkan pembungkusan menentukan akhir baris jika itu perilaku yang diinginkan. Standar HTML: Elemen br

Apakah masalahnya mengikuti kolom yang sempit?

Pulihkan perataan rata kiri-kanan dan ubah hanya lebar yang tersedia bagi paragraf. Coba kolom yang sedikit lebih lebar, lalu yang lebih sempit, dengan teks dan font tetap sama. Catat kata-kata mana yang berpindah baris dan apakah celah yang mencolok ikut berpindah.

Gunakan ini sebagai uji pengambilan keputusan. Jika kolom yang lebih lebar menghasilkan akhir baris yang lebih memuaskan, sesuaikan tata letak jika ruang memungkinkan. Jika deskripsi harus tetap sempit dan beberapa baris masih terlihat jarang, perataan awal merupakan alternatif yang praktis. Hindari memilih lebar hanya karena satu paragraf contoh kebetulan pas dengan rapi.

Apakah pemenggalan kata akan memberikan peluang pemenggalan yang berguna?

Untuk prosa bahasa Inggris, uji hyphens: auto setelah memastikan bahwa paragraf memiliki nilai lang yang benar, seperti en, pada dirinya sendiri atau elemen leluhurnya. Pemenggalan otomatis bergantung pada penandaan bahasa dan ketersediaan kamus yang sesuai. Tidak terlihatnya tanda hubung saja tidak membuktikan bahwa deklarasi CSS gagal. Properti CSS hyphens

Gunakan kata-kata biasa dalam pengujian ini, bukan pengenal rekaan tanpa pemenggalan. Periksa seluruh paragraf setelahnya: hasil yang diinginkan adalah kumpulan akhir baris yang lebih baik, bukan sekadar munculnya tanda hubung. Jika pemenggalan otomatis tidak memperbaiki hasil di browser sasaran, pertahankan solusi lebar atau perataan yang berhasil.

Pisahkan perubahan font dari perataan browser

Jika akhir baris berubah setelah halaman pertama kali muncul, periksa pemuatan font sebelum membandingkan tangkapan layar. CSS Font Loading API menyediakan document.fonts.ready, sebuah promise yang terpenuhi setelah pemuatan font dan tata letak terkait selesai. Ini memberikan titik sinkronisasi yang berguna untuk pengukuran, meskipun perubahan halaman berikutnya mungkin tetap memerlukan perbandingan ulang. CSS Font Loading API

Untuk pengujian visual, bandingkan paragraf asli dengan pengaturan sementara font-family: system-ui, sambil mempertahankan lebar dan ukuran font. Anggap perbaikan apa pun sebagai bukti bahwa pilihan font memengaruhi tata letak ini, bukan bukti bahwa font asli bermasalah. Di Firefox atau Safari, tampilan Fonts pada inspektor dapat membantu memeriksa font yang diterapkan pada elemen terpilih. Apa itu alat developer browser?

Jaga agar batas pembentukan teks tetap jelas. HarfBuzz membentuk rangkaian teks dengan properti yang sama menjadi glif yang diposisikan. Dokumentasinya secara eksplisit mengecualikan pemenggalan baris paragraf, pemenggalan kata, dan perataan rata kiri-kanan. Karena itu, mengubah pengaturan HarfBuzz bukan solusi umum CSS browser untuk celah kata yang direnggangkan. Hal yang tidak dilakukan HarfBuzz

Atas alasan yang sama, jangan membuat tata letak pengganti dengan mengukur dan memosisikan setiap karakter secara terpisah. Pendekatan itu memasuki ranah pembentukan teks dan tata letak paragraf. Untuk teks DOM biasa, lanjutkan mendiagnosis masukan tata letak browser dan pertahankan alur rendering teksnya.

Pilih perbaikan yang didukung oleh pengujian Anda

Gunakan tabel ini untuk mengubah pengamatan menjadi tindakan lanjutan yang terarah. Setiap baris adalah kesimpulan diagnostik; konfirmasikan dengan memulihkan kondisi awal dan mengulangi perubahan yang berhasil.

Pengamatan Hal yang perlu diperiksa selanjutnya Perbaikan yang mungkin
Celah tetap ada saat perataan awal diterapkan Jarak eksplisit dan spasi putih yang dipertahankan Perbaiki deklarasi terkait atau pemformatan teks yang tidak disengaja
Hanya baris penutup yang merenggang Perataan baris terakhir dan pemenggalan paksa Gunakan perataan awal untuk baris tersebut; tinjau pemenggalan yang hanya untuk tampilan
Celah berpindah saat kata-kata membungkus ulang Lebar kolom dan peluang pemenggalan yang tersedia Sesuaikan lebar, uji pemenggalan kata, atau gunakan perataan awal
Tata letak berubah selama pemuatan Pemuatan font dan font yang diterapkan Bandingkan setelah font selesai dimuat dan atasi perbedaan terkait font
Perubahan metode perataan tidak berpengaruh Dukungan browser dan deklarasi yang diterapkan Gunakan kontrol perataan dan tata letak yang didukung

Jangan mengandalkan text-justify: inter-word sebagai perbaikan universal. MDN saat ini menandai text-justify sebagai fitur dengan ketersediaan terbatas. Jika didukung, inter-word memilih pelebaran pada batas kata, sedangkan auto membiarkan browser memilih metodenya. Memilih batas kata tidak menjamin celah kecil pada baris yang jarang. Properti CSS text-justify

Jika properti tersebut tidak didukung, gunakan solusi yang didukung dan ditunjukkan oleh perbandingan Anda: ubah perataan, tingkatkan lebar baris yang tersedia, perbaiki spasi putih yang tidak disengaja, atau uji pemenggalan kata yang peka terhadap bahasa. Periksa kembali pilihan akhir di setiap browser sasaran dengan lebar konten yang sebanding. Perbedaan antarbrowser saja tidak membuktikan adanya cacat, karena CSS tidak menetapkan satu algoritme perataan lengkap. CSS Text Module Level 3

Selesaikan pemeriksaan ketika Anda dapat menjelaskan gejalanya melalui perbandingan yang dapat diulang: paragraf awal menghasilkan celah tersebut, satu perubahan yang teridentifikasi memperbaikinya, dan hasilnya tetap berguna pada rentang lebar yang Anda perlukan. Jika Anda mengelola halaman, pertahankan perbaikan efektif yang paling kecil itu di sumber halaman; jika Anda hanya memeriksa halaman publik, jadikan nilai yang diamati dan langkah reproduksi sebagai hasil pekerjaan Anda.

Sumber