Printing and Paginated Media

Earlier in this chapter, we talked about media groups. One of these media groups dealt with presentation to continuous and paginated media.

 

As we said before, paginated media is different from continuous media in that the document content is split into discrete 'pages' when it is rendered. Continuous media, as its name implies, does not split the document content, keeping it as one continuous entity when it is rendered.

 

In summary, there are three ways of handling printed media:

 

            print media type

            page breaking properties

            @page rule

 

You can use any or all of these methods when creating a document.

 

The print media type allows us to change the presentation of the document: things like whether to use a serif or a sans-serif font, which the font-size, background-colors, etc. We talked about the print media type and other media types earlier in this chapter.

 

The page breaking properties allow us to relate how content is displayed on the pages defined by the @page rule: things like avoiding page breaks before certain elements and forcing an image to appear on a right-hand page, etc.

 

The @page rule allows you to define the context for printing – in essence, it allows you to describe the paper: things like the size of the paper, its margins, and so on.

 

We will learn about the @page rule and the page breaking properties in the following sections.

 

Page Breaking Properties

Page breaking properties provide a way for us to control where page breaks (i.e. where one page ends and the next one begins) occur when our document is printed. New sections and chapters often begin on new pages and you may wish to control page breaks around images (perhaps forcing a page break before an image or preventing a page break following an image).

 

For example, if we want to make a paragraph start on a new page, we would write:

 

<p style="page-break-before: always">

  This is the first paragraph of text on a new page.

</p>

 

In this example, we set the page-break-before property to always, which means that a page break will always occur before this paragraph.

 

You can also use style sheets, as in this example:

 

h1 { page-break-before: always }

 

This means that every level-one header will start on a new printed page.

 

There are several page breaking properties:

 

page-break-before

page-break-after

page-break-inside

orphans

widows

 

Each of these properties can have different values that affect whether the page break occurs all of the time or under special conditions.

The 'page-break-before' and 'page-break-after' Properties

As you can guess, the page-break-before property controls whether a page break occurs before an element. Likewise, the page-break-after property controls whether a page break occurs after an element. Both of these properties can have one of the following values and meanings:

 

Value	page-break-before	page-break-after
"auto"	A page break should not be forced or forbidden before the element.	A page break should not be forced or forbidden after the element.
"always"	A page break should be forced (always occur) before the element.	A page break should be forced (always occur) after the element.

 

Value	page-break-before	page-break-after
"avoid"	A page break should be avoided before the element.	A page break should be avoided after the element.
"left"	One or more page breaks should be forced so that the element appears on the left hand page.	One or more page breaks should be forced so that the content appearing after the element appears on the left hand page.
"right"	One or more page breaks should be forced so that the element appears on the right hand page.	One or more page breaks should be forced so that the content appearing after the element appears on the right hand page.

 

In this example, you will get some experience using the page-break-before property, and see some dialogue from more than just Prospero.

 

1.       Type the following into your text editor:

 

 

Save the file as pb-none.css (the 'pb' represent 'page break', so you may guess that the 'none' refers to the fact that this style sheet does not contain any forced page breaks).

 

Now open your text editor and type in the following (remember, all the code for this book is available from the Wrox web site):

 

 

Save the file as pb-none.htm and load it into your browser (we are using Microsoft Internet Explorer). You should see something like this:

 

 

 

From within the browser, use File | Print to print the document. Two pages that look something like this should print:

 

Depending on your printer set-up, the document may not print on more than one page or the 'Act Two Scene One' may appear at the top of a second page.

If the document prints such that 'Act Two Scene One' appears at the top of the second page, remove the first paragraph from the document so that 'Act Two Scene One' appears somewhere on the first page.

Load the file pb-none.css into your text editor and add the following text: