Complete CSS Guide: Printing Control with CSS

the complete CSS Guide

the house = of=20 style >> the=20 complete CSS Guide >> advanced=20 css >> CSS=20 for printing

Brought to you by Style Master CSS = editor

cascade=20 & inheritance | font=20 specification | generated=20 content | media=20 | printing

Westciv=20 Complete Standards Based Web Development Package: Style Master = + Layout=20 Master + HTML 4 Course + CSS Level 1 Course + CSS Level 2 Course + Color = and=20 Graphics Course + The Complete CSS Guide - Just $129.99

printing

CSS2 introduced a mechanism for closer control over printing web = pages that=20 are styled using style sheets. In this section, we'll look at how this=20 works.

There are two aspects to consider with printing. The = page,=20 and the contents of the page.

For the page, we need to consider what size it is, whether = it is=20 oriented as a portrait or landscape, what printing marks might be = required, and=20 what margin it has.

For the content we need to worry about where pages break, = and what=20 is done with widow and orphan lines of text (we'll explain these terms=20 below).

In CSS2, the page properties are defined by the @page=20 rule, while several new properties help control page=20 breaking.

The @page rule

At the heart of printing in CSS2 is the = @page=20 rule. This is similar to the @media rule, which you can = learn about=20 in the section on Media.

The @page rule defines a context for printing. = Essentially it=20 describes the paper sheet that the web page is going to be printed = on.

@page rules work very much like the standard statements = of a=20 style sheet, though they take properties specific to pages that no other = statement can use, and can also have margins specified using the = familiar margin=20 properties.

The properties of a page can be applied to every page, or differently = to left=20 and right hand side pages. When printing for bound publications, the = margins on=20 the left and right hand sides are usually different to take into account = the=20 center binding.

To specify properties for every page, the @page rule = has the=20 form @page {/* properties declared here */}=20
To specify the properties for left hand side pages, the = @page=20 rule has the form @page:left {/* properties declared here = */}=20
To specify the properties for right hand side pages, the=20 @page rule has the form @page:right {/* properties = declared=20 here */}

Named pages

@page rules can be named, which, in conjunction with the = page=20 property we will see below, allows particular elements to be printed on=20 particular kinds of pages (that is pages set up in a particular way). = For=20 instance, its easy to set up an @page rule for printing = figures.=20 Suppose we want to print any figures in landscape format. We can set up = a named=20 page like this

@page figures {

size: landscape

}

The name of a page is simply placed after the @page = keyword and=20 before the properties for the rule. Below we will see how the page = property=20 tells the browser which @page rule to use to print an = element.

Browser support

Detailed browser support information for this = feature can=20 be found in the full=20 version of the Westciv CSS Guide, or in our CSS=20 Browser Support Table.

page

What it does

page identifies the @page rule that should = apply to=20 the selected element. page provides the name of the=20 @page rule to be used. @page rules can be = named by=20 simply adding the name of the page after the @page keyword. = Above=20 we saw the example of a page called figures, to be used to ensure = figures are=20 printed in landscape format. This @page rule was

@page figures {

size: landscape

}

Now we want any of our "figures" to use this rule when they are = printed. To=20 do this, we use the page property.

img.figures {
page: figures
}

This says that images of class "figures" (i.e. elements marked up as=20 <img class=3D"figures">) should be printed using the=20 @page rule called "figures".

Possible values

page takes the value auto or an=20 identifier value.

auto specifies that the browser may print the element on = the=20 current page.

An identifier is the name of the @page rule to be used = for=20 printing this kind of element. An identifier comprises only upper and = lowercase=20 characters, hyphens and the characters 0 to 9. An identifier must = commence with=20 an upper or lower case character (not a number or a hyphen). Identifiers = must=20 not include spaces or underscore characters.

Default values

If no value is specified, the page is set to=20 auto.

Is it inherited?

An element does inherit the page property of the element = which=20 contains it.

Browser support

Detailed browser support information for this = feature can=20 be found in the full=20 version of the Westciv CSS Guide, or in our CSS=20 Browser Support Table.

Page specific properties

There are two sets of properties associated with how pages will = actually be=20 printed.

those that relate to the printed page itself, that is the = size, the margin and the=20 marks properties. These can only be applied to= @page=20rules. Here we will refer to these as Page properties.=20
Those that relate to how the content is displayed within = those=20 pages. These properties are the page-break-before,=20 page-break-after, widows and=20 orphans properties. These can be applied to any = elements.=20 Here we will refer to these as Page break properties.

Page properties

Size

What it does

The size property of an @page rule allows = the=20 printing context for a web page to be established. The size of a page = can be=20 either absolute, that is specified by a width and height (see = below for=20 details) or relative (specified by one of the keywords=20 auto, landscape and = portrait.)

Possible values

size can be specified as either an absolute value, or as = a=20 relative value using keywords. Where a relative value is assigned, the = browser=20 can scale the content to fit the page size. Where an absolute value is = assigned=20 the browser must determine how to place content that is smaller than the = size of=20 the page.

Absolute values

Where an absolute value is to be specified, the size is = assigned=20 using length values. The values for width and height respectively are = separated=20 by simply a space. For example

@page {size: 21.0cm 29.7cm} /* A4 page = dimensions in cm=20 */

As a page has no concept of fonts, length units cannot be em = and ex=20 units.

Keywords

The following keywords are defined by the CSS2 specification.

auto The page box will be set to the = size=20 and orientation of the target sheet (ie, as the page has been setup).=20
landscape Overrides the target's=20 orientation. The page box is the same size as the target, and the = normal=20 direction of layout runs parallel to the longer target side.=20
portrait Overrides the target's = orientation.=20 The page box is the same size as the target, and the normal direction = of=20 layout runs parallel to the shorter target side.

Default values

By default the size of a page is auto.

Browser support

Detailed browser support information for this = feature can=20 be found in the full=20 version of the Westciv CSS Guide, or in our CSS=20 Browser Support Table.

marks

What it does

For professional level printing, crop marks indicate where the page = is to be=20 cut. The marks property enables crop marks to be set for a = page.=20 Crop marks only appear where absolute values are used for size. Where a = relative=20 value is used, the crop marks appear outside the content, and as this is = scaled=20 to fit the target page, no crop marks appear on the printed page.

Possible values

marks is specified by one of several keywords

crop Crop marks indicate where the = page=20 should be cut.=20
cross Cross marks (also known as = register=20 marks or registration marks) are used to align sheets.=20
none Don't render any special marks. =

Default values

By default the marks of a page is none.

Browser support

Detailed browser support information for this = feature can=20 be found in the full=20 version of the Westciv CSS Guide, or in our CSS=20 Browser Support Table.

margin-left, margin-right, = margin-top,=20 margin-bottom, margin

What it does

Margins are the only general properties from CSS that can be applied = to=20 pages.

The margin properties set the top, left, bottom, right and all = margins=20 respectively.

Possible values

Margins can be specified as either a percentage, a length or using = the=20 keyword auto.

Margins can be negative values.

Percentages

A percentage margin value sets the affected margin to that percentage = of the=20 width or height of the page. For instance, a = margin-right:=20 20% sets the width of the right margin to 20% of the width of the = page.=20 margin-top: 20% sets the height of the top margin to 20% of = the=20 height of the page.

Length values

We cover length=20 values in detail in our section on values. With length values, you = can set=20 the margin to an absolute value, or a value relative to the size of the = element=20 itself. Note that because a page has no concept of fonts, the em and ex = units=20 cannot be used to set the margin of a page.

Default values

If no margin value is specified, the margin of a page is zero.

Browser support

Detailed browser support information for this = feature can=20 be found in the full=20 version of the Westciv CSS Guide, or in our CSS=20 Browser Support Table.

Page breaking properties

When content is to be printed, we need to worry what happens about = page=20 breaks. Customarily, new sections begin on new pages. An author may want = a page=20 break inserted before a table or illustration.

CSS2 provides two properties which allow control over where the page = will=20 break when it is printed. These properties, = page-break-before and=20 page-break-after, can be applied to any element. They might = be used=20 to create a page break before headings of level one, or only headings of = a=20 certain class (for instance class=3D"section").

A further problem when printing documents arises when only a few = lines of a=20 paragraph can fit at the bottom of a page (these are referred to as=20 orphans) or only a few lines remain to be printed at = the top of=20 a page (these are referred to as widows). CSS2 provides = two=20 properties to specify what occurs with widow and orphan lines.

page-break-before

What it does

page-break-before specifies how or whether a page breaks = before=20 an element. You can specify that a page should not break before a = certain=20 element, or that it should, and that the next page should be a left or = right=20 hand page.

Possible values

page-break-before can take one of several keyword = values.

auto Neither force nor forbid a page = break=20 before the element.=20
always Always force a page break = before the=20 element.=20
avoid Avoid a page break before the = element.=20
left (For rendering to left and = right=20 pages.) Force one or two page breaks before the element so that the = next page=20 is formatted as a left page.=20
right (For rendering to left and = right=20 pages.) Force one or two page breaks before the element so that the = next page=20 is formatted as a right page.

Default values

If no value is specified, the page-break-before is set = to=20 auto.

Is it inherited?

An element does not inherit the page-break-before = property of=20 the element which contains it.

Browser support

Detailed browser support information for this = feature can=20 be found in the full=20 version of the Westciv CSS Guide, or in our CSS=20 Browser Support Table.

page-break-after

What it does

page-beak-after controls how or whether a page breaks = after an=20 element. You can specify that a page should not break after a certain = element,=20 or that it should, and that the next page should be a left or right hand = page.

Possible values

page-beak-after can take one of several keyword = values.

auto Neither force nor forbid a page = break=20 after the element.=20
always Always force a page break = after the=20 element.=20
avoid Avoid a page break after the = element.=20
left (For rendering to left and = right=20 pages.) Force one or two page breaks after the element so that the = next page=20 is formatted as a left page.=20
right (For rendering to left and = right=20 pages.) Force one or two page breaks after the element so that the = next page=20 is formatted as a right page.

Default values

If no value is specified, the page-beak-after is set to=20 auto.

Is it inherited?

An element does not inherit the page-beak-after property = of the=20 element which contains it.

Browser support

Detailed browser support information for this = feature can=20 be found in the full=20 version of the Westciv CSS Guide, or in our CSS=20 Browser Support Table.

page-break-inside

What it does

page-break-inside controls whether a page breaks inside = an=20 element. You can specify that a page should not break inside a certain=20 element.

Possible values

page-break-inside can take one of two values.

auto Neither force nor forbid a page = break=20 inside the element.=20
avoid Avoid a page break inside the = element.=20

Default values

If no value is specified, the page-break-inside is set = to=20 auto.

Is it inherited?

An element does not inherit the page-break-inside = property of=20 the element which contains it.

Browser support

Detailed browser support information for this = feature can=20 be found in the full=20 version of the Westciv CSS Guide, or in our CSS=20 Browser Support Table.

orphans

What it does

orphans specifies the minimum number of lines of an = element that=20 must be left at the bottom of a page when the page breaks. If fewer than = this=20 number of lines can be placed at the bottom of the page, the page breaks = before=20 the element and the entire element is printed on the following page.

Possible values

orphans takes an integer value. This value specifies the = number=20 of orphaned lines permitted.

Default values

If no value is specified, the orphans is set to 2.

Is it inherited?

An element does inherit the orphans property of the = element=20 which contains it.

Browser support

Detailed browser support information for this = feature can=20 be found in the full=20 version of the Westciv CSS Guide, or in our CSS=20 Browser Support Table.

widows

What it does

widows specifies the minimum number of lines of an = element that=20 must be left at the top of a page when the previous page breaks. If = fewer than=20 this number of lines can be placed at the top of the page, the page = breaks=20 before the element and the entire element is printed on the following = page.

Possible values

widows takes an integer value. This value specifies the = number=20 of widowed lines permitted.

Default values

If no value is specified, the widows is set to 2.

Is it inherited?

An element does inherit the widows property of the = element which=20 contains it.

Browser support

Detailed browser support information for this = feature can=20 be found in the full=20 version of the Westciv CSS Guide, or in our CSS=20 Browser Support Table.

cascade=20 & inheritance | font=20 specification | generated=20 content | media=20 | printing

Brought to you by Style Master CSS = editor