Untuk mendiagnosis jarak tidak sekata dalam teks pelayar yang diratakan pada Mac, mula-mula tukar perenggan kepada penjajaran mula. Kemudian uji peraturan jarak, pemisah baris, lebar lajur dan pemuatan fon satu demi satu. Urutan ini membantu mengenal pasti perubahan yang benar-benar memperbaik perenggan.

Panduan ini ditujukan kepada seseorang yang memeriksa halaman pelayar biasa, seperti katalog abstrak dengan lajur penerangan yang sempit. Tugasnya ialah menjelaskan jurang perkataan yang luar biasa lebar dan memilih pembetulan yang praktikal. Semua label dan dimensi contoh di bawah ialah rekaan.

Perkara yang boleh diberitahu oleh jarak tidak sekata

Penjajaran rata mengagihkan ruang yang tersedia dalam sesuatu baris untuk memenuhi kotak barisnya. Baris yang berbeza mengandungi perkataan yang berbeza dan peluang pengembangan yang berbeza, jadi jurangnya tidak semestinya sama. W3C juga memberikan kelonggaran kepada pelayar dalam algoritma penjajarannya; CSS yang sama tidak menetapkan jarak yang serupa dalam setiap pelayar. CSS Text Module Level 3

Asingkan dua pemerhatian sebelum membuat sebarang perubahan. Jika kebanyakan jurang pada satu baris lebih lebar daripada jurang pada baris seterusnya, teliti lebar yang tersedia untuk baris itu dan pilihan pembalutan teks. Jika satu jurang tertentu kelihatan luar biasa, periksa juga teks dan gaya di sekitar sempadan tersebut. Ini ialah titik permulaan diagnosis, bukannya bukti tentang punca tertentu.

Pengiraan ringkas menjelaskan sebab baris yang jarang perlu diberi perhatian. Katakan lebar tersedia bagi satu baris ialah 480 piksel CSS dan kandungannya menggunakan 420 piksel sebelum penjajaran rata. Dalam model ilustrasi yang mengagihkan baki 60 piksel secara sama rata pada enam ruang yang layak, setiap ruang bertambah 10 piksel. Jika hanya terdapat tiga ruang yang layak dengan baki lebar yang sama, setiap ruang bertambah 20 piksel. Ini ialah contoh pengiraan, bukannya ukuran pelayar atau formula pemaparan sejagat.

Implikasi praktikalnya ialah periksa perkataan yang berada pada baris itu sebelum cuba melaraskan jurang itu sendiri. Baris yang mempunyai sedikit peluang pengembangan boleh mendedahkan masalah pembalutan teks yang tidak akan diselesaikan oleh pelarasan jarak global.

Mulakan dengan satu perbandingan terkawal pada Mac anda

Pilih satu perenggan yang terjejas dan catat versi pelayar, zum halaman, anggaran lebar lajur dan teks yang tepat. Kekalkan keadaan tersebut semasa membandingkan perubahan. Untuk perenggan ujian neutral, gunakan: “Panel kuning ambar mengandungi jubin bulat. Panel perak mengandungi jubin segi empat sama. Setiap panel mempunyai label ringkas dan penerangan biasa.”

Dalam Chrome, klik kanan perenggan sambil menekan Control dan pilih Inspect. Sebagai alternatif, buka alat pembangun dengan Command–Option–I, kemudian pilih elemen yang berkaitan. Alat pembangun pelayar membolehkan anda memeriksa dokumen semasa serta melihat pratonton perubahan HTML dan CSS secara setempat. Apakah alat pembangun pelayar?

Pilih blok yang mengandungi perenggan itu, bukannya sekadar perkataan di dalam elemen sebaris. Dalam panel Elements Chrome, periksa kedua-dua Styles dan Computed. Yang pertama merangkumi pengisytiharan yang terpakai, termasuk yang ditindih; yang kedua membantu mengenal pasti nilai yang benar-benar digunakan. Gunakan penapis sifat untuk mencari setiap tetapan. Rujukan ciri CSS

Catat text-align, text-align-last, word-spacing, letter-spacing, white-space, hyphens, font-family dan font-size. Catat juga lebar kandungan perenggan itu. Ini menghasilkan rekod perbandingan ringkas: keadaan asal, satu perubahan, hasil yang diperhatikan.

Tetapkan sementara text-align: start dan text-align-last: start pada perenggan itu. Jika jurang lebar itu hilang, penjajaran rata menyumbang kepada gejala tersebut. Jika jurang masih ada, teruskan dengan pemeriksaan jarak eksplisit dan ruang putih. Pulihkan penjajaran asal sebelum ujian berasingan yang seterusnya. DevTools menyokong togol pengisytiharan dan penyuntingan nilai untuk pratonton langsung. Apakah alat pembangun pelayar?

