Bir kartın kenarından taşan görselin çevresine paragraf metnini sarmak için görseli float yapın ve negatif dış kenar boşluğu kullanın. Eğri bir kontur için shape-outside ekleyin. Bu eğitim, Mac'inizde Safari'de açabileceğiniz eksiksiz bir yerel örnek oluşturur.

Metin, dışarı taşan bir görselin çevresine nasıl sarılır?

Görselin paragrafın float düzenine katılması gerekir. CSS float, bir öğeyi kapsayıcısının bir kenarına yerleştirir ve bitişik metnin yanında sarılmasını sağlar. Bu örnekte sağa float yapmak, metnin görselin solunda ve ardından altında akmasını sağlar. MDN: float.

Sonucu üç seçim belirler: float, metin sarma davranışını oluşturur; negatif sağ kenar boşluğu görselin kapsayıcıdan taşmasını sağlar; shape-outside ise yakındaki metnin izleyeceği konturu tanımlar. Sıradan float'lar dikdörtgen biçiminde metin sarma sağlar; bir şekil, satırların bir daireyi izlemesini sağlayabilir. MDN: shape-outside.

Bir görseli görsel olarak taşımak yeterli değildir. Mutlak konumlandırılmış bir görsel normal akışta yer kaplamaz; bu nedenle çevresindeki öğeler görsel yokmuş gibi davranır. Öteleme, normal belge akışını yeniden düzenlemeden çizilen konumu değiştirir. Bu davranışlar, position: absolute veya transform: translateX(...) kullanılarak konumlandırıldığında taşan bir görselin metnin üzerine neden binebildiğini açıklar. MDN: position, MDN: CSS dönüşümlerini kullanma.

Buradaki görev özellikle belirgindir: tek bir dairesel görsel, tek bir metin kartının sağ kenarını aşar ve kartın paragrafları dairenin sol konturunu izler. Görsel ve paragraflar aynı metin sarma bölgesinde yer alır.

Mac'inizde eksiksiz bir örnek oluşturun

Düz metin düzenleyicide overlap-wrap.html adlı bir dosya oluşturun. Aşağıdaki belgenin tamamını yapıştırıp kaydedin ve Safari'de açın. Örnek, veri URL'si olarak kendi soyut SVG görselini içerir; bu nedenle yüklemeniz gereken görsel dosyası, paket veya derleme aracı yoktur.

Yüzen görsel, etkilemesi gereken paragraflardan önce görünür. Bu yerleşim önemlidir; çünkü float konumlandırması, belgede kendisinden önce gelen içerikle sınırlıdır. Başlığı float'tan önce tutmak, başlığın kartın metin genişliğinin tamamını kullanmasını da sağlar. W3C: Görsel biçimlendirme modeli.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Overlapping image and paragraph wrapping</title>
  <style>
    * { box-sizing: border-box; }
    body {
      margin: 0;
      padding: 32px 96px 32px 32px;
      background: #eef1f5;
      color: #243247;
      font: 18px/1.65 system-ui, sans-serif;
    }
    .card {
      display: flow-root;
      width: 100%;
      max-width: 640px;
      margin: 0 auto;
      padding: 24px;
      background: white;
      box-shadow: 0 0 0 1px #cbd3df;
      overflow: visible;
    }
    .card h2 {
      margin: 0 0 16px;
      font-size: 26px;
      line-height: 1.25;
    }
    .card p { margin: 0 0 16px; }
    .card p:last-child { margin-bottom: 0; }
    .art {
      display: block;
      float: right;
      width: 240px;
      height: 240px;
      margin: 0 -88px 16px 16px;
      border-radius: 50%;
      shape-outside: circle(50%) border-box;
      shape-margin: 16px;
    }
    @media (max-width: 760px) {
      body { padding: 16px; }
      .art {
        float: none;
        width: min(240px, 100%);
        height: auto;
        margin: 0 auto 24px;
        shape-outside: none;
      }
    }
  </style>
</head>
<body>
  <article class="card">
    <h2>Study A: circles and spacing</h2>
    <img class="art" width="240" height="240" alt=""
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Crect width='240' height='240' fill='%233a628b'/%3E%3Ccircle cx='90' cy='85' r='60' fill='%23b9d8eb'/%3E%3Ccircle cx='165' cy='170' r='45' fill='%238db5cc'/%3E%3C/svg%3E">
    <p>Panel A pairs a circular graphic with a continuous passage of
      sample text. Follow the right edge of this paragraph as each
      line approaches the curved outline. Near the widest part of
      the circle, the available space becomes narrower.</p>
    <p>Panel B continues the same passage with a second paragraph.
      The graphic extends into the outer gutter while the words
      remain inside the white card. As the contour curves inward,
      later lines can use more of the available width.</p>
    <p>Panel C provides enough additional text to show the transition
      below the graphic. Once the passage continues beyond the
      wrapping region, its lines return to the full content width.
      Resize the window to compare the desktop arrangement with
      the stacked layout used in a narrower window.</p>
  </article>
