Untuk membedakan pembungkusan otomatis dari baris baru yang tersimpan, matikan pembungkusan kata di editor teks dan periksa teks aslinya. Panduan Mac ini menjelaskan cara memeriksanya, bagaimana tata letak browser dapat menyesatkan, dan apa yang sebenarnya dapat dibuktikan oleh kode yang disalin.

Apa perbedaan antara pembungkusan otomatis dan baris baru?

Pembungkusan otomatis terjadi ketika browser atau editor memindahkan teks ke baris tampilan berikutnya agar sesuai dengan lebar yang tersedia. Baris baru yang tersimpan merupakan bagian dari teks itu sendiri. W3C membedakan pemisah baris akibat pembungkusan otomatis dari pemisah paksa, yang dapat terjadi karena karakter baris baru yang dipertahankan atau batas blok. Pemrosesan spasi CSS mengubah tampilan tanpa mengubah data dokumen yang mendasarinya. Modul Teks CSS Level 3

Perbedaan ini menghasilkan tiga kemungkinan ketika kode tampak tersusun dalam beberapa baris: satu baris logis terbungkus; teks berisi beberapa baris logis; atau struktur halaman memaksakan pemisah visual. Tangkapan layar saja tidak dapat memastikan mana yang terjadi.

Di sini, “baris baru yang ditulis” berarti baris baru yang ada dalam sumber yang diperiksa. Keberadaannya tidak membuktikan siapa yang menyisipkannya: pemformat, proses ekspor, atau transformasi lain mungkin telah menghasilkannya. Tugas praktisnya adalah menentukan apakah batas tersebut merupakan bagian dari teks atau hanya dari tampilannya saat ini.

Bagaimana cara memeriksa kode di editor desktop Mac?

Gunakan Visual Studio Code untuk alur kerja ini. Mulailah dengan berkas kode asli jika tersedia. Jika Anda hanya memiliki halaman publik, salin kode yang relevan ke dokumen editor terpisah, tetapi anggap dokumen itu sebagai bukti teks yang disalin sampai Anda dapat membandingkannya dengan sumber asli.

Matikan pembungkusan tanpa memformat ulang teks

  1. Buka berkas atau contoh yang disalin di VS Code.
  2. Saat editor aktif, tekan Option+Z untuk menjalankan Toggle Word Wrap.
  3. Amati apakah teks lanjutan menyatu dengan baris tampilan sebelumnya dan memanjang secara horizontal.
  4. Jika pembungkusan sudah mati, alihkan sekali lagi untuk membandingkan kedua keadaan. Hasil yang penting adalah perbedaan antara kedua tampilan tersebut.

Microsoft mendokumentasikan Option+Z sebagai pintasan default macOS untuk Toggle Word Wrap, dengan ID perintah editor.action.toggleWordWrap. Jika pintasan Anda berbeda, cari perintah itu di editor Keyboard Shortcuts. Referensi pintasan keyboard default

Dengan editor.wordWrap diatur ke on, VS Code membungkus teks sesuai lebar area tampilan editor. Karena itu, mematikan pembungkusan akan menghilangkan teks lanjutan yang hanya muncul secara visual. Batas yang tetap ada pada teks yang sama tanpa perubahan merupakan batas baris logis, bukan pembungkusan otomatis editor tersebut. Pengeditan dasar

Gunakan tabel keputusan ini saat membandingkan tampilan:

Pengamatan Hal yang didukung Tindakan selanjutnya
Teks lanjutan menyatu dengan baris sebelumnya saat pembungkusan dimatikan Itu adalah pembungkusan otomatis di editor Biarkan teks apa adanya
Dua baris tetap terpisah saat pembungkusan dimatikan Teks yang diperiksa mengandung batas baris Bandingkan dengan sumber asli jika yang diperiksa adalah salinan
Batas halaman menghilang pada teks yang disalin Halaman dan representasi salinannya berbeda Periksa teks dan struktur halaman
Batas pada salinan tetap ada, tetapi sumber asli tidak tersedia Teks yang disalin mengandung batas tersebut Biarkan asalnya belum dipastikan

Coba contoh sintetis

