Untuk mempertahankan tanda baca berjarak tetap bersama kata sebelumnya di halaman web, ganti spasi biasa dengan spasi tak terpisahkan, atau bungkus keduanya dalam span CSS no-wrap kecil. Di Mac Anda, gunakan pengujian HTML lokal untuk memeriksa hasilnya pada lebar yang berbeda.

Panduan ini ditujukan bagi seseorang yang mengedit teks atau HTML halaman di Mac—misalnya, label ubin abstrak seperti Beta : di kartu sempit. Tugasnya adalah mempertahankan jarak yang terlihat sekaligus mencegah titik dua berpindah sendiri ke baris berikutnya. Contoh-contohnya sengaja mempertahankan jarak tersebut.

Perbaikan mana yang sebaiknya dipilih?

Mulailah dengan menentukan apakah aturan jarak tersebut berlaku pada teks itu sendiri atau pada penyajian halaman. Unicode menetapkan U+00A0 NO-BREAK SPACE sebagai padanan tak terpisahkan dari spasi biasa, dan U+202F NARROW NO-BREAK SPACE sebagai variannya yang lebih sempit. Keduanya memberi Anda dua pilihan jarak tampak yang berbeda. Unicode Standard, Chapter 6

Situasi pengeditan Anda Saran awal Hal yang perlu diperiksa
Anda dapat mengubah teks dan menginginkan jarak dengan lebar normal Ganti spasi biasa dengan U+00A0 Teks yang disimpan masih memuat karakter tak terpisahkan tersebut
Anda memang menginginkan jarak yang lebih sempit Gunakan U+202F Hasilnya tampak sesuai dengan font yang sebenarnya digunakan halaman
Anda ingin mempertahankan spasi biasa dalam teks Terapkan white-space: nowrap pada span yang memuat seluruh pasangan Span tersebut mencakup kata, spasi, dan tanda baca
Anda hanya dapat melihat halaman Lakukan perbaikan di sumber yang dapat diedit atau minta pengelolanya Eksperimen lokal tidak mengubah halaman aslinya

Untuk kode sumber HTML, tulis Beta :. Tabel referensi karakter WHATWG memetakan   ke U+00A0. Ganti spasi yang ada; jangan sisakan spasi biasa sebelum referensi tersebut. HTML Standard: Named character references

Untuk aturan penyajian, letakkan Beta : di dalam span sebaris dan terapkan white-space: nowrap pada span tersebut. Biarkan paragraf di sekitarnya tetap membungkus secara normal. MDN mendokumentasikan white-space sebagai properti yang mengatur penanganan spasi putih dan pembungkusan. MDN: white-space

Keputusan praktisnya bergantung pada seberapa banyak teks yang harus tetap menyatu. Untuk contoh ini, lindungi hanya Beta :. Melindungi Tile Alpha Beta : Next tile akan membatasi seluruh label secara tidak perlu. Mulailah dengan unit terkecil yang menyatakan hubungan yang dimaksud.

Cara membuat pengujian lokal dengan TextEdit

Buat file pengujian terpisah sebelum mengubah halaman yang sudah ada. Apple menjelaskan cara menggunakan TextEdit dalam mode teks biasa untuk membuat file HTML, menyimpannya dengan ekstensi .html, dan memilih Use .html saat diminta. Work with HTML documents in TextEdit on Mac

  1. Buka TextEdit dan pilih File > New.
  2. Pilih Format > Make Plain Text.
  3. Tempelkan contoh lengkap di bawah ini.
  4. Pilih File > Save dan beri nama file punctuation-test.html.
  5. Jika diminta, pilih Use .html.
  6. Di Safari, gunakan File > Open File untuk membuka file yang disimpan.

