Data di pubblicazione: 30 ottobre 2024
A partire da Chrome 131, puoi utilizzare CSS per aggiungere contenuti ai margini delle pagine quando vengono stampate. Questo post spiega il modello di pagina per i contenuti multimediali impaginati e come utilizzare questa funzionalità per migliorare l'output di stampa delle tue pagine web.
CSS include specifiche che riguardano i contenuti multimediali impaginati, il modulo CSS Paged Media e i contenuti generati da CSS per i contenuti multimediali impaginati. Definiscono le funzionalità utilizzate solo quando una pagina viene stampata (anche in PDF). Esistono user agent che supportano questo CSS e ti consentono di generare libri e altro materiale stampato da HTML e CSS. Tuttavia, questa funzionalità non è mai stata ben supportata nei browser web, nonostante il fatto che spesso abbiamo bisogno di stampare o creare PDF dalle applicazioni.
Chrome e Firefox supportano la regola
@page @. Questa regola
consente di definire le dimensioni della pagina su cui stampare e le dimensioni dei
margini intorno ai contenuti. A partire da Chrome 131, puoi anche utilizzare i contenuti generati
per aggiungere contenuti ai margini, scegliendo come target la regola at-margin pertinente.
Il modello di pagina
Il modello di pagina utilizzato nei media impaginati definisce una casella di pagina, ovvero il foglio di carta. All'interno della casella della pagina si trovano un margine della pagina, un bordo della pagina, uno spazio interno della pagina e infine l'area della pagina in cui vengono visualizzati i contenuti. Quando i contenuti vengono stampati, vengono suddivisi in tutte le pagine necessarie per contenerli.
Il margine della pagina viene quindi suddiviso in 16 caselle, ognuna con una regola at corrispondente.
@top-left-corner@top-left@top-center@top-right@top-right-corner@left-top@left-middle@left-bottom@right-top@right-middle@right-bottom@bottom-left-corner@bottom-left@bottom-center@bottom-right@bottom-right-corner
Dimensionamento della casella del margine
L'altezza delle caselle superiore e inferiore e la larghezza delle caselle laterali sinistra e destra
sono definite dalle dimensioni del margine impostate utilizzando @page. Le caselle angolari
hanno quindi una dimensione fissa creata dall'intersezione di questi margini. Le tre caselle tra ogni angolo, invece, sono flessibili. Si comportano in modo simile
alle caselle in un layout flessibile che utilizza flex: auto, quindi si estendono per riempire lo
spazio, ma se inserisci una lunga stringa di testo in una e niente nelle altre,
quella con il testo si espanderà anziché andare a capo.
Aggiungere contenuti alle caselle del margine
Per aggiungere contenuti alle caselle di margine, utilizza i contenuti generati da CSS, proprio come faresti con gli pseudo-elementi ::before e ::after. In questo caso, utilizza la regola at
relativa alla casella di cui vuoi scegliere come target. Il seguente CSS aggiunge il testo "Il mio libro"
alla casella del margine in basso a sinistra o alle pagine di destra. Inoltre, applica uno stile al testo.
@page :right {
@bottom-left {
content: "My book";
font-size: 9pt;
color: #333;
}
}
Oltre alle stringhe di testo, puoi aggiungere contatori di pagine ai margini. Il contatore
predefinito page contiene la pagina corrente. Il seguente CSS lo aggiunge
in basso a destra delle pagine di destra e in basso a sinistra delle pagine di sinistra.
@page :right {
@bottom-right {
content: counter(page);
}
}
@page :left {
@bottom-left {
content: counter(page);
}
}
È presente anche un contatore pages che contiene sempre il numero totale di pagine.
Aspetti da tenere presente quando si utilizzano i margini della pagina
Se stampi da un browser, questo aggiungerà automaticamente alcuni contenuti del margine della pagina se c'è spazio per visualizzarli. Lo farà anche se hai aggiunto contenuti. Queste intestazioni e piè di pagina generati automaticamente possono essere disattivati nella finestra di dialogo di stampa.
Se imposti i margini di una pagina su 0 o su un valore così piccolo da non lasciare spazio per le intestazioni e i piè di pagina del browser, questi non verranno visualizzati.
A causa del concetto di layout di pagina predefinito in Chromium, se la prima pagina del documento stampato non ha spazio per i contenuti automatici, questi non verranno visualizzati nelle pagine successive, anche se hanno spazio.
Possibilità future per i contenuti impaginati
Le specifiche dei contenuti multimediali impaginati includono diverse altre funzionalità, descritte nell'articolo Progettare per la stampa con CSS. Se hai un caso d'uso per una delle seguenti funzionalità, aggiungilo ai bug collegati.
Imposta stringhe
Nei libri viene spesso stampato il titolo del capitolo corrente nei margini. Questo titolo non può essere
codificato in modo permanente nel CSS perché cambia man mano che avanzi nella lettura del libro. La proprietà
string-set ti consente di impostare un valore dal codice HTML da utilizzare poi nei
contenuti generati. Il seguente CSS presuppone che i titoli dei capitoli siano contrassegnati
come <h1>. Prende il contenuto di ogni <h1> e lo utilizza nel margine in alto a destra delle pagine di destra. Quando raggiunge il successivo <h1>, il valore viene aggiornato
per i margini dopo quel punto.
h1 {
string-set: doctitle content();
}
@page :right {
@top-right {
content: string(doctitle);
margin: 30pt 0 10pt 0;
font-size: 8pt;
}
}
Bug di Chromium per string-set e string().
Riferimenti incrociati
Una volta stampato un documento, i riferimenti ad altre pagine sono in genere indicati
utilizzando il numero di pagina in cui è possibile trovare il riferimento. Questi riferimenti incrociati
possono essere creati utilizzando target-counter. Se applicato a un link, il link consente di
passare al riferimento sul web, mentre quando viene stampato viene visualizzato il numero di pagina.
<a class="xref" href="#ref1">my reference</a>
a.xref:after {
content: " (page " target-counter(attr(href, url), page) ")";
}
Bug di Chromium per i riferimenti incrociati.
Note a piè di pagina
Anche le note a piè di pagina sono una funzionalità delle specifiche dei contenuti multimediali impaginati. In HTML, utilizza una classe per identificare il testo che deve essere una nota a piè di pagina, ad esempio:
<p>This is some text <span class=”fn”>this is a footnote</span>.</p>
Quindi, utilizza il valore footnote di float per trasformare questo testo in note a piè di pagina. Verrà
rimosso dal paragrafo quando il documento viene stampato e visualizzato come
nota a piè di pagina.
.fn {
float: footnote;
}