Interruzione di pagina html stampabile. Interruzione di pagina per la stampa tramite CSS3. Informazioni sulla stampa di pagine non ottimizzate

Un blocco di pagina è costituito da un'area della pagina che contiene il contenuto e da un'area del margine che circonda l'area della pagina. La regola @page viene utilizzata per modificare alcune proprietà CSS durante la stampa di un documento. Puoi modificare solo il margine dell'elemento e puoi anche impostare interruzioni di pagina in una posizione specificata.

@pagina (margine: 2 pollici;)

È possibile definire i margini del singolo documento all'interno della regola @page, come margin-top, margin-right, margin-bottom, margin-left:

2. Interruzioni di pagina

È possibile controllare le interruzioni di pagina utilizzando le proprietà page-break-before, page-break-after e page-break-inside. Queste proprietà si applicano agli elementi del blocco per cui la proprietà position è impostata su relativa o statica.

page-break-prima
Valori:
auto
sempre	Aggiunge sempre un'interruzione di pagina prima dell'elemento.
evitare	Annulla il posizionamento dell'interruzione davanti all'elemento, se possibile.
sinistra	Aggiunge una o due interruzioni di pagina prima dell'elemento in modo che la pagina successiva sia formattata come pagina sinistra. L'elemento verrà stampato a partire dalla parte superiore della pagina sinistra, ad es. nella pagina a sinistra del dorso. Per la stampa fronte/retro, verrà stampato sul retro di un foglio di carta.
Giusto	Aggiunge una o due interruzioni di pagina prima dell'elemento. L'elemento verrà stampato a partire dalla parte superiore del bordo destro. La pagina successiva sarà formattata come la pagina giusta.
ereditare

Sintassi:

@media print (h1 (page-break-before: sempre;))

interruzione di pagina dopo
Valori:
auto	L'impostazione predefinita è impostare interruzioni di pagina automatiche.
sempre	Aggiunge sempre un'interruzione di pagina dopo un elemento.
evitare	Annulla l'aggiunta di un'interruzione dopo l'elemento, se possibile.
sinistra	Aggiunge una o due interruzioni di pagina dopo l'elemento in modo che la pagina successiva sia formattata come pagina sinistra. L'elemento verrà stampato a partire dalla parte superiore della pagina sinistra, ad es. nella pagina a sinistra del dorso. Per la stampa fronte/retro, verrà stampato sul retro di un foglio di carta.
Giusto	Aggiunge una o due interruzioni di pagina dopo l'elemento in modo che la pagina successiva sia formattata come la pagina giusta. L'elemento verrà stampato a partire dalla parte superiore del bordo destro.
ereditare	Eredita questa proprietà dall'elemento padre.

Sintassi:

@media print (piè di pagina (page-break-after: sempre;))

La proprietà page-break-inside indica al browser se la pagina può interrompersi all'interno dell'elemento o meno. Ma se l'elemento è più lungo della pagina, l'interruzione è inevitabile.

Come gestire le interruzioni di pagina durante la stampa di una tabella HTML di grandi dimensioni (8)

Ho un progetto che richiede la stampa di una tabella HTML con molte righe.

Il mio problema è come la tabella viene stampata su più pagine. A volte taglia la riga a metà, rendendola illeggibile perché una metà si trova sul bordo della pagina e il resto viene stampato nella parte superiore della pagina successiva.

L'unica soluzione plausibile che mi viene in mente è usare DIV complessi invece di una tabella e forzare le interruzioni di pagina se necessario ... ma prima di passare attraverso tutte le modifiche ho pensato di poter chiedere qui prima.

Usa queste proprietà CSS:

Page-break-after page-break-before

Per esempio:

....

Nessuna delle risposte qui ha funzionato per me in Chrome. AAverin su GitHub ha creato alcuni Javascript utili per questo e ha funzionato per me:

Basta aggiungere js al tuo codice e aggiungere la classe splitForPrint alla tabella e dividerà ordinatamente la tabella in più pagine e aggiungerà l'intestazione della tabella a ciascuna pagina.

Nota: quando si utilizza un'interruzione di pagina: sempre per un tag, crea un'interruzione di pagina dopo l'ultimo bit della tabella, creando ogni volta una pagina completamente vuota! Per risolvere questo problema, cambialo in page-break-after: auto. Si romperà correttamente e non creerà una pagina vuota in più.

....

La risposta accettata non ha funzionato per me in tutti i browser, ma dopo che il CSS ha effettivamente funzionato per me:

Tr (display: table-row-group; page-break-inside: evita; page-break-after: auto;)

La struttura html era:

...

Nel mio caso, ci sono stati alcuni problemi aggiuntivi con thead tr, ma questo ha risolto il problema originale di tenere le righe della tabella.

A causa di problemi di intestazione, ho finito per finire con:

#theTable td * (page-break-inside: evita;)

