Per far scorrere un unico articolo in aree in stile rivista su Mac, usa le colonne CSS per un layout nel browser oppure caselle di testo collegate in Pages per aree posizionate liberamente. CSS Regions descriveva il flusso automatico tra caselle separate del browser, ma i browser desktop attuali non lo supportano. Compatibilità di CSS Regions

Questa guida ti aiuta a scegliere e creare un layout per un articolo continuo: il testo inizia nell’area A, prosegue nella B e termina nella C. L’esempio per il browser usa testo fittizio in un documento locale che controlli tu; non modifica un sito web pubblico esistente.

È possibile concatenare automaticamente regioni di testo separate nel browser?

La bozza CSS Regions del W3C descrive proprio questa disposizione. Una sorgente inserisce il contenuto in un flusso con nome usando flow-into, mentre le caselle di destinazione lo ricevono usando flow-from. Le destinazioni formano una catena nell’ordine del documento, consentendo al contenuto di proseguire tra caselle con posizioni e dimensioni diverse. Tuttavia, il documento pubblicato è ancora una bozza di lavoro datata 9 ottobre 2014. Il fatto che una specifica descriva una funzione non ne garantisce la disponibilità nei browser. CSS Regions Module Level 1

Le informazioni attuali sulla compatibilità indicano che CSS Regions non è supportato in Safari, Chrome, Firefox ed Edge. WebKit registra inoltre la rimozione della funzione in una segnalazione di implementazione completata. Aggiungere le vecchie dichiarazioni a una pagina moderna, quindi, non consente di concatenare gli articoli in modo affidabile. Compatibilità di CSS Regions, Rimozione del supporto per CSS Regions

Per prima cosa, decidi quale parte del layout desiderato è essenziale. Tre colonne uguali, tre caselle posizionate indipendentemente e tre pagine stampate richiedono strumenti diversi.

Risultato richiesto Soluzione pratica Limite
Articolo continuo in colonne regolari nel browser Layout CSS nativo multicolonna Le colonne appartengono a un unico contenitore
Pagine generate dal browser per la stampa o il PDF Paged.js La paginazione richiede il relativo script e la configurazione del documento
Testo che scorre in caselle posizionate liberamente su Mac Caselle di testo collegate in Pages Il risultato è un documento Pages
Flusso automatico in caselle arbitrarie del browser Implementazione personalizzata del layout La funzione CSS Regions dismessa non può offrirlo

Queste scelte seguono i modelli documentati: MDN descrive le colonne generate, Paged.js descrive la frammentazione in pagine e Apple documenta le sequenze di caselle di testo collegate. Considera la tabella una guida decisionale basata su queste funzionalità. Layout multicolonna, Come funziona Paged.js, Collegare caselle di testo in Pages su Mac

Creare un articolo continuo nel browser con le colonne CSS

Scegli questa soluzione quando le colonne regolari soddisfano il progetto. Mantieni il testo dell’articolo in un unico contenitore e lascia che sia il browser a determinare dove termina ogni colonna. MDN documenta che il layout multicolonna crea un flusso continuo, ma non consente di assegnare alle colonne larghezze diverse in modo indipendente né colori di sfondo individuali. Layout multicolonna

Sul Mac, apri TextEdit e scegli File > Nuovo, quindi Formato > Converti in testo semplice. Incolla il documento completo riportato sotto, salvalo come article-columns.html e, se richiesto, scegli Usa .html. Questi sono i passaggi documentati da Apple per creare un file HTML in TextEdit. Lavorare con documenti HTML in TextEdit sul Mac

Quello che segue è un documento HTML completo, con tutti gli stili e il contenuto di esempio inclusi. Non richiede librerie, risorse di rete o JavaScript. Apri il file salvato nel browser per esaminare il layout; qui il rendering non è stato verificato.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Article A: Column Study</title>
  <style>
    * { box-sizing: border-box; }
    body {
      margin: 0;
      padding: 24px;
      background: #f4f1e9;
      color: #262626;
      font: 18px/1.6 Georgia, serif;
    }
    main {
      max-width: 960px;
      margin-inline: auto;
    }
    h1 {
      margin: 0 0 24px;
      font-size: 2rem;
      line-height: 1.15;
    }
    article {
      columns: 260px 3;
      column-gap: 24px;
      column-rule: 1px solid #bdb7ab;
      column-fill: balance;
      overflow-wrap: anywhere;
    }
    p { margin: 0 0 1em; }
    @media (max-width: 640px) {
      article { columns: auto; }
    }
  </style>