Tempel contoh satu baris berikut ke dokumen terpisah. Ini adalah teks JavaScript ilustratif; Anda tidak perlu menjalankannya.

const labels = ["Amber", "Birch", "Cedar", "Dune", "Elm", "Fern", "Grove", "Harbor"];

Persempit editor hingga teksnya terbungkus. Saat pembungkusan aktif, pernyataan tersebut dapat mengisi beberapa baris tampilan. Matikan pembungkusan: pernyataan itu seharusnya kembali menjadi satu baris logis, meskipun Anda harus menggulir secara horizontal untuk membaca ujungnya.

Sekarang bandingkan dengan versi yang sengaja dibuat multibaris berikut:

const labels = [
  "Amber", "Birch", "Cedar", "Dune",
  "Elm", "Fern", "Grove", "Harbor"
];

Keempat baris logis ini tetap terpisah saat pembungkusan dimatikan. Pada lebar yang sempit, setiap baris juga dapat terbungkus. Inilah perbedaan yang berguna: baris baru tersimpan dan pembungkusan otomatis dapat muncul bersamaan dalam contoh kode yang sama.

Hindari memformat dokumen selama perbandingan. Tujuannya adalah mengubah tampilan sambil mempertahankan teks yang diperiksa. Jika tidak, batas baris yang berubah mungkin disebabkan oleh penyuntingan, bukan pengaturan tampilan.

Mengapa mengubah ukuran browser hanya merupakan pengujian awal?

Bayangkan halaman publik abstrak dengan kolom navigasi dan panel kode. Memperlebar browser mungkin memberi panel lebih banyak ruang. Jika batasnya berpindah ke kata yang berbeda, hal itu mendukung penjelasan bahwa teks terbungkus. Namun, jika panel memiliki lebar tetap, mengubah ukuran jendela luar mungkin tidak mengubahnya.

Karena itu, batas yang tetap berada di tempatnya belum memberi kepastian. Browser mungkin mempertahankan baris baru, menemukan pemisah struktural, atau membungkus teks di panel yang lebar efektifnya tidak berubah. Pastikan hasilnya dengan memeriksa representasi teks, alih-alih menganggap perubahan ukuran jendela sebagai bukti.

CSS juga menentukan apakah baris baru yang tersimpan terlihat. MDN mendokumentasikan nilai-nilai umum berikut: Properti CSS white-space

Nilai CSS Perlakuan terhadap baris baru dalam sumber Pembungkusan otomatis
normal Digabung dengan spasi lainnya Diizinkan
pre Dipertahankan Dinonaktifkan
pre-wrap Dipertahankan Diizinkan
pre-line Dipertahankan; spasi dan tab digabung Diizinkan

Akibatnya, pre-wrap dapat menampilkan kedua jenis batas secara bersamaan, sedangkan normal dapat menyembunyikan baris baru dalam sumber. Menonaktifkan pembungkusan dengan nowrap tidak cukup untuk menguji apakah sumber dipertahankan karena cara itu juga menggabungkan spasi. Untuk blok teks sederhana yang Anda kendalikan, pre adalah pembanding yang tepat jika Anda memerlukan spasi yang dipertahankan tanpa pembungkusan otomatis. Properti CSS white-space

Dapatkah teks yang disalin menunjukkan baris baru asli?

Teks yang disalin berguna, tetapi merupakan representasi terpisah. MDN menjelaskan innerText sebagai teks hasil render yang mendekati hasil pemilihan dan penyalinan elemen. Properti ini merespons tampilan hasil render, termasuk pemisah eksplisit seperti elemen br. Karena itu, baris baru dalam contoh yang ditempel tidak dengan sendirinya membuktikan bahwa string kode asli mengandung baris baru. HTMLElement: properti innerText

Untuk wadah kode statis sederhana, textContent menjawab pertanyaan yang berbeda: properti ini mengembalikan teks dari node dan turunannya, dengan menggabungkan teks turunan tanpa menggunakan tampilan hasil render. Ini berguna untuk memeriksa teks DOM, asalkan wadah tersebut benar-benar memuat kode yang ingin Anda periksa. Node: properti textContent

