Testo HTML attorno a un SVG con i float CSS

Per far scorrere il testo HTML attorno a una sagoma SVG, applica un float all'immagine, assegnale dimensioni esplicite e imposta shape-outside sull'URL dell'SVG trasparente. Aggiungi shape-margin per lasciare spazio attorno al contorno. Il paragrafo resta normale HTML; l'SVG fornisce l'immagine usata per calcolare il confine attorno al quale il testo scorre.

Questo funziona all'esterno dell'SVG. Non manda a capo un elemento SVG text e non curva le lettere lungo un tracciato. L'esempio sotto usa una sagoma trasparente originale e un paragrafo completo, senza parole posizionate manualmente o interruzioni di riga inserite.

Scegli la disposizione del testo che ti serve

Il file SVG non contiene la disposizione del paragrafo circostante. Copiare l'immagine in un altro documento non trasferisce questa relazione HTML/CSS.

1. Assegna al float dimensioni e immagine trasparente

Il riferimento MDN di shape-outside descrive la proprietà come un modo per cambiare l'area del float attorno alla quale scorre il contenuto inline adiacente. Con il valore predefinito l'area segue il riquadro dei margini del float. Un URL immagine ricava invece la forma dall'alfa dell'immagine, cioè dalla trasparenza.

Il colore visibile non è il segnale del confine. Uno sfondo bianco opaco ha comunque alfa e può far comportare l'illustrazione come un rettangolo. Controlla il file stesso, non soltanto l'aspetto della grafica bianca su una pagina bianca. Conserva la trasparenza all'esterno della sagoma.

Salva questa grafica originale come 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>

Le sue dimensioni intrinseche sono 150 × 180 e il CSS usa la stessa larghezza e altezza. Mantenere coerente il rapporto d'aspetto rende facile esaminare la relazione fra grafica visualizzata e immagine della forma.

L'immagine dell'esempio è decorativa, quindi ha un attributo alt vuoto. Fornisci a un'immagine significativa un'alternativa testuale adatta alla pagina; farle scorrere attorno il testo non ne comunica automaticamente il significato.

2. Esegui l'esempio HTML completo

Salva questo codice come index.html accanto a 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>

Servi la cartella via HTTP, per esempio con python -m http.server 8000, e apri http://localhost:8000/index.html. I due file condividono così la stessa origine. Un URL di file locale non è la configurazione di caricamento provata qui.

Cambia class="sample narrow contour" in class="sample narrow" per confrontare il normale scorrimento rettangolare attorno al float. Cambia narrow in wide per provare la colonna da 520 pixel. Paragrafo e immagine rimangono invariati.

Il riferimento display descrive flow-root come creazione di un contesto di formattazione a blocchi. Qui contiene l'immagine flottante nel proprio campione. Non posiziona le parole: lo fa il layout inline del browser.

3. Verifica le righe renderizzate a più larghezze

Abbiamo eseguito quattro campioni visibili in Chromium 155 usando Arial a 16px con interlinea di 24px. L'immagine rimaneva 150 × 180px mentre le colonne avevano larghezze di contenuto fisse di 360px e 520px. Entrambi i campioni del contorno usavano shape-margin: 10px e shape-image-threshold: 0.5.

Il contorno stretto cambiava gli a capo senza ridurre il numero totale di righe. Alla larghezza maggiore, il campione del contorno usava una riga in meno rispetto al controllo rettangolare.

Abbiamo misurato i rettangoli DOM Range nativi per ogni parola e li abbiamo raggruppati per posizione verticale. Sono misure delle righe di testo renderizzate, non un accesso agli oggetti interni del browser che rappresentano i riquadri di riga. Abbiamo controllato anche le impostazioni calcolate di float e forma, le dimensioni dell'immagine caricata e campioni alfa nell'immagine SVG effettiva.

A entrambe le larghezze, alcune righe del contorno iniziavano a sinistra del confine di esclusione a 150px del float rettangolare. Dopo l'immagine, il testo tornava anche a occupare tutta la colonna. Queste osservazioni mostrano che il contorno provato influiva sul layout reale, anziché cambiare soltanto l'aspetto di uno screenshot.

Righe e coordinate esatte dipendono da font, browser, paragrafo, immagine e larghezza. Sostituire una frase o caricare un altro font può cambiarle. Prova il contenuto effettivo a dimensioni strette e ampie invece di conservare questi numeri come costanti progettuali.

4. Tratta separatamente margine della forma, alfa e caricamento

shape-margin espande la forma di scorrimento per lasciare spazio fra essa e il testo. Il valore di 10px qui è una scelta di layout, non una distanza minima misurata fra ogni glifo visibile e ogni punto dell'illustrazione.