Ini adalah dokumen HTML mandiri yang lengkap. Dokumen ini tidak memerlukan pustaka, instalasi, atau koneksi jaringan. Ketiga kartu menggunakan teks sintetis yang sama, dengan perlakuan berbeda pada spasi sebelum titik dua di setiap kartu.

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>Punctuation wrap test</title>
<style>
  body {
    font: 20px/1.5 system-ui, sans-serif;
    margin: 2rem;
  }
  .card {
    width: 14ch;
    max-width: 100%;
    border: 1px solid #888;
    padding: 1rem;
    margin-block: 1rem;
  }
  .pair {
    white-space: nowrap;
  }
</style>
<h1>Punctuation wrap test</h1>
<h2>Ordinary space</h2>
<p class="card">Tile Alpha Beta : Next tile</p>
<h2>Nonbreaking space</h2>
<p class="card">Tile Alpha Beta&nbsp;: Next tile</p>
<h2>Local no-wrap rule</h2>
<p class="card">Tile Alpha <span class="pair">Beta :</span> Next tile</p>
</html>

Konversi referensi karakter pada contoh diperiksa dengan parser: &nbsp; menjadi U+00A0. Perenderan browser tidak dijalankan saat penyiapan. Gunakan perbandingan berikut untuk memeriksa tata letak di browser Mac Anda.

Bandingkan batasnya, bukan satu tangkapan layar

Lebar ilustratif 14ch adalah titik awal, bukan titik henti yang dijamin. Ubah menjadi 10ch, simpan, muat ulang, lalu coba 18ch. Cari lebar saat kartu dengan spasi biasa memisahkan titik dua dari Beta. Pada dua versi yang dilindungi, hasil yang diinginkan adalah Beta dan titik dua tetap bersama sementara kata lain dapat berpindah.

Jika ketiga kartu awalnya tampak sama, itu tidak membuktikan bahwa perlakuan spasinya setara. Mungkin masih ada cukup ruang untuk pasangan tersebut. Variasikan lebarnya sampai batas yang dimaksud mencapai akhir baris, lalu perbesar teks dan ulangi.

Saat membuka kembali file di TextEdit, gunakan File > Open, pilih file, pilih Show Options, lalu pilih Ignore rich text commands jika perlu. Apple juga mendokumentasikan pengaturan Display HTML files as HTML code instead of formatted text. Opsi ini memungkinkan Anda mengedit sumber secara langsung. Petunjuk HTML TextEdit dari Apple

Mengapa spasi tak terpisahkan masih bisa gagal?

Karakter tak terpisahkan berfungsi dalam aturan alur teks browser. Sebelum menambahkan lebih banyak karakter tak terlihat, periksa apakah kegagalan berasal dari konten, aturan CSS yang menimpa, atau batas tata letak.

Halaman menampilkan referensi secara harfiah

Jika halaman menampilkan karakter &nbsp;, masukan Anda diperlakukan sebagai teks, bukan diurai sebagai referensi karakter HTML. Di kolom sumber HTML, gunakan Beta&nbsp;:. Di kolom teks biasa, sisipkan karakter tak terpisahkan yang sebenarnya.

Pembedaan yang sama berlaku untuk JavaScript. Menetapkan string melalui textContent akan membuat teks; referensi HTML tidak akan diurai. String JavaScript dapat memuat karakter tersebut sebagai "Beta\u00A0:". Hindari juga menetapkan textContent pada seluruh paragraf berformat hanya untuk memperbaiki satu jarak: tindakan itu mengganti semua elemen anak yang sudah ada. MDN: Node.textContent

Aturan CSS mengizinkan pembungkusan yang sangat agresif

Periksa line-break: anywhere. MDN mendokumentasikan bahwa nilai ini mengizinkan pemutusan di sekitar unit karakter tipografis sekaligus mengabaikan larangan yang terkait dengan kelas glue dan word-joiner. Karena itu, karakter tak terpisahkan yang ditambahkan tidak dapat dianggap sebagai penimpaan mutlak atas pengaturan tersebut. MDN: line-break