Periksa jarak eksplisit dan ruang putih yang dikekalkan

Dengan penjajaran mula diaktifkan, uji word-spacing: normal. MDN mentakrifkannya sebagai jarak biasa yang ditentukan oleh fon atau pelayar; nilai panjang menambah jarak pada jarak perkataan intrinsik fon. Oleh itu, nilai positif yang diwarisi mungkin relevan walaupun sebelum penjajaran rata digunakan. Sifat CSS word-spacing

Periksa induk dan mana-mana anak sebaris yang bergaya jika hanya sebahagian daripada perenggan berubah. Uji letter-spacing yang sedia ada secara berasingan, dan bukannya menetapkan semula semua sifat tipografi serentak. Jika dua tetapan berubah sekali gus, hasil yang bertambah baik tidak menunjukkan tetapan yang mana satu memberi kesan.

Seterusnya, periksa white-space. Dengan normal, jujukan ruang putih biasa diruntuhkan dan teks dibalut apabila perlu. Dengan pre-wrap, jujukan ruang putih dan baris baharu dalam sumber dikekalkan, sementara pembalutan masih dibenarkan. Dengan pre-line, ruang diruntuhkan tetapi baris baharu dalam sumber tetap menghasilkan pemisah. Perbezaan ini boleh mengubah perkara yang kelihatan seperti kecacatan jarak. Sifat CSS white-space

Untuk penerangan aliran biasa, uji sementara white-space: normal. Jika hasilnya bertambah baik, periksa teks asal dan peraturan ruang putih sebelum memilih suntingan kekal. Kekalkan pemformatan yang bermakna: contoh yang dipraformat dan penerangan prosa mempunyai keperluan yang berbeza. Ujian ini mengenal pasti input kepada susun atur; ujian ini tidak membuktikan bahawa semua ruang putih yang dikekalkan patut dibuang.

Teliti baris pendek, pemisah paksa dan lebar lajur

Adakah baris terakhir diregangkan?

Periksa text-align-last apabila baris penutup yang pendek mempunyai jurang luar biasa besar. Sifat ini mengawal kedua-dua baris terakhir dalam blok dan baris tepat sebelum pemisah paksa. Dengan text-align: justify, tingkah laku lalai auto menjajarkan baris tersebut ke mula; nilai justify yang ditetapkan secara eksplisit akan meregangkannya. Uji text-align-last: start untuk mengasingkan keadaan ini. Sifat CSS text-align-last

Cari elemen br pada pemisah yang terjejas. WHATWG mentakrifkannya sebagai pemisah baris kandungan dan menyatakan bahawa elemen itu patut digunakan apabila pemisah tersebut merupakan sebahagian daripada kandungan. Untuk penerangan aliran biasa, semak pemisah yang dimasukkan semata-mata untuk meniru satu susun atur desktop; biarkan pembalutan menentukan penghujung baris jika itulah tingkah laku yang dikehendaki. HTML Standard: Elemen br

Adakah masalah ini berlaku pada lajur yang sempit?

Pulihkan penjajaran rata dan ubah lebar yang tersedia untuk perenggan sahaja. Cuba lajur yang sedikit lebih lebar, kemudian yang lebih sempit, sambil mengekalkan teks dan fon. Catat perkataan yang berpindah antara baris dan sama ada jurang yang ketara turut berpindah bersamanya.

Anggap ini sebagai ujian membuat keputusan. Jika lajur yang lebih lebar menghasilkan penghujung baris yang lebih memuaskan, laraskan susun atur apabila ruang mengizinkan. Jika penerangan perlu kekal sempit dan beberapa baris masih kelihatan jarang, penjajaran mula ialah pilihan praktikal. Elakkan memilih lebar semata-mata kerana satu contoh perenggan kebetulan muat dengan kemas.

Bolehkah pemenggalan perkataan menyediakan peluang pemisahan yang berguna?

Untuk prosa bahasa Inggeris, uji hyphens: auto selepas mengesahkan bahawa perenggan itu sendiri atau leluhurnya mempunyai nilai lang yang betul, seperti en. Pemenggalan automatik bergantung pada penandaan bahasa dan ketersediaan kamus yang sesuai. Ketiadaan tanda sempang yang kelihatan sahaja tidak membuktikan bahawa pengisytiharan CSS gagal. Sifat CSS hyphens

Gunakan perkataan biasa dalam ujian ini dan bukannya pengecam rekaan yang tidak boleh dipisahkan. Periksa seluruh perenggan selepas itu: hasil yang berguna ialah penghujung baris yang lebih baik, bukannya kemunculan tanda sempang semata-mata. Jika pemenggalan automatik tidak memperbaik hasil pelayar sasaran, kekalkan penyelesaian lebar atau penjajaran yang berkesan.

Asingkan perubahan fon daripada penjajaran rata pelayar

