About css control print more can be found in the style css control of print a chapter.
Use @page rules can be more settings for printing, such as specifying the size of the page. Margins, headers and footers, etc., in order to achieve better results.
What follows is a brief introduction.
A paper size setting:
@page {
size: 5.5in 8.5in;
}
Set the paper size, 5.5 inches wide, 8.5 inches high.
<pre style="overflow-wrap: break-word; margin: 0px; padding: 0px;">
@page {
size: A4;
}
By controlling the alias paper size such as "A4" or "legal."
@page {
size: A4 landscape;
}
You may control the printing direction, portrait: the portrait, landscape: lateral.
.Page two models:
In paged media format model, the document is transferred to one or more pages box.
The page frame is mapped to a rectangular plane.
This is roughly similar to the css box model:
Special Note: The current browser support is not enough.
@page { width: 50em; }
Three .page margins model:
Before going any further, we should understand the box model of the page, because it acts with how work on the screen is somewhat different. Page model defines a page region, and the peripheral edge 16 divided cartridge. Oversize between the end edge of the page and the page itself can control the size of the area and the page region.
Left and right margins:
@page :left {
margin-left: 30cm;
}
@page :right {
margin-left: 4cm;
}
The following css title will be displayed in the bottom left, bottom right corner of the page counter, and display the title of a chapter in the upper right corner.
@page:right{
@bottom-left {
margin: 10pt 0 30pt 0;
border-top: .25pt solid #666;
content: "Our Cats";
font-size: 9pt;
color: #333;
}
@bottom-right {
margin: 10pt 0 30pt 0;
border-top: .25pt solid #666;
content: counter(page);
font-size: 9pt;
}
@top-right {
content: string(doctitle);
margin: 30pt 0 10pt 0;
font-size: 9pt;
color: #333;
}
}
Display as follows:
