Per disporre il testo di un paragrafo attorno a un’immagine che sporge dal bordo di una scheda, usa il float per l’immagine e un margine esterno negativo. Aggiungi shape-outside per ottenere un contorno curvo. Questo tutorial crea un esempio locale completo che puoi aprire in Safari sul Mac.

Cosa fa sì che il testo segua un’immagine sovrapposta?

L’immagine deve partecipare al layout float del paragrafo. CSS float posiziona un elemento su un lato del contenitore e consente al testo adiacente di disporsi accanto a esso. In questo esempio, un float a destra lascia scorrere il testo alla sua sinistra e poi sotto. MDN: float.

Tre scelte determinano il risultato: il float crea il comportamento di disposizione del testo, un margine destro negativo consente all’immagine di sporgere dal contenitore e shape-outside definisce il contorno seguito dal testo vicino. I float normali dispongono il testo attorno a una forma rettangolare; una forma può far seguire alle singole righe il profilo di un cerchio. MDN: shape-outside.

Spostare un’immagine solo visivamente non basta. Un’immagine posizionata in modo assoluto non occupa spazio nel flusso normale, quindi gli elementi circostanti si comportano come se fosse assente. Una traslazione cambia la posizione visualizzata senza riorganizzare il flusso normale del documento. Questo spiega perché un’immagine sovrapposta può coprire il testo se posizionata con position: absolute o transform: translateX(...). MDN: position, MDN: Using CSS transforms.

L’obiettivo è volutamente specifico: un’immagine circolare oltrepassa il bordo destro di una scheda di testo e i paragrafi della scheda seguono il contorno sinistro del cerchio. L’immagine e i paragrafi appartengono alla stessa area di disposizione del testo.

Crea un esempio completo sul tuo Mac

In un editor di testo semplice, crea un file chiamato overlap-wrap.html. Incolla il documento completo qui sotto, salvalo e aprilo in Safari. L’esempio include una propria immagine SVG astratta come URL di dati, quindi non ci sono file immagine, pacchetti o strumenti di compilazione da installare.

L’immagine con float compare prima dei paragrafi su cui deve agire. Questa posizione è importante perché il posizionamento dei float è limitato dai contenuti che compaiono prima nel documento. Mantenere l’intestazione prima del float consente inoltre all’intestazione di occupare tutta la larghezza dell’area di testo della scheda. W3C: Visual formatting model.

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

Con una finestra più larga di 760px, il risultato previsto è un’immagine circolare che si estende nella fascia laterale destra, con le righe dei paragrafi che ne seguono il lato sinistro. A 760px o meno, l’immagine diventa un blocco centrato sopra i paragrafi. Il breakpoint è una scelta progettuale esemplificativa; @media applica le dichiarazioni racchiuse quando la condizione corrisponde. MDN: @media.

L’immagine di esempio è decorativa, quindi l’elemento immagine usa alt="". Se la sostituisci con un’immagine che comunica informazioni, fornisci un’alternativa testuale appropriata. WHATWG distingue le immagini decorative da quelle le cui informazioni devono avere un equivalente testuale. WHATWG: Requirements for providing text to act as an alternative for images.

Come scegliere la sovrapposizione e lo spazio per il testo?

Parti dalla posizione dell’immagine, poi regola il contorno. Un float a destra viene posizionato usando il suo riquadro dei margini. In questo esempio, il margine destro negativo colloca il bordo destro dell’immagine a 88px oltre il bordo del contenuto della scheda. La scheda ha 24px di padding a destra, lasciando una sporgenza di 64px oltre lo sfondo bianco. Queste sono dimensioni calcolate per questo esempio, misurate in pixel CSS. W3C: Positioning the float.

Quantità Valore di esempio Calcolo o scopo
Larghezza dell’immagine 240px Diametro del cerchio visualizzato
Spostamento verso l’esterno dal bordo del contenuto 88px Valore assoluto del margine destro negativo
Padding della scheda 24px Spazio tra il bordo del contenuto e quello dello sfondo
Sporgenza visibile oltre lo sfondo 64px 88 − 24
Larghezza dell’immagine che resta nell’area del contenuto 152px 240 − 88
Spazio rettangolare riservato come fallback 168px 240 − 88 + 16, incluso il margine sinistro

Per il tuo layout, calcola il valore assoluto del margine negativo sommando la sporgenza desiderata al padding destro del contenitore. Per esempio, una sporgenza di 40px con un padding di 24px richiede un margine destro di -64px. Ricontrolla la larghezza residua per il testo ogni volta che ingrandisci l’immagine o riduci la larghezza del contenitore.

La versione circolare usa shape-outside: circle(50%) border-box, così la geometria segue il riquadro quadrato dell’immagine. In questo caso è utile scegliere esplicitamente border-box, perché i margini asimmetrici modificano il riquadro dei margini. Senza un riquadro di riferimento esplicito, una forma di base usa margin-box per impostazione predefinita. MDN: Basic shapes with shape-outside.

shape-margin: 16px aggiunge spazio attorno al contorno che il testo segue. Il margine sinistro positivo crea spazio per questa distanza sul lato rivolto al testo. Le forme, inclusi i relativi margini, vengono ritagliate sul riquadro dei margini del float; aumentare solo shape-margin non può estendere indefinitamente l’area di disposizione. Anche il margine destro negativo ritaglia la forma sul lato esterno, dove in questo esempio non ci sono paragrafi. W3C: CSS Shapes Module Level 1.

