CSS Paged Media @page Rule

Paged media differs from continuous media in that the content of a document is divided into one or more discrete pages. Paged media includes paper, transparencies, pages displayed on a computer screen, and so on.

The CSS2 standard introduces some basic paging controls that allow authors to help browsers print their documents better.

The CSS2 page model specifies how a document should be formatted within a rectangular area with a finite width and height: the page box. These functions are divided into two groups:

• CSS2 features for defining specific page layouts.
• CSS2 features for controlling the pagination of a document.

Defining Pages: The @page Rule

CSS2 defines a “page box,” a box of finite size in which content is rendered. A page box is a rectangular area containing two regions:

• Page Area – The page area contains the boxes for layout on that page. The edges of the page area serve as the initial containing blocks for layout that occurs between page breaks.

• Margin Area – This surrounds the page area.

You can specify the size, orientation, margins, and more of the page box within the @page rule. The size of the page box is set by the ‘size’ property. The dimensions of the page area are the page box dimensions minus the margin area dimensions.

For example, the following @page rule sets the page box dimensions to 8.5×11 inches and creates a 2cm margin between the edge of the page box and the page area.

<style type = "text/css">
<!--
@page { size:8.5in 11in; margin: 2cm }
-->
</style>

You can use the margin, margin-top, margin-bottom, margin-left, and margin-right properties in the @page rule to set page margins.

Finally, the marks attribute is used in the @page rule to create crop and registration marks outside the page box on the target worksheet. By default, no marks are printed. You can use either or both the crop and cross keywords to create crop marks and registration marks, respectively, on the target printed page.

Setting the Page Size

The size attribute specifies the size and orientation of the page box. There are four possible values ​​for page size:

• auto – The page box will be set to the size and orientation of the target sheet.

• landscape – Overrides the orientation of the target. The page box is the same size as the target, with its longer side horizontal.

• portrait – Overrides the orientation of the target. The page box is the same size as the target, with its shorter side horizontal.

• length – A length value for the size attribute creates an absolute page box. If only a length value is specified, both the width and height of the page box are set. Percentage values ​​are not allowed for the ‘size’ attribute.

In the following example, the outer edges of the page box are aligned with the target. Percentage values ​​in the “margin” property are relative to the target size. So, if the target sheet dimensions are 21.0cm × 29.7cm (i.e., A4), the margins will be 2.10cm and 2.97cm.

<style type = "text/css"> 
<!-- 
@page { 
size: auto; /* auto is the initial value */ 
margin: 10%; 
} 
--> 
</style> 

The following example sets the page box to 8.5 inches wide and 11 inches high. The page box in this example requires a target paper size of 8.5 inches by 11 inches or larger.

<style type = "text/css"> 
<!-- 
@page { 
size: 8.5in 11in; /* width height */ 
} 
--> 
</style> 

Once you’ve created a named page layout, you can use it for subsequent elements in your document by adding page properties to a style. For example, this style renders all tables in a document in landscape orientation.

<style type = "text/css">
<!--
@page { size : portrait }
@page rotated { size : landscape }
table { page : rotated }
-->
</style>

Based on the above rules, when printing, if the browser encounters a

<

table> element in your document, and the current page layout is the default portrait layout, a new page will be started and the table will be printed on a landscape page.

Left, Right, and First Page

When printing a double-sided document, the page boxes for the left and right pages should be different. This can be expressed using two CSS pseudo-classes as follows −

<style type = "text/css">
<!--
@page :left {
margin-left: 4cm;
margin-right: 3cm;
}

@page :right {
margin-left: 3cm;
margin-right: 4cm;
}
-->
</style>

You can use the :first pseudo-class to specify styles for the first page of a document.

<style type = "text/css"> 
<!-- 
@page { margin: 2cm } /* All margins set to 2cm */ 

@page :first { 
margin-top: 10cm /* Top margin on first page 10cm */ 
} 
--> 
</style> 

Controlling Pagination

Unless you specify otherwise, page breaks occur only when the page formatting changes or the content overflows the current page box. To force or cancel page breaks, use the page-break-before, page-break-after, and page-break-inside properties.

Both page-break-before and page-break-after accept the auto, always, avoid, left, and right keywords.

The auto keyword is the default and lets the browser generate page breaks as needed. The always keyword forces a page break before or after an element, while the avoid keyword suppresses a page break before or after an element. The left and right keywords force one or two page breaks, rendering the element on the left or right page.

Using the page break properties is straightforward. Imagine your document has a first-level heading and a second-level heading to indicate the beginning of a section. You want each section to begin on a new right-hand page, but you don’t want the section heading to be separated from the subsequent content. This can be achieved using the following rules –

<style type = "text/css"> 
<!-- 
h1 { page-break-before : right } 
h2 { page-break-after : avoid } 
--> 
</style> 

Only use the auto and avoid values ​​for the page-break-inside property. If you want to minimize the risk of a table extending across multiple pages, you can write the following rule –

<style type = "text/css">
<!--
table { page-break-inside : avoid }
-->
</style>

Controlling Orphans and Oligarchs

In printing industry terms, orphans refer to lines within a paragraph that are left at the bottom of a page due to a page break, while oligarchs refer to lines left at the top of a page after a page break. Generally, having a single line of text extended to the top or bottom of a page is unsightly. Most printers try to maintain at least two or more lines of text at the top or bottom of each page.

The
• orphans property specifies the minimum number of lines a paragraph must maintain at the bottom of a page.

• widows attribute specifies the minimum number of lines a paragraph must remain at the top of the page.

Here’s an example with 4 lines of text at the bottom of each page and 3 lines of text at the top of each page –

<style type = "text/css"> 
<!-- 
@page{orphans:4; widows:2;} 
--> 
</style>