Beginning XHTML | 14

[previous] [next]

Beginning XHTML

The 'size' Property

The size property specifies the size and orientation of the printed page. The size of a page can be either a fixed size or scalable.

Absolute

When you want the size of a page to be absolute (a fixed size), you specify the width and height using one of the following units:

in (for inches)
cm (for centimeters)
mm (for millimeters)

Thus, if we want to specify that the page size is 8 1/2 inches by 11 inches, we write:

@page { size: 8.5in 11in } 
</para>
<para>
and if we wanted to specify A4 page dimensions in centimeters, we write:
</para>
<programlisting><![CDATA[@page { size: 21cm 29.7cm }

Relative

When we want the size of a page to be relative (scalable), we specify one of three values:

auto - used when we want the page size to be set to the size and orientation of the target pages (the paper, for example)
landscape - used when we want to override the target page's orientation and make the longer sides horizontal
portrait - used when you want to override the target page's orientation and make the longer sides vertical

Thus, if we want to say that the page should be printed in landscape mode, we write:

@page { size: landscape }

As mentioned previously, at the time that this book was written, none of the major browsers supported this feature.

The Margin-Related Properties

The margin-related properties are used to set the left, right, top, and bottom margins of the page.

Property	Definition
margin-left	Sets the margin for the left side of the printed page.
margin-right	Sets the margin for the right side of the printed page.
margin-top	Sets the margin for the top of the printed page.
margin-bottom	Sets the margin for the bottom of the printed page.

For example, if we wanted a 4 cm margin on the left side of the printed page, we write:

@page { margin-left: 4cm }

If we wanted a 5 cm margin on the top of the printed page, we write:

@page { margin-top: 5cm }

The margin property is a short-cut for setting margins; it lets us set all of the margins using one property. For example, we could combine the following set of properties:

@page { margin-left: 4cm; margin-right: 3cm; margin-top: 5cm; margin-bottom: 2cm }

into the single property:

@page { margin: 5cm 3cm 2cm 4cm } /* top right bottom left */

Note that the order for the margin properties values is top, right, bottom, left (you can imagine the order as moving clockwise around the page, starting from the top).

The margin property does not require you to type in four values. In fact, you can type in anywhere from one to four values. If you write:

@page { margin: 5cm }

you will set the top, right, bottom, and left margins to 5 centimeters. If you write:

@page { margin: 5cm 3cm }

you will set the top and bottom margins to 5 centimeters and the right and left margins to 3 centimeters. If you write:

@page { margin: 5cm 3cm 2cm }

you will set the top margin to 5 centimeters, the right and left margins to 3 centimeters, and the bottom margin to 2 centimeters.

This may sound rather confusing, but it stems from the fact that most documents either have all of their margins set to the same size, or the top and bottom margins set to the same size and the left and right margins set to another size, or the left and right margins set to the same size but the top and bottom margins differ. The following table should help, where we have used the abbreviations 't' for top, 'l' for left, 'b' for bottom and 'r' for right:

Number of values in margin property	Description
1	t+l+b+r=same
2	t+b=same, l+r=same
3	t, l+r=same, b

While our examples above are all done using centimeters, the margins can be specified as a percentage, a length, or as the auto value.

Percentage

If you specify a percentage value, the margin is calculated as a percentage of the width or height of the page (the width of the page is used for the margin-left and margin-right properties, and the height of the page is used for the margin-top and margin-bottom properties).

Length

If you specify a length value, the margin is set to an absolute value. As with the size property, only the in, cm, and mm units may be used. Font units cannot be used because a piece of paper has no notion of font metrics.

Auto

If you specify this keyword, you are telling the web browser to use a computer value for the margins. In most cases, this means that there will be no margins (other than those specified within the content of the document).

Currently, none of the major browsers support the margin properties, but you can get a similar behavior for the left and right margins by applying the margin-left and margin-right properties to the body element.