</body>
</html>

Görüntü alanı 760px değerinden geniş olduğunda amaçlanan sonuç, sağdaki boşluğa taşan dairesel bir grafiğin ve sol tarafını izleyen paragraf satırlarının görünmesidir. Genişlik 760px veya daha az olduğunda görsel, paragrafların üzerinde ortalanmış bir bloğa dönüşür. Kesme noktası, örnek amaçlı bir tasarım tercihidir; @media, sorgusu eşleştiğinde kapsadığı bildirimleri uygular. MDN: @media.

Örnek grafik dekoratif olduğundan görsel öğesinde alt="" kullanılır. Bunu bilgi aktaran bir grafikle değiştirirseniz uygun bir metin alternatifi sağlayın. WHATWG, dekoratif görselleri, bilgilerinin metinle eşdeğerinin sunulması gereken görsellerden ayırır. WHATWG: Görseller için alternatif işlevi görecek metin sağlama gereksinimleri.

Taşmayı ve metin aralığını nasıl belirlersiniz?

Önce görselin konumunu, ardından konturu ayarlayın. Sağa float edilmiş öğe, kenar boşluğu kutusu kullanılarak yerleştirilir. Bu örnekte negatif sağ kenar boşluğu, görselin sağ kenarını kartın içerik kenarından 88px dışarı taşır. Kartın sağ dolgusu 24px olduğundan görsel, beyaz arka planın dışına 64px taşar. Bunlar bu örnek için türetilmiş boyutlardır ve CSS pikselleriyle ölçülür. W3C: Float konumlandırma.

Değer Örnek değer Hesaplama veya amaç
Görsel genişliği 240px Görüntülenen dairenin çapı
İçerik kenarından dışarı kayma 88px Negatif sağ kenar boşluğunun mutlak değeri
Kart dolgusu 24px İçerik kenarı ile arka plan kenarı arasındaki boşluk
Arka plan dışındaki görünür taşma 64px 88 − 24
İçerik alanının içinde kalan görsel genişliği 152px 240 − 88
Dikdörtgen yedek yerleşim payı 168px Sol kenar boşluğu dahil 240 − 88 + 16

Kendi düzeninizde negatif kenar boşluğunun mutlak değerini, istediğiniz taşma miktarı ile kapsayıcının sağ dolgusunu toplayarak hesaplayın. Örneğin 24px dolguyla 40px taşma için sağ kenar boşluğunu -64px yapın. Görseli büyüttüğünüzde veya kapsayıcı genişliğini azalttığınızda kalan metin genişliğini yeniden kontrol edin.

Dairesel sürümde, geometrinin kare görsel kutusunu izlemesi için shape-outside: circle(50%) border-box kullanılır. Asimetrik kenar boşlukları kenar boşluğu kutusunu değiştirdiğinden, burada açıkça border-box seçmek yararlıdır. Açık bir referans kutusu belirtilmediğinde temel şekil varsayılan olarak margin-box kullanır. MDN: shape-outside ile temel şekiller.

shape-margin: 16px, metin sarma konturunun çevresine boşluk ekler. Pozitif sol kenar boşluğu, metnin bulunduğu tarafta bu boşluk için yer sağlar. Şekiller ve bunların şekil kenar boşlukları, float'ın kenar boşluğu kutusuyla kırpılır; tek başına shape-margin değerini artırmak metin sarma alanını sınırsızca genişletemez. Negatif sağ kenar boşluğu da şekli, bu örnekte paragraf metni bulunmayan dış tarafta kırpar. W3C: CSS Shapes Module Level 1.

Dikdörtgen bir görsel için border-radius değerini 0, shape-outside değerini none ve shape-margin değerini 0 olarak değiştirin. Float'ı ve kenar boşluklarını koruyun. Böylece aynı dış yerleşimle düz kenarlı metin sarma elde edersiniz. Yalnızca şekli kaldırıp dairesel kırpmayı korursanız dairesel bir görsel kalır, ancak metin için dikdörtgen boşluk ayrılır.

Metin sarmayı hangi kapsayıcı sınırları etkiler?

Kart, float'ı dikey olarak kapsayan bir blok biçimlendirme bağlamı oluşturmak için display: flow-root kullanır. Böylece metin kısa olsa bile kartın yüksekliği görseli hesaba katar. Ayrıca bu metin sarma bölgesini dış float'lardan bağımsız tutar. MDN: Blok biçimlendirme bağlamı.

Paragrafları bu bölgenin içinde sıradan blok akışında tutun. Görsel doğrudan flex veya grid öğesiyse float, paragrafların etrafında bu şekilde metin sarma sağlamaz. Benzer şekilde, ayrı bir paragraf sarmalayıcısına kendi blok biçimlendirme bağlamını vermek, dış float'ı bu sarmalayıcının içeriğinden yalıtır. Dıştaki bir grid tüm kartı konumlandırabilir; kartın içi yine akış düzenini kullanabilir. MDN: Blok biçimlendirme bağlamı.