Properti-properti ini tidak dapat saling menggantikan sebagai alat pemulihan. Pemisah struktural belum tentu merupakan baris baru dalam textContent; sebaliknya, spasi dalam sumber mungkin ada tanpa tampak sebagai pemisah hasil render. Jika teks dan tata letak halaman tidak sesuai, jelaskan hasilnya secara tepat: “teks DOM mengandung baris baru”, “tata letak memaksakan pemisah”, atau “versi yang disalin mengandung baris baru”. Jangan membuat klaim yang melampaui apa yang dibuktikan oleh representasi yang diperiksa.

Apa yang berubah pada editor kode berbasis browser?

Editor browser mungkin menyimpan dokumennya secara terpisah dari elemen yang ditampilkan. Sebagai contoh, dokumentasi sumber resmi CodeMirror menjelaskan baris dokumen melalui model Text: lines menghitung baris logis, dan line(n) mengambil baris bernomor. Posisi to suatu baris berada sebelum pemisah baris berikutnya, atau di akhir dokumen. Dokumentasi API teks dokumen CodeMirror

CodeMirror juga mendokumentasikan bahwa tampilannya hanya menggambar kode yang terlihat beserta margin di sekelilingnya ke dalam DOM. Properti lineWrapping menjelaskan pembungkusan dalam tampilan. Batas-batas ini berarti bahwa menghitung baris hasil render atau mengekstrak DOM editor yang terlihat tidak cukup untuk memastikan baris-baris pada dokumen lengkap. Dokumentasi API tampilan editor CodeMirror

Untuk pemeriksaan desktop biasa, gunakan perintah unduh berkas, ekspor, atau salin yang didokumentasikan oleh aplikasi induk jika tersedia, lalu periksa hasilnya dengan pembungkusan dimatikan. Jika Anda mengelola integrasi CodeMirror, gunakan model dokumennya untuk menentukan baris logis. API pustaka tidak membuktikan bahwa setiap aplikasi menyediakan kontrol yang setara untuk pengguna.

Bisakah formulir menambahkan baris baru yang tidak pernah diketik?

Ya. WHATWG HTML Standard membedakan nilai API saat ini dari representasi pengiriman sebuah textarea. Dengan wrap="soft", teks dapat terbungkus secara visual tanpa pembungkusan tambahan saat dikirim. Dengan wrap="hard", representasi pengiriman dapat memperoleh pemisah baris; keadaan tersebut mengharuskan cols ditentukan. Nilai API menormalkan akhir baris menjadi LF. HTML Standard: Elemen textarea

Hal ini penting saat membandingkan teks sebelum dan sesudah alur kerja berbasis formulir. Batas yang hanya muncul pada hasil yang dikirim atau diekspor mungkin berasal dari tahap pemrosesan tersebut. Periksa representasi yang sesuai dengan tugas Anda: teks editor saat ini untuk mengidentifikasi batas yang diketik, atau berkas hasil untuk menentukan apa yang benar-benar diekspor.

Bagaimana cara mempertahankan batas browser dan pembentukan teks?

Biarkan browser atau editor menangani pembungkusan visual. W3C menetapkan bahwa overflow-wrap: anywhere menjaga klaster grafem tetap utuh dan mempertahankan pembentukan teks pada pembungkusan yang dihasilkan. Membangun ulang baris dengan menyisipkan baris baru setelah jumlah karakter tertentu tidak mereproduksi aturan tata letak tersebut. Modul Teks CSS Level 3

Untuk contoh kode yang ingin Anda gunakan kembali, dapatkan sumber terbaik yang tersedia terlebih dahulu, bandingkan dengan pembungkusan aktif dan nonaktif, lalu pertahankan batas baris tersimpannya kecuali Anda memang ingin menyuntingnya. Jika yang tersedia hanya halaman hasil render, catat hal-hal yang dapat Anda pastikan dari representasi tersebut dan biarkan batas yang belum pasti tetap belum dipastikan. Dengan begitu, Anda memiliki pemeriksaan yang dapat diulang tanpa mengubah teks secara tidak sengaja saat menyesuaikan tampilan.

Sumber