Agar padding tetap ada di kedua ujung setiap baris sorotan yang terbungkus, terapkan box-decoration-break: clone pada elemen inline, bersama latar belakang dan padding-nya. Sertakan deklarasi dengan prefiks WebKit untuk Safari. MDN menjelaskan dekorasi fragmen.

Panduan ini ditujukan bagi seseorang yang mengedit halaman web di Mac dan ingin frasa yang disorot terbungkus secara alami di dalam judul atau paragraf. Tujuannya adalah memberi setiap baris yang terbentuk latar belakang berpadding tersendiri, sementara pemenggalan baris tetap ditangani browser.

Mengapa padding menghilang saat sorotan terbungkus?

Nilai awal box-decoration-break adalah slice. Saat kotak inline terputus ke baris lain, nilai tersebut memperlakukan dekorasinya sebagai satu kotak berkesinambungan yang diiris menjadi fragmen. Padding tidak ditambahkan pada tepi yang terputus. Dengan clone, setiap fragmen mendapatkan padding, border, dan dekorasi latar belakangnya sendiri. W3C mendefinisikan kedua perilaku fragmentasi tersebut.

Perbedaan itu menjelaskan hasil yang umum terjadi: menambahkan lebih banyak padding horizontal membuat awal dan akhir seluruh frasa terasa lebih lega, tetapi tepi baris di antaranya tetap tampak rapat. Pengaturan yang belum ada mengendalikan apa yang terjadi pada titik pemenggalan tersebut; menambah padding saja tidak mengubahnya.

Pertahankan sorotan sebagai kotak inline. Latar belakang blok menghiasi persegi panjang yang membungkusnya, sedangkan sorotan inline mengikuti alur teks. MDN mendokumentasikan perbedaan perilaku ukuran dan jarak pada kotak block, inline, dan inline-block. Lihat panduan model kotak MDN.

Buat contoh lengkap di Mac Anda

Di editor kode, buat file teks biasa bernama wrapped-highlight.html, tempel contoh lengkap di bawah ini, lalu simpan. Buka file tersebut di browser desktop. Anda tidak perlu memasang paket, menggunakan stylesheet eksternal, atau memakai JavaScript.

Judul sintetis ini mewakili pengantar halaman sederhana. Satu span membungkus seluruh frasa yang diberi dekorasi. WHATWG mendefinisikan elemen span sebagai wadah tingkat teks generik tanpa makna tersendiri, sehingga cocok untuk pengelompokan yang murni visual ini. Baca definisi span dalam Standar HTML.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Wrapped highlight example</title>
  <style>
    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      padding: 2rem;
      background: #ffffff;
      color: #202020;
      font-family: system-ui, sans-serif;
    }

    .sample {
      max-width: 26rem;
      margin: 0 auto;
    }

    .sample-title {
      margin: 0;
      font-size: 2rem;
      font-weight: 600;
      line-height: 1.65;
    }

    .highlight {
      display: inline;
      background-color: #ffe6a6;
      padding: 0.08em 0.3em;
      border-radius: 0.15em;
      -webkit-box-decoration-break: clone;
      box-decoration-break: clone;
    }
  </style>
</head>
<body>
  <main class="sample">
    <h1 class="sample-title"><span class="highlight">Amber tiles and silver circles arranged across a sample page</span></h1>
  </main>
</body>
</html>

Persempit jendela browser hingga judul terbungkus, lalu lebarkan lagi. Periksa awal dan akhir setiap baris yang disorot. Hasil yang diharapkan adalah fragmen latar belakang berpadding tersendiri di sekitar setiap baris, dengan perlakuan yang sama saat pembungkusan berubah. Contoh MDN menggunakan pasangan deklarasi berprefiks dan standar yang sama. Lihat sintaks dan contoh yang didokumentasikan.

Dimensi di sini hanyalah pilihan desain ilustratif. Mulailah dengan mengubah padding horizontal, 0.3em, jika ujungnya tampak terlalu rapat atau terlalu lebar. Ubah padding vertikal, 0.08em, secara terpisah. Tetap uji pembungkusan saat menyesuaikan salah satu nilai.