Ciò non impedì ai ranghi di crollare; solo il contenuto di ogni cella.

Ho finito con l'approccio di @ vicenteherrera, con alcune modifiche (che forse è bootstrap 3).

Fondamentalmente; non possiamo rompere tr s o td s perché non sono elementi a livello di blocco. Quindi mettiamo div s in ognuno e applichiamo le nostre regole di page-break- * ai div. In secondo luogo, aggiungiamo dell'imbottitura nella parte superiore di ciascuno di questi div per compensare eventuali artefatti di stile.

Erano necessari ritocchi e regolazioni dell'imbottitura per compensare parte del jitter che veniva introdotto (dal bootstrap, immagino). Non sono sicuro di presentare una nuova soluzione da altre risposte a questa domanda, ma forse aiuterà qualcuno.

Recentemente ho risolto questo problema con una bella soluzione.

EvitareBreak (bordo: 2px solido; page-break-inside: evitare;)

Funzione Print () ($ (". TableToPrint td, .tableToPrint th"). Ogni (function () ($ (this) .css ("width", $ (this) .width () + "px"))) ; $ (". tableToPrint tr"). wrap ("

"); finestra.stampa ();)

Funziona come un fascino!

Ho testato molte soluzioni e nessuna ha funzionato bene.

Quindi ho provato un piccolo trucco e funziona:

tpiede con stile: posizione: fissa; fondo: 0px; posizione: fissa; fondo: 0px; si inserisce nella parte inferiore dell'ultima pagina, ma se il piè di pagina è troppo alto, si sovrappone al contenuto della tabella.

tfoot solo con: display: table-footer-group; non si sovrappone ma non è in fondo all'ultima pagina...

Mettiamo due piedi:

TFOOT.placer (visualizzazione: gruppo piè di pagina; altezza: 130px;) TFOOT.contenter (visualizzazione: gruppo piè di pagina; posizione: fissa; fondo: 0px; altezza: 130px;) il tuo testo lungo o l'immagine alta qui

Uno riserva spazio sulle pagine non posteriori, l'altro nel tuo piè di pagina personale.

Test

intestazione
Appunti
X
X
X

Sebbene viviamo in un'era digitale in cui tutto è facilmente accessibile, ci sono ancora molte persone che preferiscono leggere testi lunghi su carta. È possibile che alcuni utenti stampino il testo dal tuo sito in modo che possano leggerlo fuori dal computer.

La capacità di rendere i contenuti adatti alla stampa esiste da molto tempo. Possiamo farlo usando la regola @media nel foglio di stile in questo modo:

@stampa media ( / * Regole di stile * / }

Ci sono diverse proprietà che ti permettono di modellare il contenuto di una pagina web per renderla stampabile, e ne tratteremo una: l'interruzione di pagina.

Che cosa fa?

Se hai lavorato con editor di testo come Microsoft Word e Pages, dovresti avere familiarità con il menu di interruzione di pagina che ti consente di avvolgere il testo nella pagina successiva.

Questo modulo fa lo stesso, permettendoti di controllare come il contenuto di una pagina web è avvolto, pagina per pagina.

Utilizzo di un'interruzione di pagina

Ad esempio, abbiamo creato una pagina demo che andremo a stampare. Abbiamo trovato un trasferimento errato su di esso, come puoi vedere di seguito.

Avrà un aspetto migliore se l'intestazione e la riga orfana iniziano nella pagina successiva.

Per fare ciò, usiamo la proprietà page-break-after e la impostiamo su sempre per forzare l'elemento successivo a passare alla pagina successiva.

Page-break (page-break-after: sempre;)

Quindi puoi creare un nuovo elemento con una classe tra gli elementi o assegnare la classe all'elemento precedente in questo modo.

Con il Gomma funzione, puoi scattare composizioni di una foto, quindi mettere tutto insieme, per ottenere lo sfondo senza gli extra che non hai.

Il telefono con cui viaggiare

S Traduttore sarà un ottimo strumento per i tuoi viaggi in quanto ...

Ora l'intestazione e l'orifizio inferiore inizieranno nella pagina successiva.

Linee pendenti superiori e inferiori

Il metodo sopra può essere noioso se hai molto testo. Quindi, invece di forzare il contenuto a passare alla pagina successiva, è meglio impostare una soglia minima per gli orfani in alto e in basso.

Nella pratica tipografica, le linee sospese in alto e in basso si riferiscono a parole rimanenti e linee brevi che appaiono strappate dal resto del paragrafo in un'altra pagina.

Utilizzando le proprietà orfani (in basso orfani) e vedove (in alto orfani) possiamo impostare la soglia minima. Nell'esempio seguente, stiamo specificando che almeno tre righe rimangono in fondo o all'inizio del paragrafo in cui si verifica l'interruzione di pagina.

P (orfani: 3; vedove: 3;)

Fonti aggiuntive

Abbiamo trattato le basi dell'utilizzo di un'interruzione di pagina stampabile per il testo sul tuo sito e speriamo che ti ispiri a pensare agli stili da stampare per il tuo sito in modo che i tuoi contenuti abbiano un bell'aspetto sia sullo schermo che su carta.

Traduzione - Dovere

Interruzioni di pagina

Le sezioni seguenti descrivono il modello di formattazione della pagina utilizzato nei CSS2. Vengono utilizzate cinque diverse proprietà per dire all'interprete dove può o deve interrompere la pagina e la pagina (sinistra o destra) dove deve continuare a visualizzare il contenuto. Ogni interruzione di pagina interrompe la visualizzazione del contenuto nella casella di pagina corrente e fa sì che il resto della struttura del documento venga visualizzato in una nuova casella di pagina.

Interruzioni prima e dopo gli elementi: "page-break-before", "page-break-after", "page-break-inside"

"page-break-before"

Valore iniziale: auto
Eredità: no
Assegnazione percentuale: N / A

"page-break-after"

"page-break-inside"

Valore: evitare | auto | ereditato
Valore iniziale: auto
Ambito: elementi di livello strutturale
Eredità: sì
Assegnazione percentuale: N / A
Dispositivi: formattazione visuale, impaginazione

I valori di queste proprietà hanno i seguenti significati:

auto

Non avvia o non consente un'interruzione di pagina prima (dopo o all'interno) di un blocco generato.

sempre

Avvia sempre un'interruzione di pagina prima (dopo) il blocco generato.

evitare

Annulla l'interruzione di pagina prima (dopo o all'interno) del blocco generato.