La specifica CSS Shapes mantiene il normale modello a riquadri e limita l'effetto della forma al riquadro dei margini del float. Un grande margine della forma non assegna all'immagine un riquadro CSS più grande. Se il disegno richiede più spazio, esamina anche dimensioni e margini ordinari del float.

shape-image-threshold sceglie la soglia alfa usata per estrarre la forma dall'immagine. Il campione originale ha l'esterno completamente trasparente e la grafica centrale opaca. Ombre morbide o bordi traslucidi richiedono una soglia scelta intenzionalmente e un controllo visivo; cambiarla non può rendere trasparente uno sfondo opaco.

L'URL dell'immagine deve anche essere idoneo al caricamento della forma. CSS Shapes specifica una richiesta CORS per gli URL immagine e torna all'assenza di una forma personalizzata se il caricamento fallisce. Servire l'SVG accanto alla pagina evita una dipendenza da un'altra origine in questo esempio. Se lo ospita una CDN, configura la risposta CORS di quel server e ispeziona richiesta e layout. Vedere l'immagine in un elemento img non dimostra da solo che la richiesta della forma sia riuscita.

5. Conserva l'ordine del testo e controlla la pagina finita

Tutti e quattro i paragrafi provati mantenevano esattamente lo stesso testo in un unico nodo testuale, senza elementi br o posizionamento per parola. Il CSS cambiava gli a capo visivi senza riscrivere l'ordine DOM del paragrafo. Non abbiamo eseguito una sessione con lettore di schermo né rivendicato un audit di accessibilità sulla base di quel controllo del sorgente.

Mantieni leggibile il paragrafo quando l'immagine non è disponibile o il layout cambia. Per colonne molto strette, una disposizione più semplice con l'immagine sopra il paragrafo può essere più leggibile di una sottile striscia di testo accanto. Verifica il tuo breakpoint e il contenuto invece di rimpicciolire il testo per forzare un effetto di contorno.

Il float riserva comunque un riquadro CSS. Lo scorrimento sulla forma non lo trasforma in un ostacolo generico aggirabile dal testo su ogni lato. In questo esempio con float a sinistra, il testo adiacente scorre a destra e prosegue poi sotto.

Risolvi il sintomo alla fonte

Se un'illustrazione piatta adatta sopravvive soltanto come raster e ti serve una sagoma modificabile, il flusso da clipart a SVG di PerfectVector può aiutarti a recuperare un candidato. Confrontane contorno e trasparenza circostante con il sorgente, poi prova l'URL SVG effettivo nella pagina. Anche un'immagine raster trasparente può fornire una forma CSS basata su immagine; SVG non è necessario soltanto per attivare lo scorrimento basato sull'alfa.

Conserva un SVG pulito esistente quando lo hai. La vettorializzazione non costruisce il layout HTML circostante, non preserva al posto tuo la semantica del paragrafo e non garantisce il risultato di scorrimento di un browser specifico.

Domande frequenti

shape-outside manda a capo il testo dentro un SVG? No. Questo esempio cambia il flusso inline HTML accanto a un'immagine flottante. Etichette SVG, HTML incorporato nell'SVG e testo che segue un tracciato sono attività di layout diverse.

Perché il mio SVG apparentemente trasparente fa ancora scorrere il testo come un rettangolo? Controlla la presenza di uno sfondo opaco nel file, una richiesta della forma fallita, dimensioni del float mancanti o un contesto di layout in cui il float è inattivo. I pixel bianchi non sono pixel trasparenti.

Devo prima convertire un PNG in SVG? Non per il solo scorrimento basato sull'alfa. Anche un raster trasparente adatto può fornire la forma. Usa SVG quando grafica modificabile o altri requisiti vettoriali lo giustificano.

Gli a capo resteranno uguali a ogni dimensione dello schermo? No. Larghezza disponibile, metriche del font, testo, dimensioni dell'immagine e layout del browser influenzano le righe. Prova il contenuto effettivo a più di una larghezza.

Fonti

1. MDN shape-outside — Documenta aree del float e forme immagine ricavate dall'alfa.
2. MDN shape-margin — Definisce lo spazio aggiunto attorno alla forma di scorrimento.
3. MDN shape-image-threshold — Definisce la soglia alfa usata per le forme immagine.
4. CSS Shapes Module Level 1 — Specifica limiti del riquadro float, caricamento immagini e comportamento CORS.
5. MDN display e flow-root — Spiega il contesto di formattazione usato per contenere il float.

Se manca grafica modificabile, prepara un SVG candidato dalla clipart, esamina sagoma e trasparenza e verifica il layout reale del paragrafo nella pagina alle larghezze che intendi supportare.