Oct. 20, 2000 > Tag of the Week
Even More CSS2 Printing Power
With basic CSS2 printing issues covered, we can move on to more complex issues. This week, we'll see how to use named page layouts in your documents and how to control widows and orphans.
Using Named Page Layouts
A few weeks ago, we learned how to associate a name with a specific page layout, by placing the layout name after the @page rule that defines the layout. We've also seen how to create different versions of a named page layout corresponding to the first, left, and right pages in the printed document, using appropriate pseudo-classes immediately after the page name.
To apply a named layout to a flow, you use the page property to associate the layout name with an element in your document. Beginning with that element, and continuing until an element specifies a different layout, content will be printed using the named layout.
Specifying a named layout causes a page break if the previous element uses a different named layout. For this reason, you need to exercise some care in how you change layouts in your document. If you use a style sheet to associate a specific layout with all instances of an element, you may cause problems if adjacent elements use different layouts.
You may find it more useful to create style classes that can be used to mark where new layouts begin. For example, if you have defined page layouts named normal and wide, you could then define these classes:
.wide-page { page : wide }
.normal-page { page : normal }
Later in your document, when you want to switch to a wide layout, you can add class=wide-page to the first element to appear in the new layout. When you need to switch back, use class=normal-page in a similar manner.
Controlling Widows and Orphans
I don't have much advice for controlling human widows and orphans, but CSS2 does try to make printing widows and orphans more manageable. In the printing world, the few lines of a paragraph stranded at the top of a page are known as widows. Similarly, a few lines left at the bottom of the page are known as orphans. In general, a single widow or orphan on a page makes for an unattractive layout, so a good printer tries to adjust page breaks to keep bad breaks from happening.
Within CSS2, you can use the widows and orphans properties within an @page rule to define the minimum number of widow and orphan lines that can be left at the top and bottom of the page. Both properties accept a single numeric value that defines the minimum number of lines that you find acceptable. If a page break within an element would leave fewer than that many lines, the page break is adjusted to move more lines to the top or bottom of the page.
By default, both of these properties are set to two. This is almost always a good general value. Unless you have some specific layout problem you are trying to fix, you should rarely find it necessary to adjust these properties.
Looking Ahead
At this point, we've covered most of CSS2 printing. Next week, we'll close out the topic with complete coverage on how to create and control page breaks in your documents.
Chuck is the author of the best-selling HTML: The Definitive Guide and now, the fourth and expanded edition, HTML & XHTML: The Definitive Guide. He also writes on a variety of Internet and Web-related topics for a number of online magazines.
Previously in Tag of the Week
CSS2 Standard Tour: Begin Here
Attribute Sectors in One Quick Bite
Print This!
Using CSS2 to Layout HTML Pages for Print
CSS2 Printing: Left and Right Layouts
Of related interest: See the Web Review Style Guide, edited by Eric Meyer.
