Cos'è il Text Flow? Controllare Come il Testo Avvolge gli Oggetti nel Design

Text flow (o text wrap) governa come il testo si muove attorno, tra e accanto a elementi non testuali—immagini, riquadri di citazione, barre laterali, tabelle, forme—in un layout.

Controlli Principali

• Margini: Spazio bianco ai bordi della pagina. Margini più ampi = sensazione ariosa, letteraria; stretti = denso, tecnico.
• Intercolonne / Gap tra colonne: Spazio tra le colonne. 3–6 mm tipico per la stampa; 16–24 px per il web.
• Modalità di Text Wrap:
  • Nessuno: Il testo ignora l'oggetto (sovrappone).
  • Bounding Box: Avvolgimento rettangolare attorno al telaio dell'oggetto.
  • Contour/Shape: Segue il canale alfa o il percorso vettore (es. attorno a una sagoma).
  • Jump/Next Column: Forza il testo alla colonna/pagina successiva.
• Offset/Imbottitura: Buffer tra il bordo dell'oggetto e il testo (previene l'affollamento).
• Opzioni Keep: Previene vedove/orfani, mantiene intestazioni con paragrafi.

In Pratica (InDesign, Illustrator, Figma, CSS)

• Stampa (InDesign): Finestra → pannello Text Wrap. Seleziona oggetto → scegli forma di avvolgimento → imposta offset.
• Web (CSS): float, shape-outside, margin, column-gap, overflow-wrap.
• Figma/Sketch: Non nativo—simula con frame auto-layout o posizionamento manuale.

Principi di Design

• Coerenza: Stesso offset di avvolgimento in tutta la pubblicazione.
• Leggibilità: Evita colonne strette (< 45 caratteri/riga) accanto a immagini avvolte.
• Gerarchia: Citazioni in riquadro, barre laterali usano un avvolgimento distinto per segnalare "riquadro laterale".
• Accessibilità: Gli screen reader linearizzano—assicura che l'ordine DOM logico corrisponda al flusso visivo.

Un buon text flow è invisibile; un cattivo fa inciampare i lettori. Padroneggia il pannello, poi progetta per l'occhio, non per lo strumento.