Kırpmayı ayrıca kontrol edin. Örnek, taşan kısmın çizilebilmesi için taşmayı görünür bırakır. Float'ları kapsamak için taşma özelliğini kullanmak kırpmaya veya kaydırma çubuklarına yol açabilir; flow-root bu seçimi gerektirmeden float'ı kapsar. Görsel tam olarak bir üst öğenin kenarında kayboluyorsa üst bileşenleri de inceleyin. MDN: Dahili float'ları kapsama.

CSS Shapes'ın yönle ilgili bir sınırı da vardır: sağ float, metnin solunda; sol float ise sağında sarılmasına izin verir. Tek bir float, ortalanmış bir görselin her iki yanında metin geçitleri oluşturamaz. Bu görev için kenarda duran bir float desteklenen düzenlemedir. W3C: CSS Shapes ve float davranışı.

Bu yaklaşımı Tailwind CSS ile kullanabilir misiniz?

Evet. Mevcut bir Tailwind projesinde float-right float: right üretirken, float-none float'ı kaldırır. Bu yardımcı sınıfları Tailwind sağlar; metin düzenini yine tarayıcı yapar. Tailwind CSS: float.

Kontur bildirimi için Tailwind'in keyfi özellik söz dizimi, [shape-outside:circle(50%)_border-box] ve [shape-margin:16px] ifadelerini kullanabilir. Alt çizgi, border-box öncesindeki boşluğu temsil eder. Bunlar zaten yapılandırılmış bir Tailwind projesi için sınıf adı parçalarıdır; yukarıdaki eksiksiz belgenin yerine geçmezler. Bunu uyarlarken aynı boyutları, kenar boşluklarını, kapsayıcı düzenini ve dar pencere sıfırlamasını koruyun. Tailwind CSS: Özel stiller ekleme.

Metin sarma yanlış görünüyorsa nasıl teşhis edersiniz?

Yerel örneği başlangıç noktası alın ve ardından mevcut stillerinizi her seferinde bir değişiklik yaparak ekleyin. Bu adımlar, düzeni belirleyen koşulları kontrol eder:

  1. Önce dikdörtgen metin sarmayı doğrulayın. Geçici olarak shape-outside: none ayarlayın. Metin yine görselin altına uzanıyorsa görselin float olup olmadığını, mutlak konumlandırılıp konumlandırılmadığını ya da doğrudan bir flex/grid öğesi olup olmadığını inceleyin.
  2. Belge sırasını kontrol edin. Float'ı, çevresinde metin sarılmasını istediğiniz paragraflardan önce yerleştirin.
  3. Metin sarma bölgesini kontrol edin. Float ile paragraf içeriğini aynı blok biçimlendirme bağlamında tutun; paragraf sarmalayıcısındaki gereksiz bağımsız bağlamı kaldırın.
  4. Konturu kontrol edin. Daireyi ve açıkça belirtilen border-box referansını geri yükleyin. Dairesel kırpma uygulamadan önce görüntülenen görselin kare olduğunu doğrulayın.
  5. Boşluğu kontrol edin. Görüntü alanının genişliğini artırın ve kartta ya da üst öğelerinde kırpma olup olmadığını inceleyin. Sayfada taşma için yeterli dış alan ayrıldığını doğrulayın.
  6. Dar düzeni kontrol edin. Örneğin kesme noktasından geçecek şekilde pencereyi yeniden boyutlandırın ve float ile negatif kenar boşluğunun sıfırlandığını doğrulayın.

Bu kontroller, float yerleşimi, biçimlendirme bağlamları ve şekil referans kutuları için belgelenmiş kuralları izler. Tek tek satırları düzeltmek için elle satır sonları eklemekten kaçının; bunlar metni belirli bir pencere boyutuna bağlar.

MDN, shape-outside özelliğinin yaygın olarak kullanılabildiğini, ancak söz diziminin bazı bölümlerindeki desteğin değişebileceğini belirtir. Bu örnek, belgelenmiş circle() biçimini kullanır. Desteklemeyi planladığınız Mac tarayıcılarında sayfayı karşılaştırın; satır sonlarının birebir aynı olmasını beklemek yerine boşluğa ve okunabilirliğe bakın. Şekil bildirimi kullanılamıyorsa float, dikdörtgen metin sarmayı sürdürür. MDN: shape-outside.

Tamamlanmış düzende görsel boyutunu ve taşma miktarını birlikte seçin, metin bölümü için yeterli genişlik bırakın ve dar ekrandaki yedek düzeni koruyun. Bu boyutlar işe yaradığında görselin çevresindeki boşluğu iyileştirmek için konturu kullanın. Böylece metin veya kullanılabilir genişlik değiştiğinde paragraf yeniden akabilir.

Kaynaklar