Alirkan Teks HTML Mengelilingi SVG dengan Float CSS

Untuk mengalirkan teks HTML mengelilingi siluet SVG, jadikan gambar float, beri dimensi eksplisit, dan atur shape-outside ke URL SVG transparan. Tambahkan shape-margin untuk memberi ruang di sekitar kontur. Paragraf tetap berupa HTML biasa; SVG menyediakan gambar untuk menghitung batas aliran teks.

Ini bekerja di luar SVG. Cara ini tidak membungkus elemen SVG text atau melengkungkan huruf sepanjang path. Contoh di bawah memakai siluet transparan orisinal dan paragraf lengkap, tanpa kata yang diposisikan manual atau pemisah baris yang disisipkan.

Pilih tata letak teks yang benar-benar Anda butuhkan

Berkas SVG tidak membawa tata letak paragraf di sekitarnya. Menyalin gambar ke dokumen lain tidak memindahkan hubungan HTML/CSS ini.

1. Beri float ukuran dan gambar transparan

Referensi shape-outside MDN menjelaskan properti ini sebagai cara mengubah area float yang dikelilingi konten inline di dekatnya. Dengan nilai default, area itu mengikuti margin box float. URL gambar mengambil bentuk dari alpha gambar, yaitu transparansi.

Warna yang terlihat bukan penentu batas. Latar putih opak tetap memiliki alpha dan dapat membuat ilustrasi berperilaku seperti persegi panjang. Periksa berkasnya sendiri, bukan hanya tampilan desain putih di halaman putih. Pertahankan transparansi di luar siluet.

Simpan desain orisinal ini sebagai silhouette.svg:

<svg xmlns="http://www.w3.org/2000/svg" width="150" height="180" viewBox="0 0 150 180">
  <path fill="#2f6977" d="M30 20 C80 5 135 35 138 75 C140 110 105 140 65 150 L45 170 L37 142 C8 125 8 85 22 62 C10 47 16 31 30 20 Z"/>
</svg>

Ukuran intrinsiknya 150 × 180, dan CSS memakai lebar serta tinggi yang sama. Rasio aspek yang konsisten memudahkan pemeriksaan hubungan antara desain yang ditampilkan dan gambar pembentuk aliran.

Gambar dalam contoh ini bersifat dekoratif sehingga atribut alt-nya kosong. Berikan alternatif teks yang sesuai untuk gambar bermakna di halaman Anda; teks yang mengalir di sekitarnya tidak otomatis menyampaikan maknanya.

2. Jalankan contoh HTML lengkap

Simpan sebagai index.html di sebelah silhouette.svg:

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>HTML text around an SVG silhouette</title>
<style>
* { box-sizing: border-box; }
.sample {
  display: flow-root;
  color: #183a42;
  font: 16px/24px Arial, sans-serif;
}
.sample p { margin: 0; }
.sample img { float: left; width: 150px; height: 180px; margin: 0; }
.sample.narrow { width: 360px; }
.sample.wide { width: 520px; }
.sample.contour img {
  shape-outside: url("silhouette.svg");
  shape-image-threshold: 0.5;
  shape-margin: 10px;
}
</style>
<div class="sample narrow contour">
  <img src="silhouette.svg" alt="">
  <p>The neighborhood library keeps a small garden beside its reading room. Volunteers label the seedlings, share spare pots, and record which plants attract insects. A curved illustration can sit beside this paragraph while the browser keeps the words in their original order. As the column becomes narrower, the same sentence needs different line breaks. The artwork remains the same size in this example, so the available room beside it changes. After the illustration ends, the paragraph can use the full column again. Editors can revise this text without moving individual words or drawing separate text lines. The layout belongs to the web page, while the SVG supplies the visible silhouette.</p>
</div>
</html>

Sajikan folder melalui HTTP, misalnya dengan python -m http.server 8000, lalu buka http://localhost:8000/index.html. Kedua berkas kemudian memiliki origin yang sama. URL berkas lokal bukan pengaturan pemuatan yang diuji di sini.

Ubah class="sample narrow contour" menjadi class="sample narrow" untuk membandingkan aliran float persegi panjang biasa. Ubah narrow menjadi wide untuk menguji kolom 520 piksel. Paragraf dan gambar tetap sama.

Referensi display menjelaskan bahwa flow-root membentuk block formatting context. Di sini, konteks itu menampung gambar float di dalam sampelnya. Konteks tersebut tidak memosisikan kata; tata letak inline browser yang melakukannya.

3. Periksa baris hasil render pada lebih dari satu lebar

Kami menjalankan empat sampel terlihat di Chromium 155 memakai Arial 16px dengan tinggi baris 24px. Gambar tetap 150 × 180px sementara kolom memiliki lebar konten tetap 360px dan 520px. Kedua sampel kontur memakai shape-margin: 10px dan shape-image-threshold: 0.5.

Kontur sempit mengubah aliran tanpa mengurangi jumlah baris total. Pada lebar lebih besar, sampel kontur memakai satu baris lebih sedikit daripada kontrol persegi panjangnya.

Kami mengukur persegi panjang DOM Range asli untuk setiap kata dan mengelompokkannya berdasarkan posisi vertikal. Itu pengukuran baris teks hasil render, bukan akses ke objek line-box internal browser. Kami juga memeriksa pengaturan float dan bentuk terhitung, dimensi gambar yang dimuat, serta sampel alpha pada gambar SVG sebenarnya.

Pada kedua lebar, beberapa baris kontur dimulai di kiri tepi pengecualian 150px milik float persegi panjang. Teks juga kembali ke seluruh lebar kolom setelah gambar. Pengamatan ini menunjukkan kontur yang diuji memengaruhi tata letak sebenarnya, bukan sekadar mengubah tampilan tangkapan layar.

