Defining the Page Size with the @page Rule - HTML

In word processing and desktop publishing environments, you define a page size by using a dialog box within a set-up option of some kind. In CSS, you define the size of a page using the @page rule. The @page rule defines which pages should be bound to the definitions within the rule. You then use a page property within a style element or attribute to indicate which page a specific element belongs to.

Unfortunately, browser support has still not caught up to this particular CSS rule, and support is pretty nonexistent at this point. Microsoft actually does provide support for this rule, but only through the MSHTML component, which application developers use as a browser widget within their applications. Internet Explorer itself does not include support for this rule in its printing templates, which are used for print previewing and printing Web documents from the browser.
demonstrates how the @page rule works.

Using an @page Rule to Set up Page Size

In a page named “printed” is defined. Then, HTML elements that are defined in the stylesheet using printed within the page property should emerge from the printer according to the specifications outlined in the @page rule:

In CSS2, page selectors can be used to name the first page, all left pages, all right pages, or a page with a specific name that the rules apply to. In the case of named page called printed was used.

Setting up the page size with the size property
The actual dimensions of the page are defined using the size property. The size property consists of two absolute values, one for the width and the other for the height. So the following translates into an 81/2 ×11 size page:

@page { size: 8.5in 11in; {

You can also use the following relative size values:

  • auto is the default value and is whatever the target paper size is in your printer’s settings.
  • landscape flip flops the dimensions named in the size property so that in the previous example, the printed sheet would print out at 11 inches wide by 8 inches deep.
  • portrait overrides the targeted media’s default settings to correspond with the dimensions you set in the size property.

All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd Protection Status

HTML Topics