/** * Defines and loads the rules that set the geometry of the page and its * representation on screen. This is the core of html2print. * * Customize the variables to your needs. */ :root { /* the geometry of the page */ --page-width: 148.5mm; --page-height: 210mm; } /** * DEFINITION OF THE PAPER SHEET */ /** * The @page CSS at-rule is used to define some properties of printed * documents. We make it the size of the elements with the .page class and * remove any margins. */ @page { /* * 1. we would have liked to use * `size: var(--page-width) var(--page-height);` * but the page it does not work with css variables it seems. * 2. the 1pt addition is to fix a rounding bug that makes the content * overflow */ margin: 0; size: 148.5mm calc(210mm + 1pt); /* [1] [2] */ /*Format cible ^ changer cette valeur et la variable pour changer de format*/ } /** * CANVAS */ @media all { /* 1. allows for absolutely positioned elements as settings the position */ /* property to relative as the side effect of making this elements */ /* top-left corner the reference point */ /* 2. defines the page size */ body { margin: 0; } .page { position: relative; /* [1] */ width: var(--page-width); /* [2] */ height: var(--page-height); /* [2] */ } /*ICI les styles du poster*/ } /*Gère le rendu visuel de HTML2print*/ @media screen { /* 1. defines the background color of the workspace */ /* 2. makes the page centered on screen */ body { background-color: #f0f0f0; } #pages { width: var(--page-width); /* [1] */ height: var(--page-height); /* [1] */ margin-right: auto; /* [2] */ margin-left: auto; /* [2] */ } .page { margin-top: 1em; margin-bottom: 1em; background-color: white; } } @media print { /* 1. allows for background colors printing */ html { width: var(--page-width); } body { background-color: transparent; /* [1] */ -webkit-print-color-adjust: exact; /* [1] */ print-color-adjust: exact; /* [1] */ } }