CSS Paged Media: The CSS paged media is different from continuous media which is the content of the document split into one or more discrete pages. The paged media provides the papers, transparent pages that display on a computer screen. The pagination in CSS2 helps you print the best of your documents.TheCSS2 page model describes how the document is formatted within the rectangle box area with the efficient width and height.
The @page rule
The @page rule helps to define the pages with the help of “page box” in CSS2, the CSS2 which contains finite dimensions of two areas i.e.,
- The page area -Includes boxes that laid outside of the page.
- The margin area– Which surrounded by page area.
The dimensions of the page box can set with the property ‘size’.The page area dimensions are dimensions of the page box minus margin area.
The @page Rule Example
The following example with page box size 8.5*11 inches and creates a ‘2cm’ margin.
<style type = "text/css">
<!--
@page { size:8.5in 11in; margin: 2cm }
-->
</style>
Page Size Setting
The size property defines the size and orientation of page box and for page size four values can be used which are listed below
| auto | The page box will automatically set to the size and orientation of the target sheet. |
| landscape | The page box is the same size as the target but longer sides are horizontal. |
| portrait | The page box is the same size as the target but shorter sides are horizontal. |
| length | Length values for the ‘size’ property create an absolute page box. If one length value is defined, sets both the width and height of the page box. Percentage values are not allowed in the ‘size’ property. |
Example to set A4 size Page
The following example for target sheet dimensions is 21.0*29.7cm which is almost to the size of a4 sheet, and the margins are 2.10cm and 2.97cm.
<style type = "text/css">
<!--
@page {
size: auto; /* auto is the initial value */
margin: 10%;
}
-->
</style>
Page Box Example
The following example is with the page box width 8.5 inches and height 11 inches.
<style type = "text/css">
<!--
@page {
size: 8.5in 11in; /* width height */
}
-->
</style>
Landscape Pages Example
<style type = "text/css">
<!--
@page { size : portrait }
@page rotated { size : landscape }
table { page : rotated }
-->
</style>
Double-sided Documents Example
In case your printing double-sided documents, the page boxes on the left and right pages should be different.
The following example helps to print double-sided documents
<style type = "text/css">
<!--
@page :left {
margin-left: 4cm;
margin-right: 3cm;
}
@page :right {
margin-left: 3cm;
margin-right: 4cm;
}
-->
</style>