Problema con la stampa di una pagina HTML dinamica

**Jey** · 10-05-2023, 11:17

Buongiorno, ho un problema con la stampa di una pagina HTML dinamica.
Questa contiene al suo interno dei div ( ognuno dei quali corrisponderà ad una pagina fisica quando stampata ) che vengono creati dinamicamente ed ognuno dei quali ha margini di pagina diversi ( configurabili da utente ).

Per fare ciò ho impostato a css la regola @page con margin a 0 e sfrutto un border trasparente sui div per fare il margine.
Il problema è che quando stampo mi crea 2 pagine per ogni div: 1 per il contenuto ed 1 per il solo border bottom.

Ho creato questa pagina di esempio con i bordi in verde per far capire il problema:

codice:

<!DOCTYPE html>
<html>
   <head>
      <style>
         @page LandscapeA4 {
            size: A4 landscape;
            margin: 0 !important;
         }
         
         html,
         body{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
         }
         
         /* for print rules: border will be used as page margin */
         .page{
            page: LandscapeA4;
            width: 297mm;
            height: 210mm;
            page-break-after: always;
         }
         
         /* page rules */
         .page{
            position: relative;
            box-sizing: border-box;
            background: #FFF;
         }
      </style>
   </head>
   <body>
      <div class = "page" style = "border: 5mm solid #A5D6A7;">
         Pagina di esempio 1
      </div>
      <div class = "page" style = "border: 10mm solid #A5D6A7;">
         Pagina di esempio 2
      </div>
   </body>
</html>

Ho visto che togliendo all'altezza della pagina 1px il problema si risolve, ma, stampando in pdf, effettivamente manca 1px al bottom della pagina:

codice:

.page{
   height: calc( 210mm - 1px );
}

Non capisco dove sbaglio o come posso risolvere il problema. Qualche suggerimento?
Grazie in anticipo

**Vincent.Zeno** · 10-05-2023, 18:06

Originariamente inviata da Jey

Ho visto che togliendo all'altezza della pagina 1px il problema si risolve, ma, stampando in pdf, effettivamente manca 1px al bottom della pagina:

codice:

.page{
   height: calc( 210mm - 1px );
}

ho fatto prove (stampa, pdf+stampa) e questo px mancante non lo vedo...

**Jey** · 10-05-2023, 18:29

Originariamente inviata da Vincent.Zeno

ho fatto prove (stampa, pdf+stampa) e questo px mancante non lo vedo...

Provo ad allegare 2 immagini con i bordi in rosso per rendere il px più evidente ( una è l'anteprima di stampa ed una è facendo zoom sul pdf stampato ):
Image 1.jpg Image 2.jpg

Ci tengo a precisare che 1px non è assolutamente un problema per me ( considerando poi che i bordi saranno trasparenti e non colorati ).
Ci terrei più a capire se sto facendo le cose in maniera corretta o sto sbagliando/dimenticando qualche regola css che magari potrebbe causarmi ulteriori problemi.

Grazie nuovamente per il supporto.

**Vincent.Zeno** · 10-05-2023, 19:56

certo che se, per vederlo, devo ingrandire almeno a 400%...

credo che il problema proprio non sussista.

giusto per essere pignoli (solo per la stampa su carta) potresti ragionare in pt invece che in px.
da verificare poi cosa riesci a vedere a schermo o su file.

se la domanda è "perché devo togliere 1px di bordo in questo contesto" allora dobbiamo capire cosa ingombra più del richiesto, e non è detto che si possa risolvere (in questo contesto, cioè dove c'è un page-break)

inoltre non possiamo aspettarci un comportamento identico tra schermo file e carta: i media hanno tutti piccole caratteristiche che li differenziano nel comportamento.

Discussione: Problema con la stampa di una pagina HTML dinamica

Strumenti discussione

Ricerca discussione

Visualizza

Problema con la stampa di una pagina HTML dinamica

Permessi di invio