sinistra

Avvia una o due interruzioni di pagina prima (dopo) il blocco generato in modo che la pagina successiva venga formattata come pagina di sinistra.

Giusto

Avvia una o due interruzioni di pagina prima (dopo) il blocco generato in modo che la pagina successiva sia formattata come la pagina giusta.

La posizione potenziale di un'interruzione di pagina è determinata dalla proprietà "page-break-inside" dell'elemento padre, dalla proprietà "page-break-after" dell'elemento precedente e dalla proprietà "page-break-before" dell'elemento elemento successivo. Se i valori di queste proprietà sono diversi da "auto", i valori "sempre", "sinistra" e "destra" hanno la precedenza sul valore di "evita". La sezione sulle interruzioni di pagina accettabili fornisce regole chiare per avviare o non consentire interruzioni di pagina utilizzando queste proprietà.

Utilizzo di pagine con nome: "pagina"

"pagina"

Significato:<идентификатор>| auto
Valore iniziale: auto
Ambito: elementi di livello strutturale
Eredità: sì
Assegnazione percentuale: N / A
Dispositivi: formattazione visuale, impaginazione

La proprietà "pagina" può essere utilizzata per definire il tipo specifico di pagina su cui verrà visualizzato l'elemento.

In questo esempio, tutte le tabelle verranno posizionate sul lato destro della pagina (chiamato "ruotato"), che è in orientamento orizzontale:

TABELLA (pagina: ruotata; page-break-before: destra)

L'azione della proprietà "page" è la seguente: se il valore della proprietà "page" di un blocco di pagina, il cui contenuto appartiene al livello inline, differisce dal valore di una proprietà simile del blocco di pagina precedente, il cui contenuto appartiene anche al livello inline, vengono quindi inserite una o due interruzioni di pagina tra di esse, dopodiché l'output viene effettuato in un blocco di pagina denominato. Vedere la sezione seguente sulle interruzioni di pagina forzate.

Nell'esempio seguente, vengono visualizzate due tabelle su pagine orizzontali (naturalmente sulla stessa pagina se ci stanno entrambe), il tipo di pagina "stretto" non viene utilizzato affatto, anche se è impostato per l'elemento DIV.

@pagina stretta (dimensioni: 9 cm 18 cm)
@pagina ruotata (dimensione: orizzontale)
DIV (pagina: stretta)
TABELLA (pagina: ruotata)

utilizzato nel documento

...

Interruzioni di pagina all'interno di elementi: "orfani", "vedove"

"orfani"

Significato:<целое>| ereditato
Valore iniziale: 2
Ambito: elementi di livello strutturale
Eredità: sì
Assegnazione percentuale: N / A
Dispositivi: formattazione visuale, impaginazione

"vedove"

Significato:<целое>| ereditato
Valore iniziale: 2
Ambito: elementi di livello strutturale
Eredità: sì
Assegnazione percentuale: N / A
Dispositivi: formattazione visuale, impaginazione

La proprietà orfani determina il numero minimo di righe di paragrafo da lasciare in fondo alla pagina. La proprietà "widows" determina il numero minimo di righe di paragrafo che devono essere lasciate nella parte superiore della pagina. Di seguito sono riportati esempi di utilizzo di queste proprietà per controllare le interruzioni di pagina.

