We have seen how to define the various styli and these are interpreted by the browser that executes the video, you can also customize a sheet style specific to the one print in order to have the margins, font, page breaks, hide parts that should not be printed and so on.
To do this, simply create a second sheet in the style to which you assign as an attribute of the parameter-average print instead of screen
<link rel=stylesheet href=”nome_stampa.css” type=”text/css” media=”print”>
By doing so, the two sheets of the style (screen and print) shall be autonomous and clearly distinguished between them, If we do not want to create a sheet of style for the print only, you can define the parameters even within the same sheet by use of the rule @media that allows you to group and divide the various definitions depending on the media to which they relate.
@media screen {
body { margin-left: .5cm;
margin-right: .5cm;
color: #000099;
font-family: Verdana, Arial, sans-serif;
font-size: 10pt;
}
}
@media print{
body { margin-left: 2px;
margin-right: 2px;
color: #000000;
font-family: Verdana, Arial, sans-serif;
font-size: 12pt;
}
}
By doing so, we will have different parameters depending on which the same document is viewed on-screen or printed on paper, it follows that each of can do all the customizations that you want, also considering the fact that you can choose what to see and what you print simply assigning the blocks in the affected class, ID, or redefining the block in which it has been set to display: none; for example.
Also in this case there are differences between the browser and the browser and some do not handle the same way as the printing blocks placed in an absolute manner, patience, with some testing you will be able to get prints more than acceptable.
Personally I prefer to have two external sheets separate as shown in the example below
<link rel=stylesheet href=”foglio_video.css” type=”text/css” media=”screen”>
<link rel=stylesheet href=”foglio_stampa.css” type=”text/css” media=”print”>
on which to go to from time to time to intervene, but this depends only from your own mental organization, and each uses the method that feels most comfortable.
As it prints it has to do with the page break or interruption printing, so as to avoid breaking up the document at the end of the page in a part of the text is important, you can decide when to enable an interrupt printing by the properties: page-break-before and page-break-after(before and after) that can accept values such as: always, avoid, left, right and auto.
Some are not supported by all browsers, others are of little use, in the end those that are actually used are only the first two: always and avoid , respectively, to send a page break or to prevent a page break in the block to which they are applied.
div.the beginning {page-break-before: always;}
div.end {page-break-after: always;}
With this example, the browser inserts a page break before the block <div class=”start”> and one after the block <div class=”end”>