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.
```
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](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/display#flow-root) 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.
*Empat tata letak HTML sebenarnya memakai SVG orisinal dan paragraf yang sama. Varian kontur menambahkan shape-outside dan margin bentuk 10px; tidak ada kata yang ditempatkan manual.*
## 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`.
| Sampel sebenarnya | Baris teks hasil render | Awal baris pertama | Tinggi teks |
| ----------------- | ----------------------- | ------------------ | ----------- |
| rectangle-narrow | 18 | 150px | 432px |
| rectangle-wide | 13 | 150px | 312px |
| contour-narrow | 18 | 115.5px | 432px |
| contour-wide | 12 | 115.5px | 288px |
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`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/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](https://www.w3.org/TR/css-shapes-1/) 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`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/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
| Gejala | Pemeriksaan dan pemulihan |
| -------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
| Teks mengikuti persegi panjang | Pastikan float aktif, dimensi ditentukan, URL bentuk dimuat, dan sumber memiliki area sekeliling transparan. |
| Teks menumpuk di atas ilustrasi terlihat | Bandingkan SVG yang ditampilkan dengan URL bentuk, dimensi, dan rasio aspeknya. Periksa ambang alpha serta margin bentuk. |
| Gambar muncul tetapi kontur tidak | Periksa permintaan gambar bentuk dan perilaku CORS terpisah dari permintaan img. Uji contoh same-origin sebelum menambahkan CDN. |
| Anak flex atau grid tidak mengapung sesuai harapan | Pertahankan float dan paragraf dalam kontainer alur normal seperti contoh ini, bukan menjadikan gambar float itu sendiri item flex atau grid. |
| Paragraf sempit sulit dibaca | Kurangi ukuran gambar atau pindahkan ke atas teks pada breakpoint yang sesuai, lalu uji paragraf sebenarnya lagi. |
| Label SVG tetap tidak membungkus | Gunakan alur teks di dalam SVG dari tabel di atas. Shape-outside mengubah aliran HTML di dekatnya, bukan tata letak teks SVG. |
Jika ilustrasi datar yang sesuai hanya tersisa sebagai raster dan Anda membutuhkan desain siluet yang dapat diedit, [alur clipart ke SVG](https://perfectvector.com/id/clipart-to-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](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/shape-outside) — Mendokumentasikan area float dan bentuk gambar yang berasal dari alpha.
2. [MDN shape-margin](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/shape-margin) — Mendefinisikan ruang tambahan di sekitar bentuk pembungkus.
3. [MDN shape-image-threshold](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/shape-image-threshold) — Mendefinisikan ambang alpha untuk bentuk gambar.
4. [CSS Shapes Module Level 1](https://www.w3.org/TR/css-shapes-1/) — Menetapkan batas kotak float, pemuatan gambar, dan perilaku CORS.
5. [MDN display dan flow-root](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/display#flow-root) — Menjelaskan konteks pemformatan untuk menampung float.
Jika desain yang dapat diedit belum ada, [siapkan kandidat SVG clipart](https://perfectvector.com/id/clipart-to-svg), periksa siluet dan transparansinya, lalu verifikasi tata letak paragraf sebenarnya di halaman pada lebar yang ingin Anda dukung.
## Explore
- [Read the HTML article](https://perfectvector.com/id/blog/css-text-around-svg-shape)
- [SVG textLength: Sesuaikan Label Tanpa Mendistorsi Huruf](https://perfectvector.com/id/blog/svg-textlength-fit.md)
- [Perataan Vertikal Teks SVG: Tengahkan Label yang Dibuat Ulang](https://perfectvector.com/id/blog/svg-text-vertical-alignment.md)
- [Product facts](https://perfectvector.com/product-facts.md)
- [FAQ](https://perfectvector.com/faq.md)
- [Pricing and credits](https://perfectvector.com/pricing.md)