Untuk membandingkan perilakunya, ubah sementara kedua deklarasi dekorasi dari clone menjadi slice, simpan, lalu muat ulang. Setelah itu, kembalikan keduanya ke clone. Mengubah keduanya mencegah hasil perbandingan bergantung pada deklarasi mana yang dikenali browser Anda.

Detail dukungan browser apa yang penting di Mac?

Pertahankan kedua deklarasi dalam contoh. Data kompatibilitas MDN saat ini mencatat dukungan properti standar mulai Chrome 130 dan Firefox 32. Data tersebut mencatat dukungan Safari dengan prefiks -webkit- dan membatasi implementasinya pada elemen inline. Periksa data kompatibilitas browser MDN.

Batasan inline tersebut sesuai untuk tugas ini: frasa yang terbungkus melintasi baris teks mengalami fragmentasi inline. Hal itu tidak memastikan dukungan setara untuk blok yang terfragmentasi melintasi kolom atau halaman cetak. Pisahkan kasus tata letak tersebut saat mengevaluasi hasilnya.

Uji file di browser Mac yang penting untuk halaman Anda. Gunakan jendela sempit dan lebar, lalu perbesar teks halaman dan ulangi pengujian. Anggap jumlah baris dapat berubah; kriteria penerimaan Anda adalah padding yang konsisten pada fragmen yang benar-benar dihasilkan setiap browser.

Jika suatu lingkungan tidak mengenali kedua deklarasi, peningkatan berupa penggandaan per baris tidak akan tersedia. Pastikan teks dan latar belakang tetap mudah digunakan, atau pilih perlakuan blok berpadding jika satu latar belakang berbentuk persegi panjang memenuhi kebutuhan desain. Ini mengubah tampilannya, jadi pilihlah secara sengaja.

Bagaimana cara mencegah latar belakang bertumpuk dan pembungkusan yang janggal?

Padding dan jarak baris menyelesaikan masalah yang berbeda. Pada kotak inline biasa, padding atas dan bawah dapat memperluas area yang diwarnai tanpa menjauhkan konten di sekitarnya. Akibatnya, menambah padding vertikal dapat membuat baris sorotan yang berdekatan bertumpuk. MDN secara eksplisit mendokumentasikan perilaku kotak inline ini. Lihat padding inline dan konten di sekitarnya.

Sesuaikan line-height pada judul bersama padding vertikal sorotan. Contoh ini menggunakan nilai awal 1.65 yang sengaja dibuat cukup renggang. Kurangi bertahap jika jaraknya terasa berlebihan, dengan memeriksa tata letak tersempit setiap kali. Tidak ada satu nilai jarak yang cocok untuk semua font dan dekorasi.

Gunakan urutan diagnosis ini untuk menemukan penyebab sebelum mengubah lebih banyak CSS:

Yang terlihat Periksa terlebih dahulu Tindakan berikutnya
Padding hanya ada di ujung luar frasa Perilaku dekorasi Terapkan kedua deklarasi clone pada elemen inline yang disorot.
Satu persegi panjang latar belakang besar Elemen yang memiliki latar belakang Tempatkan latar belakang dan padding pada span inline bagian dalam.
Baris sorotan bersentuhan secara vertikal Padding vertikal dan tinggi baris induk Kurangi padding vertikal atau tambah tinggi baris.
Label panjang melampaui wadah Peluang pembungkusan yang tersedia Pertimbangkan aturan token panjang opsional di bawah.
Hanya Safari yang tidak menampilkan padding ujung sesuai harapan Deklarasi berprefiks Pastikan -webkit-box-decoration-break: clone tetap ada di stylesheet.

Untuk label sintetis yang tidak dapat diputus seperti AmberTileSequenceAmberTileSequence, Anda dapat menambahkan overflow-wrap: anywhere ke .sample-title. Ini fragmen CSS opsional yang ditambahkan ke aturan yang sudah ada; bagian contoh lainnya tetap sama.

/* Optional addition inside the existing .sample-title rule */
overflow-wrap: anywhere;