Per un’immagine rettangolare, cambia border-radius in 0, shape-outside in none e shape-margin in 0. Mantieni il float e i margini. In questo modo il testo si dispone attorno a lati diritti con lo stesso posizionamento verso l’esterno. Se rimuovi solo la forma e mantieni il ritaglio circolare, otterrai un’immagine circolare con uno spazio rettangolare per il testo.

Quali limiti del contenitore influiscono sulla disposizione del testo?

La scheda usa display: flow-root per creare un contesto di formattazione a blocchi che contiene verticalmente il float. In questo modo l’altezza della scheda tiene conto dell’immagine anche quando il testo è breve. Inoltre, l’area di disposizione del testo resta indipendente dai float esterni. MDN: Block formatting context.

Mantieni i paragrafi nel normale flusso a blocchi all’interno di quest’area. Se l’immagine è un elemento diretto di flex o grid, il suo float non produrrà questa disposizione del testo attorno ai paragrafi. Allo stesso modo, se assegni un contesto di formattazione a blocchi a un contenitore separato dei paragrafi, il float esterno non agirà sui suoi contenuti. Una griglia esterna può posizionare l’intera scheda; l’interno della scheda può comunque usare il flusso normale. MDN: Block formatting context.

Controlla separatamente il ritaglio. L’esempio lascia visibile l’overflow, così la sporgenza può essere mostrata. Usare overflow per contenere i float può causare ritagli o barre di scorrimento; flow-root consente di contenere i float senza dover ricorrere a questa scelta. Controlla anche i componenti antenati se l’immagine scompare esattamente sul bordo di uno di essi. MDN: Containing internal floats.

CSS Shapes ha anche un limite direzionale: un float a destra consente al testo di disporsi alla sua sinistra, mentre un float a sinistra consente al testo di disporsi alla sua destra. Un singolo float non può creare passaggi di testo su entrambi i lati di un’immagine centrata. Per questo obiettivo, la disposizione supportata prevede un float sul bordo. W3C: CSS Shapes and float behavior.

Puoi usare questo approccio con Tailwind CSS?

Sì. In un progetto Tailwind esistente, float-right produce float: right, mentre float-none rimuove il float. Tailwind fornisce queste utility; il browser si occupa comunque dell’impaginazione del testo. Tailwind CSS: float.

Per la dichiarazione del contorno, la sintassi delle proprietà arbitrarie di Tailwind può esprimere [shape-outside:circle(50%)_border-box] e [shape-margin:16px]. Il trattino basso rappresenta lo spazio prima di border-box. Sono frammenti di nomi di classi per un progetto Tailwind già configurato, non un’alternativa al documento completo qui sopra. Quando lo adatti, mantieni le stesse dimensioni, gli stessi margini e il layout del contenitore, oltre al ripristino per le finestre strette. Tailwind CSS: Adding custom styles.

Come si può correggere una disposizione del testo che non sembra giusta?

Usa l’esempio locale come punto di partenza, poi introduci gli stili esistenti uno alla volta. Questa sequenza verifica le condizioni che determinano il layout:

  1. Verifica prima la disposizione rettangolare. Imposta temporaneamente shape-outside: none. Se il testo continua sotto l’immagine, controlla se l’immagine è flottante, posizionata in modo assoluto o un elemento diretto di flex/grid.
  2. Controlla l’ordine nel documento. Posiziona il float prima dei paragrafi che devono disporre il testo attorno a esso.
  3. Controlla l’area di disposizione del testo. Mantieni il float e il contenuto dei paragrafi nello stesso contesto di formattazione a blocchi; rimuovi eventuali contesti indipendenti non necessari dal contenitore dei paragrafi.
  4. Controlla il contorno. Ripristina il cerchio e il suo riferimento esplicito a border-box. Verifica che l’immagine visualizzata sia quadrata prima di applicare un ritaglio circolare.
  5. Controlla la fascia laterale. Aumenta la larghezza della finestra e cerca eventuali ritagli sulla scheda o sui suoi antenati. Verifica che la pagina riservi spazio esterno sufficiente per la sporgenza.
  6. Controlla il layout per finestre strette. Ridimensiona la finestra superando il breakpoint dell’esempio e verifica che il float e il margine negativo vengano entrambi ripristinati.

Questi controlli seguono le regole documentate per il posizionamento dei float, i contesti di formattazione e i riquadri di riferimento delle forme. Evita di aggiungere interruzioni di riga manuali per correggere singole righe: vincolerebbero il testo a una specifica larghezza della finestra.

MDN indica che shape-outside è ampiamente disponibile, pur segnalando che il supporto può variare per alcune parti della sintassi. Questo esempio usa la forma documentata circle(). Confronta la pagina nei browser per Mac che intendi supportare e valuta lo spazio e la leggibilità, senza pretendere che le righe finiscano tutte nello stesso punto. Se la dichiarazione della forma non è disponibile, il float mantiene la disposizione rettangolare. MDN: shape-outside.

Per il layout definitivo, scegli insieme le dimensioni dell’immagine e la sporgenza, lascia larghezza sufficiente per il testo e mantieni la versione sovrapposta in verticale come fallback. Quando queste dimensioni funzionano, usa il contorno per rifinire la spaziatura attorno all’immagine. In questo modo il paragrafo può adattarsi quando cambiano il testo o la larghezza disponibile.

Fonti