Baris serta koordinat tepatnya bergantung pada font, browser, paragraf, gambar, dan lebar. Mengganti kalimat atau memuat font lain dapat mengubahnya. Uji konten sebenarnya pada ukuran sempit dan lebar alih-alih mempertahankan angka ini sebagai konstanta desain.

4. Tangani margin bentuk, alpha, dan pemuatan secara terpisah

shape-margin memperluas bentuk pembungkus untuk memberi ruang antara bentuk dan teks. Nilai 10px di sini adalah pilihan tata letak, bukan celah minimum terukur antara setiap glif terlihat dan setiap titik pada ilustrasi.

Spesifikasi CSS Shapes mempertahankan box model normal dan membatasi efek bentuk pada margin box float. Margin bentuk besar tidak memberikan kotak CSS lebih besar kepada gambar. Jika desain memerlukan lebih banyak ruang, periksa juga dimensi float dan margin biasanya.

shape-image-threshold memilih ambang alpha untuk mengambil bentuk gambar. Fixture orisinal memiliki bagian luar sepenuhnya transparan dan desain tengah opak. Bayangan lembut atau tepi semitransparan memerlukan pilihan ambang yang disengaja dan peninjauan visual; mengubah ambang tidak dapat membuat latar opak menjadi transparan.

URL gambar juga harus memenuhi syarat pemuatan bentuk. CSS Shapes menetapkan permintaan CORS untuk URL gambar dan kembali tanpa bentuk kustom jika pemuatan gagal. Menyajikan SVG di sebelah halaman menghindari ketergantungan lintas origin dalam contoh ini. Jika dihosting CDN, konfigurasikan respons CORS server itu dan periksa permintaan serta tata letaknya. Melihat gambar dalam elemen img saja tidak membuktikan permintaan bentuk berhasil.

5. Pertahankan urutan teks dan periksa halaman akhir

Keempat paragraf yang diuji mempertahankan teks yang persis sama dalam satu node teks, tanpa elemen br atau penempatan per kata. CSS mengubah pemisahan baris visual tanpa menulis ulang urutan DOM paragraf. Kami tidak menjalankan sesi pembaca layar atau mengklaim audit aksesibilitas dari pemeriksaan sumber itu.

Jaga paragraf tetap terbaca saat gambar tidak tersedia atau tata letak berubah. Untuk kolom sangat sempit, susunan lebih sederhana dengan gambar di atas paragraf mungkin lebih mudah dibaca daripada pita teks tipis di sampingnya. Periksa breakpoint dan konten Anda sendiri, bukan memperkecil teks agar efek kontur dipaksakan.

Float tetap menyisihkan kotak CSS. Aliran mengikuti bentuk tidak menjadikannya penghalang umum yang dapat dikelilingi teks dari segala sisi. Dalam contoh float kiri ini, teks di dekatnya mengalir di kanan lalu berlanjut di bawah.

Perbaiki gejala pada sumbernya

Jika ilustrasi datar yang sesuai hanya tersisa sebagai raster dan Anda membutuhkan desain siluet yang dapat diedit, alur clipart ke SVG PerfectVector dapat membantu memulihkan kandidat. Bandingkan outline serta area sekeliling transparannya dengan sumber, lalu uji URL SVG sebenarnya di halaman Anda. Gambar raster transparan juga dapat menyediakan bentuk CSS berbasis gambar; SVG tidak diperlukan hanya untuk mengaktifkan aliran berdasarkan alpha.

Pertahankan SVG bersih yang sudah ada jika Anda memilikinya. Vektorisasi tidak membangun tata letak HTML di sekitarnya, mempertahankan semantik paragraf untuk Anda, atau menjamin hasil aliran browser tertentu.

Tanya jawab

Apakah shape-outside membungkus teks di dalam SVG? Tidak. Contoh ini mengubah aliran inline HTML di samping gambar float. Label SVG, HTML tertanam dalam SVG, dan teks yang mengikuti path adalah tugas tata letak berbeda.

Mengapa SVG yang tampak transparan masih membungkus sebagai persegi panjang? Periksa latar opak dalam berkas, permintaan gambar bentuk yang gagal, ukuran float yang tidak ada, atau konteks tata letak yang membuat float tidak aktif. Piksel putih berbeda dari piksel transparan.

Apakah saya perlu mengonversi PNG ke SVG terlebih dahulu? Tidak jika hanya untuk aliran berbasis alpha. Gambar raster transparan yang sesuai juga dapat menyediakan bentuk. Gunakan SVG jika kebutuhan desain yang dapat diedit atau vektor lainnya membenarkannya.

Apakah pemisahan baris tetap sama pada setiap ukuran layar? Tidak. Lebar tersedia, metrik font, teks, ukuran gambar, dan tata letak browser memengaruhi baris. Uji konten sebenarnya pada lebih dari satu lebar.

Sumber

1. MDN shape-outside — Mendokumentasikan area float dan bentuk gambar yang berasal dari alpha.
2. MDN shape-margin — Mendefinisikan ruang tambahan di sekitar bentuk pembungkus.
3. MDN shape-image-threshold — Mendefinisikan ambang alpha untuk bentuk gambar.
4. CSS Shapes Module Level 1 — Menetapkan batas kotak float, pemuatan gambar, dan perilaku CORS.
5. MDN display dan flow-root — Menjelaskan konteks pemformatan untuk menampung float.

Jika desain yang dapat diedit belum ada, siapkan kandidat SVG clipart, periksa siluet dan transparansinya, lalu verifikasi tata letak paragraf sebenarnya di halaman pada lebar yang ingin Anda dukung.