Stampa anteprima contenuto squishing

Question

Sto cercando di ottenere un'anteprima di stampa da stampare nel modo in cui desidero che utilizzi la direttiva @page in CSS. Per qualche ragione, a prescindere dai margini della mia pagina, il contenuto viene schiacciato, anche se i numeri sono presumibilmente esatti. Ecco un esempio di prova:

https://deck.zone/embed/-KK43Q9JoAqMIYd5gLj5;scriptId=0;print;tabs=result,code

Se si apre anteprima di stampa in questa pagina (sto testando in cromo), vedrete che le carte sono selvaggiamente fuori centro. Ecco la cosa, però: le mie carte sono impostate su 2,5 pollici per 3,5 pollici e la pagina stessa è impostata su 8,5 pollici per 11 pollici. Ciò significa che dovrei avere approssimativamente 1in di margine tra sinistra e destra e 0,5 in margine in alto e in basso, il che significa che logicamente i miei margini dovrebbero essere dimezzati per ciascun lato. Tuttavia, se io in realtà faccio, sembra schiacciato:

Ecco la mia @ Page CSS:

@media print { 
    html, body, .printable, .results-pane, .embed-view { 
     width: 8.5in !important; 
     height: 11in !important; 
    } 

    @page { 
     size: 8.5in 11in; 
     margin-top: 0.25in; 
     margin-left: 0.5in; 
     margin-right: 0.5in; 
     margin-bottom: 0.25in; 
    } 
    } 

il problema esiste anche se tento di impostare manualmente i margini, e con questo puoi persino vedere che il mio contenuto viene schiacciato. Ecco come appare con assoluta assenza di margini (lasciando i margini 1in e 0.5in disponibili:

Ed ecco come appare quando ho impostato i margini me stesso:

C'è un modo in cui posso impedire al browser di eseguire questo comportamento di squishing o utilizzare la mia query @print per risolvere il problema? Per riferimento, ho provato a impostare i margini sul corpo stesso, ma i margini superiore/inferiore non verranno mantenuti tra più stampare le pagine

Answer 1

Per fortuna ha voluto che, questo è in realtà un problema con la prima media query:

html, body, .printable, .results-pane, .embed-view { 
    width: 8.5in !important; 
    height: 11in !important; 
} 

Perché questi sono tutti di essere impostati alla stessa dimensione, si spingono a vicenda. La risoluzione era di fare solo html la corretta larghezza/altezza e tutto il genere è caduto in posizione da lì.

Answer 2

E 'possibile che la parentesi chiusa in eccesso stia rompendo il tuo css?

@page { 
    size: 8.5in 11in; 
    margin-top: 0.25in; 
    margin-left: 0.5in; 
    margin-right: 0.5in; 
    margin-bottom: 0.25in; 
} 

}/* < - staffa in più */