HTML and CSS Reference
In-Depth Information
Setting the Page Size
Because printed media can vary in size and orientation, one style property supported by
the page box is the
size
property that allows Web authors to define the default dimen-
sions of a printed page as well as whether pages should be printed in portrait or land-
scape orientation. The syntax of the
size
property is
size:
width height orientation
where
width
and
height
are the width and height of the page, and
orientation
is the
orientation of the page (
portrait
or
landscape
). If you don't specify the orientation,
browsers assume a portrait orientation. Thus, to format a page as a standard-size page in
landscape orientation with a 1-inch margin, you would apply the following style rule:
@page {
size: 8.5in 11in landscape;
margin: 1in;
}
If you don't set the orientation value, browsers print the output in portrait by default.
Note that users can override the page sizes and orientations chosen by a Web page
author because users may choose different settings when actually printing the page.
You also can replace the width, height, and orientation values with the keyword
auto
(to let browsers determine the page dimensions) or
inherit
(to inherit the page size from
the parent element). If a page does not fit into the dimensions specified by the
@page
styles, browsers either rotate the page box 90° or scale the page box to fit the sheet size.
Setting the Page Size
• To define a page box for a printout that indicates the page size, margins, and orienta-
tion, use the style rule
@page {
styles
}
where
styles
is the styles that define the page.
• To set the page size and orientation, use the style property
size:
width height orientation
;
where
width
and
height
are the width and height of the page, and
orientation
is
the orientation of the page (
portrait
or
landscape
).
You'll use the
@page
rule to define the print layout of the Tree and Book page. Kevin
suggests that you set the page size to 8.5
3
11 inches, in portrait orientation, with 0.5-
inch margins.
To set the style of the printed page:
◗
1.
Return to the
print.css
file in your text editor.
◗
2.
As shown in Figure 8-41, add the following rule at the top of the style sheet,
directly after the initial comments:
@page {
size: 8.5in 11in portrait;
margin: 0.5in;
}