Ini memungkinkan string yang tidak dapat diputus agar terputus saat diperlukan untuk mencegah luapan, tanpa menyisipkan tanda hubung. Aturan ini menyediakan peluang pembungkusan; aturan ini tidak membuat padding. Frasa biasa yang berisi spasi mungkin tidak memerlukannya. MDN mendokumentasikan kondisi untuk overflow-wrap.

Pertimbangkan juga latar belakangnya. Dengan clone, latar belakang digambar secara terpisah untuk setiap fragmen, sehingga gradien atau gambar latar dapat dimulai ulang di setiap baris. Gunakan warna solid jika Anda menginginkan sorotan seragam tanpa pola gambar berulang. W3C menjelaskan latar belakang fragmen yang digambar secara terpisah.

Pertahankan alur teks alami dan batas pembentukan teks

Gunakan satu pembungkus di sekitar seluruh frasa yang dimaksud, alih-alih membuat pembungkus terpisah untuk baris yang terlihat saat ini. Dengan begitu, markup tidak bergantung pada lebar jendela dan pilihan font saat ini.

Hindari memisahkan kata ke dalam span karakter berpadding untuk menyimulasikan efek ini. Spesifikasi CSS Text mengharuskan pembentukan teks terputus pada batas inline ketika padding, border, atau margin sumbu inline bernilai bukan nol memisahkan unit karakter tipografis yang berdekatan. Karena itu, batas berpadding di dalam kata dapat memengaruhi pembentukan glif. Lihat aturan W3C tentang pembentukan teks lintas batas.

Untuk judul ini, tempatkan pembungkus pada batas frasa dan biarkan teks di dalamnya tetap menyatu. Manfaat praktisnya, Anda terhindar dari penambahan batas berpadding di dalam frasa. Ini tidak menjamin glif atau akhir baris akan sama di semua browser dan font; periksa hasil render yang benar-benar akan digunakan.

Bagaimana jika proyek menggunakan Tailwind CSS?

Dalam proyek Tailwind yang sudah ada, tambahkan box-decoration-clone ke elemen inline yang sudah memiliki latar belakang dan padding sorotan. Dokumentasi Tailwind saat ini memetakan utilitas tersebut ke box-decoration-break: clone. Utilitas box-decoration-slice memilih perilaku lainnya. Lihat utilitas box-decoration-break Tailwind.

Pertahankan persyaratan browser dari contoh CSS biasa: periksa stylesheet yang dihasilkan untuk memastikan deklarasi berprefiks tersedia jika dukungan Safari diperlukan, dan tambahkan melalui CSS kustom proyek jika belum ada. Utilitas ini memilih perilaku dekorasi; utilitas ini tidak menghapus batas implementasi browser.

Anda tidak perlu menggunakan Tailwind hanya untuk efek ini. Contoh lokal lengkap sudah memuat CSS yang diperlukan.

Bisakah sorotan kustom menggunakan padding yang sama?

Range CSS Custom Highlight API yang ditata melalui ::highlight() memiliki kemampuan berbeda dari elemen inline yang ditata. MDN mencantumkan properti yang diizinkan, termasuk warna teks, warna latar belakang, dan dekorasi teks. Padding dan box-decoration-break tidak termasuk dalam daftar tersebut. Baca batas penataan sorotan kustom yang didokumentasikan.

Jika Anda mengendalikan markup dan memerlukan padding sungguhan pada setiap baris yang terbungkus, gunakan pembungkus inline seperti di atas. Jika Anda harus mempertahankan sorotan berbasis range tanpa pembungkus, gunakan properti warna dan dekorasi yang didukung, lalu terima bahwa API ini tidak menyediakan kotak fragmen berpadding.

Untuk judul atau frasa halaman yang terbungkus, gunakan satu pembungkus inline, tempatkan latar belakang dan padding bersamanya, lalu terapkan kedua deklarasi clone. Akhiri dengan menguji berbagai lebar dan memeriksa jarak vertikal. Pemeriksaan tersebut memastikan sorotan berfungsi dengan alur teks yang sebenarnya, bukan hanya pada satu ukuran jendela yang kebetulan sesuai.

Sumber