CSS-Paged Media
CSS-Paged Media
In the case of paged media, the content of the document is divided into different parts. The page is defined by @page rule where page box is considered. The page box has two parts with a rectangular area.
The page area: It refers to the boxes laid out on that page.
The margin area: This area surrounds the page area.
Example-1:
<style type=”text/css” >
<!—
@page {size: 7.6 in 10 in; margin: 2.5 cm }
->
</style>
The @page rule of the above example defines the size of the page-box to 7.6 X 10 sq. inches as well as makes 2.5 cm. margins on all sides.
The size property sets the orientation and size of the page-box. The page size can be set by the properties like auto, landscape, portrait and length. The size property cannot take % value.
Example-2:
<style type=”text/css” >
<!—
@page {
size: auto;
margin: 15%}
->
</style>
Example-3:
<style type=”text/css” >
<!—
@page { size: portrait }
@page rotated {size:landscape }
table {page:rotated }
->
</style>
To print double-sided documents, the page boxes are formatted as left and right pages.
Example-4:
<style type=”text/css” >
<!—
@page :left { margin-left:3 cm;
margin-right: 2cm; }
@page :right { margin-left:4 cm;
margin-right: 3cm; }
->
</style>
The first page of the document can be formatted as below,
Example-5:
<style type=”text/css” >
<!—
@page { margin:3 cm}
@page : first { margin-top: 4 cm }
->
</style>
