Defining Pages for Printing
Have you ever printed a Web page and been amazed at just how badly the page printed? All kinds of nasty things can happen. The most annoying is probably when the text runs off the left side of the page, but there are other annoyances, as well. The Web, after all, was originally intended as a browsing medium. And although researchers who use the Web and write simple HTML pages can always be counted on to format their HTML in a way that makes their pages suitable for printing (largely because they simply eschew bells and whistles), those of us with an eye for design tend to run into some problems. This problem is less common on today’s modern Web, partly because CSS allows Web authors to control the way a page looks in print. You might not even notice that a Web page contains very specific formatting instructions when simply viewing it in a browser, because many of the properties associated with print-based formatting are not designed to appear in the browser, but instead provide instructions as to how the printer should manage the flow of a page. This chapter takes a look at how to use CSS to pass instructions to the printer to make your Web pages look more readable. CSS support for printed media is not particularly strong yet, but it gains with each new browser version, so it’s worth taking a look at (even those CSS properties that don’t yet have full browser support).
The Page Box Formatting Model
If you’ve ever worked with a desktop publishing platform using software such as Quark XPress, InDesign, or PageMaker, you’re probably familiar with the concept of a page box, within which fits everything that must go on a page. Even if you haven’t worked with desktop publishing software, you’ve probably seen precursors to the Web’s page box formatting model in word processing packages you’ve used.
When you work in a word processing or desktop publishing environment, you work with finite page sizes and page margins. The CSS page box formatting model is an attempt to replicate this for browser-based media. The page box model is based on the CSS box model .
The CSS box model.
Simply extends the box model to reveal two major areas:
- The page area, which contains all of a page’s elements.
- The margin area, which surrounds the page area. When a page area size is specified, the margins, if any, are subtracted.
On top of the page box, the model is expanded still further to account for the difference between continuous media, as represented by a browser, and paged media, which consists of discrete and specific page entities. This expansion is represented by the visual formatting model, which allows transfer of the continuous media as seen in a Web browser to an actual sheet of paper or transparency (or even film).