Data di pubblicazione: 30 ottobre 2024
A partire da Chrome 131, puoi utilizzare il CSS per aggiungere contenuti ai margini delle pagine quando vengono stampate. Questo post spiega il modello di pagina per i contenuti multimediali paginati e come utilizzare questa funzionalità per migliorare l'output di stampa delle tue pagine web.
Il CSS include specifiche che trattano i contenuti multimediali paginati, il modulo CSS per i contenuti multimediali paginati e i contenuti generati da CSS per i contenuti multimediali paginati. Definiscono funzionalità che vengono utilizzate solo quando una pagina viene stampata (incluso 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 supportata bene nei browser web, nonostante il fatto che spesso sia necessario stampare o creare PDF dalle applicazioni.
Chrome e Firefox supportano la regola at
@page. Questa regola consente di definire le dimensioni della pagina su cui stai stampando 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-rule per i margini pertinente.
Il modello di pagina
Il modello di pagina utilizzato nei contenuti multimediali paginati definisce una casella di pagina, ovvero il foglio di carta. All'interno della casella della pagina sono presenti un margine, un bordo, un spazio interno 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, ciascuna con un at-rule 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. Tuttavia, le tre caselle tra ogni angolo 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 non nelle altre, quella con il testo aumenterà di dimensioni anziché a capo.
Aggiungere contenuti alle caselle dei margini
Per aggiungere contenuti alle caselle di margine, utilizza i contenuti generati da CSS, come faresti con gli pseudo-elementi ::before e ::after. In questo caso, utilizza la regola at مربوط مربوط alla casella che vuoi scegliere come target. Il seguente CSS aggiunge il testo "Il mio libro" alla casella del margine inferiore sinistro o alle pagine a destra. Applica anche 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 page predefinito contiene la pagina corrente. Il seguente CSS lo aggiunge
in basso a destra nelle pagine a destra e in basso a sinistra nelle pagine a sinistra.
@page :right {
@bottom-right {
content: counter(page);
}
}
@page :left {
@bottom-left {
content: counter(page);
}
}
Esiste anche un contatore pages che contiene sempre il numero totale di pagine.
Aspetti da tenere presenti quando si utilizzano i margini di pagina
Se stampi da un browser, il browser aggiunge automaticamente alcuni contenuti ai margini della pagina se c'è spazio per visualizzarli. Ciò avviene anche se hai aggiunto contenuti. Queste intestazioni e questi 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 che non c'è 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, impedirà la visualizzazione dei contenuti del browser nelle pagine successive, anche se hanno spazio.
Possibilità future per i contenuti multimediali suddivisi in pagine
Le specifiche dei contenuti multimediali paginati includono diverse altre funzionalità, descritte nell' articolo Design per la stampa con CSS. Se hai un caso d'uso per una delle seguenti funzionalità, aggiungilo ai bug collegati.
Imposta stringhe
Nei libri, il titolo del capitolo corrente viene spesso stampato a margine. Questo titolo non può essere codificato nel CSS perché cambia man mano che avanzi nel 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 codificati come <h1>. Prende i contenuti di ogni <h1> e li utilizza nel margine superiore a destra delle pagine a destra. Quando arriva al <h1> successivo, il valore viene aggiornato per i margini successivi a 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 vengono solitamente indicati utilizzando il numero di pagina in cui si trova il riferimento. Questi riferimenti incrociati
possono essere creati utilizzando target-counter. Se applicato a un link, il link consente di saltare al riferimento sul web. Quando la pagina viene stampata, 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
Le note a piè di pagina sono anche una funzionalità delle specifiche dei contenuti multimediali paginati. 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;
}