CSS Float ile HTML Metnini SVG Şeklinin Etrafına Sarın

HTML metnini SVG siluetinin etrafına sarmak için görsele float uygulayın, açık ölçüler verin ve shape-outside değerini şeffaf SVG'nin URL'sine ayarlayın. Konturun çevresinde boşluk için shape-margin ekleyin. Paragraf sıradan HTML olarak kalır; SVG, sarma sınırını hesaplamak için kullanılan görseli sağlar.

Bu SVG'nin dışında çalışır. SVG text öğesini sarmaz veya harfleri yol boyunca bükmez. Aşağıdaki örnek, elle konumlandırılmış sözcükler veya eklenmiş satır sonları olmadan özgün şeffaf siluet ve tam paragraf kullanır.

Gerçekte ihtiyaç duyduğunuz metin yerleşimini seçin

SVG dosyası çevresindeki paragraf yerleşimini taşımaz. Görseli başka belgeye kopyalamak bu HTML/CSS ilişkisini aktarmaz.

1. Float'a boyut ve şeffaf görsel verin

MDN'nin shape-outside başvurusu, özelliği yan satır içi içeriğin etrafına sarıldığı float alanını değiştirme yolu olarak açıklar. Varsayılan değerde alan float'ın dış kenar boşluğu kutusunu izler. Görsel URL'si ise şekli görselin alfa değerinden, yani şeffaflığından türetir.

Görünür renk sınır sinyali değildir. Opak beyaz arka planın da alfa değeri vardır ve çizimi dikdörtgen gibi davranır hale getirebilir. Beyaz tasarımın beyaz sayfada nasıl göründüğüne değil, dosyanın kendisine bakın. Siluetin dışındaki şeffaflığı koruyun.

Bu özgün tasarımı silhouette.svg olarak kaydedin:

<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>

Doğal boyutu 150 × 180'dir ve CSS aynı genişlik ve yüksekliği kullanır. En boy oranını tutarlı tutmak, gösterilen tasarım ile şekil görseli arasındaki ilişkiyi incelemeyi kolaylaştırır.

Bu örnekteki görsel dekoratiftir; bu nedenle alt özniteliği boştur. Anlamlı görsele sayfanız için uygun metin alternatifi verin; çevresine metin sarmak anlamını otomatik iletmez.

2. Tam HTML örneğini çalıştırın

Bunu silhouette.svg yanına index.html olarak kaydedin:

<!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>

Klasörü örneğin python -m http.server 8000 ile HTTP üzerinden sunun ve http://localhost:8000/index.html adresini açın. Böylece iki dosya aynı kaynağı paylaşır. Yerel dosya URL'si burada test edilen yükleme düzeni değildir.

Normal dikdörtgen float sarmasını karşılaştırmak için class="sample narrow contour" değerini class="sample narrow" olarak değiştirin. 520 piksellik sütunu test etmek için narrow yerine wide yazın. Paragraf ve görsel değişmeden kalır.

display başvurusu, flow-root değerinin blok biçimlendirme bağlamı kurduğunu açıklar. Burada float görseli örneğin içinde tutar. Sözcükleri konumlandırmaz; bunu tarayıcının satır içi yerleşimi yapar.

3. Görüntülenen satırları birden fazla genişlikte kontrol edin

Chromium 155'te Arial 16px ve 24px satır yüksekliğiyle dört görünür örnek çalıştırdık. Sütunların sabit içerik genişlikleri 360px ve 520px iken görsel 150 × 180px kaldı. İki kontur örneği de shape-margin: 10px ve shape-image-threshold: 0.5 kullandı.

Dar kontur toplam satır sayısını azaltmadan sarmayı değiştirdi. Geniş sütunda kontur örneği dikdörtgen kontrolünden bir satır az kullandı.

Her sözcük için yerel DOM Range dikdörtgenlerini ölçüp dikey konumlarına göre grupladık. Bunlar görüntülenen metin satırı ölçümleridir; tarayıcının iç satır kutusu nesnelerine erişim değildir. Hesaplanan float ve şekil ayarlarını, yüklenen görsel ölçülerini ve gerçek SVG görselindeki alfa örneklerini de kontrol ettik.

Her iki genişlikte bazı kontur satırları dikdörtgen float'ın 150px dışlama kenarının solunda başladı. Metin görselden sonra yeniden tüm sütunu kullandı. Bu gözlemler, test edilen konturun yalnızca ekran görüntüsünün görünümünü değil, gerçek yerleşimi etkilediğini gösterir.

Tam satırlar ve koordinatlar yazı tipine, tarayıcıya, paragrafa, görsele ve genişliğe bağlıdır. Cümle değiştirmek veya başka yazı tipi yüklemek bunları değiştirebilir. Bu sayıları tasarım sabitleri olarak korumak yerine gerçek içeriğinizi dar ve geniş boyutlarda test edin.

4. Şekil payını, alfayı ve yüklemeyi ayrı değerlendirin

shape-margin, şekille metin arasında yer açmak için sarma şeklini genişletir. Buradaki 10px değeri yerleşim seçimidir; her görünür glif ile çizimin her noktası arasında ölçülmüş en küçük boşluk değildir.

