|
||||||||||
|
Basic concepts |
||||||||||
|
||||||||||
|
Advanced concepts |
||||||||||
|
Transferring page boxes to pages
Page-break-before and page-break-after
CSS2 provides support for paged media. Paged media are the CSS media types of projection, handheld and embossed.
This allows the size of the page box (i.e., the the page where content is placed) and the size of the margins to be specified.
Since the page model has no conception of fonts, ems and exes are not permitted on @page.
The page box is the 'page' that is used for output. You specify the size of the page box using the size property.
Valid keywords for size are auto, portrait, landscape, or one or two lengths, where the first length refers to width, and the second to height, and if the second is omitted, it is assumed to be equal to the first.
@page {size: 8.5in 11in}
Percentages are not valid.
It should be noted that lengths on size require a page that is as large as the @page.
Portrait specifies that the page box is the size of the target (e.g., the piece of paper) but that the longer sides are the vertical ones. Landscape specifies that the page box is the size of the target but that the longer sides are the horizontal ones.
It should be noted that page boxes are not the same as pages. Typically, the page box is smaller than the page. As a result, it is recommended that the page box is centered within the sheet. However, this is not necessarily so.
If the page box is larger than the page, the page will either be scaled down or rotated to fit.
Within @page, the margin properties apply as normal; however, paddings and borders do not apply.
The normal margin propertiess are used to specify margins. Margins are applied inside the page box. Thus size: 8.5in 10in; margin: 2in results in a page area of 4.5 × 6 inches (if BODY and HTML have margins, this applies on top of this).
% on margins refer to to the page box height in the case of vertical margins and to the page box width in the case of horizontal margins. Negative margins are valid, but it this may be clipped.
Some printing methods print marks just outside the page box. This property specifies the type, equal to crop (these are used to indicate where the page should be cut), cross (these are used for page alignment) or none. E.g., marks: crop cross (to specify both) or marks: cross.
Double-sided documents may require different page boxes (e.g. left and right margins reversed) on the left and right side. These pseudo-classes permit that (note the compulsory space):
@page :left {margin: 0 .75in 0 1in}
@page :right {margin: 0 1in 0 .75in}
These will be used even if the printer does not print doublesided documents.
This pseudo-class applies to the first page. E.g., @page :first.
This is applied to an @page block so that it can be referred to by an element.
@page bob {... }
The example above would mean that the element that asks to be on the page called bob must be put on a page of the dimensions specified.
Whereas the properties above apply only to the @page rule, these apply to block elements.
Valid values are: auto (permit a page break before (after) the element - initial value), always (always force a page break before (or after if p-b-after) the element), avoid (avoid a page break before (after) the element box), left (force 1 or 2 page breaks before (or after) the element so that the next page is formatted as a left page) and right (force 1 or 2 page breaks before (or after) the element so that the next page is formatted as a left page)
These are not inherited.
These are supported by IE 4 and 5.
Valid are avoid (avoid a page break inside the element) and auto (permit a page break inside the element - initial value). It is inherited.
TABLE {page-break-inside: avoid}
These are specified as an integer, initially 2, are inherited, and apply only to block elements.
Orphans refers to the minimum number of lines of an element that can be left at the bottom of a page, and widows to the minimum numbers of an element that can be left at the top of a page. E.g., P {orphans: 2}.
This forces the element onto the page of the specifications defined by an @page rule. If the element is not on such a page already, there will be a page break before an element on a specified page. Page applies only to block elements, and is inherited. It might be useful for forcing some or all tables onto landscape pages. The alternative and initial value is auto.
FORM {page: bob}
The next section of this tutorial deals with @font-face.
Copyright © RichInStyle.com 2000; all rights reserved. See copyright document for terms of use. Please visit Bukit Lawang flood appeal.