</head>
<body>
  <main>
    <h1>Article A: Column Study</h1>
    <article aria-label="Synthetic article">
      <p>Section A begins with a study of simple forms. A square,
      a circle, and a narrow rectangle sit on a pale surface.
      Their spacing establishes a steady visual rhythm.</p>
      <p>The first arrangement leaves generous space around each
      form. The second brings the forms closer together. Both
      arrangements use the same pieces in a different order.</p>
      <p>Section B considers the surface beneath the forms.
      A smooth sheet creates an even field. A folded sheet
      introduces a line that changes the composition.</p>
      <p>A small label identifies each arrangement. Label A
      belongs to the wider spacing, while label B belongs to
      the closer spacing. The labels remain part of the text.</p>
      <p>Section C returns to the complete composition. The
      rectangle sits near one edge, with the circle beside it.
      The square completes the sequence at the other end.</p>
      <p>The final arrangement leaves an open area in the
      center. All three forms remain visible, and the text
      ends here with the marker END-A.</p>
    </article>
  </main>
</body>
</html>

La forma abbreviata columns richiede una larghezza preferita di 260 pixel CSS e un massimo di tre colonne. Il browser determina quante colonne entrano. Alla larghezza completa di 960 pixel dell’area di contenuto dell’esempio, tre colonne separate da due spazi di 24 pixel avrebbero, a titolo illustrativo, una larghezza di (960 − 2 × 24) ÷ 3 = 304 pixel CSS ciascuna. Questo calcolo è stato verificato; non si tratta di una misurazione eseguita nel browser. Layout multicolonna

Il titolo resta sopra l’articolo perché si trova all’esterno del contenitore delle colonne. Tutti e sei i paragrafi mantengono l’ordine originale al suo interno. Ridimensiona la finestra del browser per esaminare il layout più stretto, poi cerca il marcatore finale END-A per verificare che sia possibile raggiungere la fine dell’articolo.

Controllare il riempimento delle colonne senza nascondere il resto

Nell’esempio, l’altezza dell’articolo è automatica e si usa column-fill: balance. Il bilanciamento cerca di distribuire il contenuto tra le colonne. Se invece il progetto richiede di riempire una colonna fino a un’altezza specificata prima di proseguire, l’impostazione pertinente è column-fill: auto. MDN documenta differenze di interoperabilità e osserva che Chrome consulta auto solo quando il contenitore ha una dimensione nella direzione del blocco, come un’altezza in questo layout orizzontale. column-fill

Un’altezza fissa introduce un’importante condizione di errore: il testo in eccesso può creare altre colonne in orizzontale oltre il contenitore. Impostare un’altezza non limita l’articolo alle colonne visibili. MDN documenta esplicitamente questo comportamento di overflow. Evita di nascondere il contenuto rimanente con overflow: hidden. Gestire l’overflow nel layout multicolonna

Per un layout di lettura, mantieni l’altezza automatica usata sopra, a meno che la continuazione orizzontale non sia intenzionale. Se provi colonne di altezza fissa, controlla l’intera estensione orizzontale e verifica di nuovo il marcatore finale dopo ogni modifica della dimensione del carattere o della larghezza. Una prima schermata ordinata non dimostra che l’intero articolo sia visibile.

Considera le interruzioni di paragrafo come struttura del contenuto, non come punti di fine colonna prestabiliti. Per brevi elementi raggruppati puoi usare break-inside: avoid per scoraggiare la frammentazione, come mostra MDN con le schede. Applicare questa regola a ogni paragrafo lungo può rendere la disposizione meno flessibile, quindi usala solo quando mantenere un’unità specifica in un unico blocco agevola la lettura. Layout multicolonna

E se le regioni devono avere forme o posizioni diverse?

Considera un layout astratto con un’ampia regione A sopra una regione B più stretta e una regione C separata nell’angolo in basso a destra. Le colonne CSS non possono riprodurre questa sequenza arbitraria semplicemente disponendo tre contenitori sulla pagina. Il flusso automatico delle colonne appartiene a un contenitore multicolonna; la bozza CSS Regions era il meccanismo separato ideato per collegare le caselle di destinazione. Layout multicolonna, CSS Regions Module Level 1