CSS Shapes belirtimi, normal kutu modelini korur ve şeklin etkisini float'ın dış kenar boşluğu kutusuyla sınırlar. Büyük şekil payı görsele daha büyük CSS kutusu vermez. Tasarımınız daha fazla alan istiyorsa float ölçülerini ve normal kenar boşluklarını da inceleyin.

shape-image-threshold, görsel şeklini çıkarmak için kullanılan alfa eşiğini seçer. Özgün örneğin dışı tam şeffaf, merkez tasarımı opaktır. Yumuşak gölgeler veya yarı şeffaf kenarlar bilinçli eşik seçimi ve görsel inceleme ister; eşiği değiştirmek opak arka planı şeffaf yapamaz.

Görsel URL'si şekil yüklemeye de uygun olmalıdır. CSS Shapes, görsel URL'leri için CORS isteği belirtir ve yükleme başarısızsa özel şekil kullanmadan devam eder. SVG'yi sayfanın yanında sunmak bu örnekte kaynaklar arası bağımlılığı önler. CDN barındırıyorsa o sunucunun CORS yanıtını yapılandırıp isteği ve yerleşimi inceleyin. Görselin yalnızca img öğesinde görünmesi şekil isteğinin başarılı olduğunu kanıtlamaz.

5. Metin sırasını koruyup bitmiş sayfayı kontrol edin

Test edilen dört paragrafın tamamı, br öğeleri veya sözcük bazlı konumlandırma olmadan tek metin düğümünde tam olarak aynı metni korudu. CSS, paragrafın DOM sırasını yeniden yazmadan görsel satır sonlarını değiştirdi. Ekran okuyucu oturumu çalıştırmadık veya bu kaynak kontrolünden erişilebilirlik denetimi iddiası çıkarmadık.

Görsel yokken veya yerleşim değiştiğinde paragrafı okunabilir tutun. Çok dar sütunlarda, görselin paragrafın üstünde olduğu basit düzen, yanındaki ince metin şeridinden kolay okunabilir. Kontur etkisini zorlamak için metni küçültmek yerine kendi kırılma noktanızı ve içeriğinizi kontrol edin.

Float hâlâ CSS kutusu için alan ayırır. Şekil sarması bunu metnin her tarafından aktığı genel bir engele çevirmez. Bu sol float örneğinde bitişik metin sağda sarılır ve sonra altta devam eder.

Belirtiyi kaynağında düzeltin

Uygun düz çizim yalnızca raster olarak kaldıysa ve düzenlenebilir siluet tasarımı gerekiyorsa PerfectVector'ın clipart'tan SVG'ye iş akışı bir aday geri kazanmaya yardımcı olabilir. Dış hattını ve şeffaf çevresini kaynakla karşılaştırın, ardından sayfanızdaki gerçek SVG URL'sini test edin. Şeffaf raster görsel de görsel temelli CSS şekli sağlayabilir; yalnızca alfa sarmasını etkinleştirmek için SVG gerekmez.

Elinizde temiz SVG varsa koruyun. Vektörleştirme çevredeki HTML yerleşimini kurmaz, paragraf anlam yapısını sizin yerinize korumaz veya belirli tarayıcının sarma sonucunu garanti etmez.

Sık sorulan sorular

shape-outside SVG içindeki metni sarar mı? Hayır. Bu örnek, float görselin yanındaki HTML satır içi akışını değiştirir. SVG etiketleri, SVG içine gömülü HTML ve yolu izleyen metin farklı yerleşim görevleridir.

Şeffaf görünen SVG'm neden hâlâ dikdörtgen olarak sarılıyor? Dosyada opak arka plan, başarısız şekil görseli isteği, eksik float boyutu veya float'ın etkisiz olduğu yerleşim bağlamı arayın. Beyaz pikseller şeffaf piksellerle aynı değildir.

Önce PNG'yi SVG'ye dönüştürmem gerekiyor mu? Yalnızca alfa temelli sarma için hayır. Uygun şeffaf raster görsel de şekli sağlayabilir. Düzenlenebilir tasarım veya diğer vektör gereksinimleri gerekçelendiriyorsa SVG kullanın.

Satır sonları her ekran boyutunda aynı kalır mı? Hayır. Kullanılabilir genişlik, yazı tipi ölçüleri, metin, görsel boyutu ve tarayıcı yerleşimi satırları etkiler. Gerçek içeriği birden fazla genişlikte test edin.

Kaynaklar

1. MDN shape-outside — Float alanlarını ve alfadan türetilen görsel şekillerini belgeler.
2. MDN shape-margin — Sarma şeklinin çevresine eklenen boşluğu tanımlar.
3. MDN shape-image-threshold — Görsel şekilleri için kullanılan alfa eşiğini tanımlar.
4. CSS Shapes Module Level 1 — Float kutusu sınırlarını, görsel yüklemeyi ve CORS davranışını belirtir.
5. MDN display ve flow-root — Float'ı içermek için kullanılan biçimlendirme bağlamını açıklar.

Düzenlenebilir tasarım eksikse clipart SVG adayı hazırlayın, siluetini ve şeffaflığını inceleyin, ardından desteklemeyi amaçladığınız genişliklerde sayfanızın gerçek paragraf yerleşimini doğrulayın.