Sept. 29, 2000 > Tag of the Week
Print This!
The history of HTML is somewhat like a romance novel: full of pent up desire and answered prayers. While it is unlikely that the story of HTML will become a bestseller, the latest advance in the standard is sure to quicken the pulse of any HTML author.
At Long Last, Printing
Of all HTML's shortcomings, one of the worst has been a consistent printing model. Even today, Netscape and Internet Explorer print the same page in dramatically different ways, with different page breaks, margins, and layout rules. No matter how much time you spend carefully crafting the exact layout of your page within the browser, you are left helpless as it is transmitted to the printer. Unlike fonts, alignment, tables, and other HTML features that always had some sort of workaround until a standard saved the day, standardized printing has been completely impossible. Until now.
The Cascading Style Sheets Level 2 standard (CSS2) defines, for the first time, a consistent model for managing the printing of HTML documents. This model begins by defining page sizes and layouts, allows you to assign those layouts to your documents, and goes on to let you manage page breaks, widows and orphans, and all the other aspects of printing you've come to know and love.
Over the next several weeks, we'll explore CSS2 printing in detail. To get things started, let's begin with an overview of the rules and properties you'll be using to define and use CSS2 printing features in your documents.
Boxes, Rules, and Properties
The CSS2 model uses a special rule, @page, to define the size and layout of a printed page. This rule has a number of properties that you can use to define everything from a simple page to complex documents with multiple right- and left-side layouts sporting crop marks.
You can define any number of pages in your document, applying them to specific portions of the flow to ensure that your content is printed correctly. For example, you might define a normal portrait page layout for most of the content of your document, but several wide tables require a landscape layout to print correctly. You can assign the appropriate page to each element in your document, ensuring correct printing.
Once you've defined your page layouts, you assign them to elements in your document using the page attribute. If adjacent elements use different page layouts, page breaks are inserted to get the right content on the right page.
Beyond these automatic page breaks between page types, you can use the page-break-before,page-break-after, and page-break-inside properties to cause page breaks to appear where you want them, not where the browser arbitrarily decides they should go. In addition, you can use the orphans and widows properties to control how leading and trailing lines of paragraphs are treated when a page break occurs.
If you've ever managed page layouts and pagination using a tool like Word or WordPerfect, you'll find the CSS2 model easy to use and understand. Even if such printing features are new to you, the CSS2 model makes it simple to get your documents to print correctly, something that was never before possible in HTML. Before all these capabilities give the more delicate among you the vapors, rest up and return next week for an in-depth look at the @page rule.
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