Per una composizione desktop su Mac in cui sono essenziali caselle posizionate liberamente, Pages offre l’intreccio documentato dei testi. Inizia con tre caselle disposte come A, B e C, quindi inserisci l’intero articolo nella prima. Apple consente di avviare una sequenza con una casella vuota o con una che contiene già del testo. Collegare caselle di testo in Pages su Mac

  1. Seleziona la casella A e fai clic sul cerchio bianco in alto per avviare la sequenza.
  2. Seleziona ogni casella di destinazione vuota e fai clic sul suo cerchio bianco per aggiungerla alla sequenza. Controlla che il colore dei cerchi sia uguale e verifica i numeri di sequenza.
  3. Per correggere la sequenza, fai clic sul cerchio di una casella e scegli il relativo numero in Ordine layout.
  4. Se nell’ultima casella compare un indicatore di testo tagliato, ingrandisci una casella o aggiungine un’altra collegata. Le caselle bloccate o raggruppate non possono essere collegate. Collegare caselle di testo in Pages su Mac

Spostare una casella in un’altra posizione della stessa pagina non modifica automaticamente l’ordine di lettura della sequenza. Usa Ordine layout in modo consapevole. Pages è quindi una soluzione pratica per la composizione visiva, pur restando chiaro che le sequenze di caselle di testo non aggiungono una funzione al browser. Collegare caselle di testo in Pages su Mac

Quando usare Paged.js o un polyfill di Regions?

Scegli Paged.js quando il risultato desiderato è una sequenza di pagine. La documentazione ufficiale descrive un componente che dispone il contenuto in una pagina, rileva l’overflow e prosegue nelle pagine create successivamente. È un modello utile per la paginazione nel browser, ma la documentazione non garantisce l’intreccio arbitrario del testo in regioni sullo schermo posizionate in modo indipendente. Come funziona Paged.js

La configurazione documentata per il browser richiede il tuo HTML e CSS, lo script Paged.js, un server web e un browser. Ciò aggiunge requisiti rispetto all’esempio autonomo con file locale descritto sopra. Segui la guida di configurazione della libreria ed esamina le pagine generate prima di esportarle. Guida introduttiva a Paged.js

Per ottenere un PDF, la guida consiglia di aprire la finestra di dialogo di stampa del browser dopo la paginazione, selezionare l’output PDF, rimuovere i margini di stampa e le intestazioni e i piè di pagina del browser, quindi attivare la grafica di sfondo. Le voci dei controlli di stampa possono variare da un browser all’altro. Guida introduttiva a Paged.js

Il vecchio progetto Adobe CSSRegions.js simula più direttamente l’intreccio tra regioni, ma la sua documentazione lo definisce sperimentale e sconsiglia esplicitamente di usarlo in produzione come sostituto del supporto nativo. I suoi esempi sono utili per comprendere la proposta storica, ma non dimostrano le capacità attuali dei browser. Polyfill JavaScript per CSS Regions

Preservare la composizione del testo del browser adattando il layout

Quando possibile, mantieni i paragrafi completi come testo del browser. Evita di stimare la capacità di una regione assegnandole un numero fisso di caratteri. La specifica W3C sul testo descrive la composizione del testo tra i confini degli elementi inline e le condizioni che la interrompono, comprese le modifiche alla spaziatura, all’allineamento o all’isolamento. Suddividere frammenti di testo e applicare stili diversi in modo indipendente può quindi modificarne più della sola posizione. CSS Text Module Level 3

Anche la misurazione del testo su canvas non basta per disporre un articolo. WHATWG specifica che measureText() restituisce metriche per il testo fornito, mentre fillText() disegna il testo a coordinate specifiche. L’algoritmo di preparazione del testo usa una casella di riga di larghezza infinita; la larghezza massima fornita può far adattare il testo a tale larghezza. Queste operazioni non fanno proseguire automaticamente un paragrafo in più regioni DOM. Standard HTML: Canvas

Per questo compito, le colonne native lasciano al browser la gestione delle interruzioni di riga e del rendering del testo. Se le regioni arbitrarie nel browser restano un requisito, un’implementazione personalizzata deve tenere conto delle modifiche al testo, delle metriche dei caratteri, delle dimensioni disponibili e del contenuto non posizionato. Consideralo un progetto di layout distinto, non un breve script che suddivide i caratteri.

Prima di definire il progetto, esaminalo con una finestra ampia, una stretta e il testo del browser ingrandito. Segui l’articolo dal primo paragrafo fino a END-A, controlla l’ordine di continuazione e cerca contenuti tagliati o spostati orizzontalmente. Usa le colonne del browser quando il flusso regolare soddisfa il compito, Paged.js quando la destinazione sono le pagine e le sequenze di Pages quando il posizionamento delle singole caselle determina la composizione.

Fonti