Periksa juga overflow-wrap. Nilai anywhere memungkinkan rangkaian yang seharusnya tidak dapat diputus untuk terbelah bila diperlukan guna mencegah luapan. Perilaku darurat ini berbeda dari pemutusan biasa pada spasi. MDN: overflow-wrap

Gunakan span no-wrap lokal bila penyajian mengharuskan seluruh pasangan pendek tetap utuh. Periksa aturan yang benar-benar diterapkan pada span tersebut, khususnya jika lembar gaya halaman berisi pemilih yang lebih spesifik. Batasi perbaikannya agar teks panjang yang tidak terkait tetap mempertahankan perilaku pembungkusannya.

Tanda baca menempati kotak tata letak terpisah

Periksa apakah titik dua merupakan teks sebaris biasa atau berada di dalam inline-block maupun elemen sebaris atomik lainnya. W3C menetapkan peluang pemutusan khusus di sekitar elemen sebaris atomik, termasuk pengecualian yang melibatkan spasi tak terpisahkan di sebelahnya. Spasi yang disisipkan di samping kotak seperti itu tidak setara dengan spasi di dalam satu rangkaian teks berkesinambungan. CSS Text Module Level 3: Line Breaking Details

Untuk label sederhana ini, letakkan kata, jarak, dan tanda baca dalam satu span sebaris biasa. Hapus <br> eksplisit di antara bagian-bagian tersebut jika perilaku yang diinginkan adalah pembungkusan otomatis; nowrap meniadakan pembungkusan lunak, bukan menghapus pemutusan paksa. CSS Text Module Level 3: White Space and Wrapping

Bagaimana mempertahankan pembentukan teks browser dan menangani tata letak sempit?

Pertahankan setiap kata tetap utuh, jangan membungkus huruf-hurufnya satu per satu. W3C menetapkan kapan pembentukan teks harus berlanjut melintasi batas sebaris dan kapan perubahan seperti padding, batas tepi, atau perataan di antaranya mengharuskannya terputus. Span sebaris biasa menghindari penambahan batas pemformatan yang tidak perlu. CSS Text Module Level 3: Shaping Across Element Boundaries

Tetap ada kendala fisik: pasangan yang dilindungi memerlukan ruang horizontal yang cukup. Jika kontainer lebih sempit daripada Beta :, mempertahankan pasangan tetap menyatu dapat menyebabkan luapan. Uji kondisi tersebut dengan sengaja. Lalu pilih respons tata letak, seperti memperlebar kartu atau mempersingkat labelnya, alih-alih menyembunyikan teks yang terdampak. Perilaku no-wrap didokumentasikan dalam definisi white-space W3C.

Apakah Anda memerlukan pustaka pemutus baris?

Untuk halaman browser biasa, tugas ini tidak memerlukannya. Pustaka bernama linebreak menghitung peluang pemutusan Unicode; dokumentasinya secara eksplisit menyerahkan pemilihan baris sebenarnya kepada perangkat lunak yang mengetahui lebar yang tersedia dan ukuran teks yang ditampilkan. README-nya saat ini menyatakan dukungan Unicode versi 13. Dokumentasi foliojs/linebreak

Batasan itu penting jika alat lain sudah menggunakan pustaka tersebut. Daftar kemungkinan pemutusan tidak menentukan di mana browser akan membungkus teks yang telah dibentuk. Untuk tugas mengedit halaman ini, serahkan pembentukan font dan tata letak baris akhir kepada browser, lalu nyatakan batasan yang diinginkan melalui karakter atau CSS lokal.

Sebelum menerapkan perbaikan, pastikan tiga hal: jaraknya tetap terlihat, kata dan tanda baca tetap bersama saat mendekati akhir baris, dan teks di sekitarnya masih dapat membungkus. Gunakan spasi tak terpisahkan bila hubungan tersebut melekat pada teks, atau span no-wrap dengan cakupan sempit bila hubungan itu terkait penyajian. Periksa kembali halaman sebenarnya pada lebar terkecil yang masih berguna.

Sumber