Jika penghujung baris berubah selepas halaman mula-mula dipaparkan, teliti pemuatan fon sebelum membandingkan tangkapan skrin. API CSS Font Loading menyediakan document.fonts.ready, iaitu promise yang selesai selepas pemuatan fon dan susun atur yang berkaitan selesai. Ia menyediakan titik penyegerakan yang berguna untuk pengukuran, walaupun perubahan halaman kemudian mungkin memerlukan perbandingan lain. API CSS Font Loading

Untuk ujian visual, bandingkan perenggan asal dengan tetapan sementara font-family: system-ui sambil mengekalkan lebar dan saiz fon. Anggap sebarang penambahbaikan sebagai bukti bahawa pilihan fon mempengaruhi susun atur ini, bukannya bukti bahawa fon asal bermasalah. Dalam Firefox atau Safari, paparan Fonts pada pemeriksa boleh membantu meneliti fon yang digunakan pada elemen terpilih. Apakah alat pembangun pelayar?

Pastikan sempadan pembentukan teks jelas. HarfBuzz membentuk rentetan teks yang berkongsi sifat menjadi glif yang diletakkan. Dokumentasinya secara jelas mengecualikan pemisahan baris perenggan, pemenggalan perkataan dan penjajaran rata. Oleh itu, menukar tetapan HarfBuzz bukanlah penyelesaian umum CSS pelayar bagi jurang perkataan yang diregangkan. Perkara yang tidak dilakukan HarfBuzz

Atas sebab yang sama, jangan bina susun atur gantian dengan mengukur dan meletakkan setiap aksara secara berasingan. Pendekatan itu merangkumi kerja pembentukan teks dan susun atur perenggan. Untuk teks DOM biasa, teruskan mendiagnosis input susun atur pelayar dan kekalkan saluran pemaparan teksnya.

Pilih pembetulan yang disokong oleh ujian anda

Gunakan jadual ini untuk menukar pemerhatian kepada tindakan seterusnya yang terarah. Setiap baris ialah inferens diagnostik; sahkannya dengan memulihkan keadaan asal dan mengulangi perubahan yang berjaya.

Pemerhatian Perkara yang perlu disiasat seterusnya Pembetulan yang boleh dicuba
Jurang kekal dengan penjajaran mula Jarak eksplisit dan ruang putih yang dikekalkan Betulkan pengisytiharan yang berkaitan atau pemformatan teks yang tidak disengajakan
Hanya baris penutup diregangkan Penjajaran baris terakhir dan pemisah paksa Gunakan penjajaran mula untuk baris tersebut; semak pemisah yang hanya untuk persembahan
Jurang berpindah apabila perkataan dibalut semula Lebar lajur dan peluang pemisahan yang tersedia Laraskan lebar, uji pemenggalan perkataan atau gunakan penjajaran mula
Susun atur berubah semasa pemuatan Pemuatan fon dan fon yang digunakan Buat perbandingan selepas fon selesai dimuatkan dan selesaikan perbezaan berkaitan fon
Perubahan kaedah penjajaran tidak memberi kesan Sokongan pelayar dan pengisytiharan yang digunakan Gunakan kawalan penjajaran dan susun atur yang disokong

Jangan bergantung pada text-justify: inter-word sebagai penyelesaian sejagat. MDN kini menandakan text-justify sebagai mempunyai ketersediaan terhad. Jika disokong, inter-word memilih pengembangan pada sempadan perkataan, manakala auto membolehkan pelayar memilih kaedahnya. Memilih sempadan perkataan tidak menjamin jurang yang kecil pada baris yang jarang. Sifat CSS text-justify

Jika sifat itu tidak disokong, gunakan kaedah yang disokong dan dibuktikan oleh perbandingan anda: ubah penjajaran, luaskan lebar baris yang tersedia, betulkan ruang putih yang tidak disengajakan atau uji pemenggalan perkataan yang peka terhadap bahasa. Semak semula pilihan akhir dalam setiap pelayar sasaran pada lebar kandungan yang setanding. Perbezaan antara pelayar semata-mata tidak membuktikan wujudnya kecacatan, kerana CSS tidak menetapkan satu algoritma penjajaran yang lengkap. CSS Text Module Level 3

Selesaikan apabila anda boleh menjelaskan gejala itu melalui perbandingan yang boleh diulang: perenggan asal menghasilkan jurang tersebut, satu perubahan yang dikenal pasti memperbaikinya, dan hasilnya kekal berguna pada lebar yang anda perlukan. Kekalkan pembetulan berkesan yang paling ringkas dalam sumber halaman jika anda menyelenggarakannya; jika anda hanya memeriksa halaman awam, simpan nilai yang diperhatikan dan langkah untuk menghasilkan semula gejala sebagai hasil kerja anda.

Sumber