Per ulteriori informazioni sulla formattazione dei paragrafi, vedere la sezione sui riquadri di riga.

Interruzioni di pagina accettabili

Nel flusso normale, l'interruzione di pagina può trovarsi nelle seguenti posizioni:

Nello spazio riservato ai margini verticali tra gli elementi costitutivi. Se si verifica un'interruzione di pagina a questo punto, i valori calcolati delle proprietà "margin-top" e "margin-bottom" corrispondenti vengono impostati su "0".
Tra blocchi di linea all'interno di un blocco di livello strutturale.

Le discontinuità del tipo considerato soddisfano le seguenti regole:

Regola A: L'interruzione (1) è consentita solo se i valori delle proprietà "page-break-after" e "page-break-before" di tutti gli elementi che generano blocchi che si verificano all'interruzione possono verificarsi, che si verifica quando almeno uno di essi è "sempre", "sinistro" o "destro" o tutti sono "auto" contemporaneamente.
Regola B: Tuttavia, se tutte queste proprietà sono impostate su "auto" e la proprietà "page-break-inside" dell'antenato comune più vicino di tutti gli elementi nominati è impostata su "evita", allora un'interruzione di pagina a quel punto è proibito.
Regola B: L'interruzione di pagina (2) è consentita solo se il numero di riquadri di riga tra l'interruzione e l'inizio del blocco di chiusura è uguale o maggiore della proprietà "orfani" e il numero di riquadri in linea tra l'interruzione e il la fine del blocco è uguale o maggiore del valore della proprietà "widows"...
Regola D: Inoltre, l'interruzione di pagina (2) è consentita solo se la proprietà "page-break-inside" è impostata su "auto".

Se le regole precedenti non ti consentono di inserire un numero sufficiente di interruzioni, le regole B e D vengono ignorate per impedire che il contenuto esca dal blocco di pagina, il che ti consente di creare interruzioni aggiuntive.

Se dopo questo non è possibile ottenere un numero sufficiente di pause, le regole A e B non vengono prese in considerazione per cercare ulteriori punti di pausa.

Le interruzioni di pagina non possono essere effettuate in blocchi posizionati in modo assoluto.

Interruzioni di pagina forzate

Un'interruzione di pagina deve verificarsi (1) se almeno una di tutte le proprietà "page-break-after" e "page-break-before" degli elementi che generano blocchi che si verificano nel punto di interruzione è "always", "left ", o "giusto".

Un'interruzione di pagina deve verificarsi anche (1) se i valori della proprietà "page" delle caselle di riga immediatamente prima e dopo l'interruzione sono diversi.

Interruzioni di pagina "migliori"

I CSS2 non specificano quale interruzione di pagina dovrebbe essere usata tra l'insieme di interruzioni consentite; I CSS2 non impediscono agli interpreti di inserire interruzioni di pagina ovunque o di non usarle affatto. Ma le specifiche CSS2 raccomandano fortemente che i programmi utente aderiscano alle seguenti euristiche (fino a quando non sembra che a volte si contraddicano a vicenda):

le interruzioni di pagina dovrebbero essere eseguite il meno possibile;
tutte le pagine che non terminano con un'interruzione forzata dovrebbero essere approssimativamente della stessa altezza;
non ci dovrebbero essere interruzioni all'interno di un blocco che ha un bordo;
non dovrebbero esserci interruzioni all'interno del tavolo;
non dovrebbero esserci spazi vuoti all'interno dell'oggetto spostato.

Supponiamo che il tuo foglio di stile contenga le proprietà "orphans: 4" e "widows: 2" e che ci siano 20 righe (line box) disponibili nella parte inferiore della pagina corrente:

se l'ultimo paragrafo della pagina corrente non contiene più di 20 righe, allora deve rimanere nella pagina corrente;
se il paragrafo contiene 21 o 22 righe, e la seconda parte del paragrafo non deve violare le restrizioni imposte dalla proprietà "widows", allora, in virtù di ciò, la sua seconda parte deve essere composta da due righe;
se il paragrafo contiene più di 23 righe, la prima parte dovrebbe essere lunga 20 righe e la seconda parte dovrebbe includere tutte le altre righe.

Ora, supponiamo che il valore della proprietà "orphans" sia "10", il valore della proprietà "widows" sia "20" e che ci siano 8 righe disponibili nella parte inferiore della pagina corrente:

se il paragrafo alla fine della pagina corrente non contiene più di 8 righe, allora deve rimanere nella pagina corrente;
se un paragrafo contiene più di 9 righe, allora non può essere diviso (poiché ciò violerebbe la restrizione impostata dalla proprietà "orfani"). Pertanto, dovrebbe essere spostato alla pagina successiva come blocco.