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:
Try It Out - Using the 'page-break-before' Property
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:
@media screen, print {
body { font-size: 18pt }
h1 { font-size: 24pt; text-transform: uppercase; text-align: center }
.stage { font-style: italic }
p.stage { text-align: center }
}
@media screen {
body { font-family: sans-serif }
span.speaker { background-color: yellow }
}
@media print {
body { font-family: serif }
span.speaker { font-weight: bold }
}
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):
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Page Break Example
<link rel="stylesheet" type="text/css" href="pb-none.css" />
</head>
<body>
<p><span class="speaker">Ferdinand.</span>
So they are:<br />
My spirits, as in a dream, are all bound up.<br />
My father"s loss, the weakness which I feel,<br />
The wrack of all my friends, or this man's threats,<br />
To whom I am subdued, are but light to me,<br />
Might I but through my prison once a day<br />
Behold this maid: all corners else o' th' earth<br />
Let liberty make use of; space enough<br />
Have I in such a prison.\</p>
<p><span class="speaker">Prospero.</span>
<span class="stage">(Aside)</span>
It works.--
<span class="stage">(To Ferdinand)</span>
Come on.--<br />
Thou hast done well, fine Ariel!--
<span class="stage">(To Ferdinand)</span>
Fol-
low me.--<br />
<span class="stage">(To Ariel)</span>
Hark, what thou else shalt do me.</p>
<p><span class="speaker">Miranda.</span>
Be of comfort;<br />
My father's of a better nature, sir<br />
Than he appears by speech: this is unwonted,<br />
Which now came from him.</p>
<p><span class="speaker">Ariel.</span>
To the syllable.
<p><span class="speaker">Prospero.</span>
<span class="stage">(To Ferdinand)</span>
Come, follow. - Speak not for<br />
him. <span class="stage">Exeunt</span></p>
<h1>Act Two Scene One</h1>
<p class="stage">Another Part of the Island</p>
<p class="stage">Enter Alonso, Sebastian, Antonio, Gonzalo, Adrian,
Franciso, and others
<p><span class="speaker">Gonzalo.</span>
Beseech you sir, be merry: you have cause,<br />
So have we all, of joy; for our escape<br />
Is much beyond our loss. Our hint of woe<br />
Is common: every day some sailor's wife,<br />
The masters of some merchant and the merchant,<br />
Have just our theme of woe; but for the miracle,<br />
I mean our preservation, few in millions<br />
Can speak like us: then wisely, good sir, weight<br />
Our sorrow with our comfort.</p>
</body>
</html>
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:
@media screen, print {
body { font-size: 18pt }
h1 { font-size: 24pt; text-transform: uppercase;
text-align: center }
.stage { font-style: italic }
p.stage { text-align: center }
}
@media screen {
body { font-family: sans-serif }
span.speaker { background-color: yellow }
}
@media print {
body { font-family: serif }
h1 { page-break-before: always }
span.speaker { font-weight: bold }
}
Save the file as pb-before.css (i.e. we are adding a page break to this style sheet).
Load the file pb-none.htm into your text editor and make the following changes to the <head> section:
<head>
<title>Page Break Before Example</title>
<link rel="stylesheet" type="text/css" href="pb-before.css" />
</head>
Save the file as pb-before.htm and run it in your browser. You should see something like this:
Print the document as before; it should now look something like this:
How it Works
In Step 1, you typed in the style sheet for your document. The style sheet consists of three sections that use the @media rule you learned about earlier in this chapter, and need only a brief mention here. The first section defines the style sheet properties that are shared when you view the document on the screen and when you print it; the second relates just to the screen, and the third just to the printing.
By comparing the @media screen style sheet properties with the @media print style sheet properties, we see the differences between displaying on the screen and printing on paper are:
- the document is displayed using a sans-serif font (like Helvetica or Arial) and is printed using a serif font (like Times Roman or Times New Roman)
- the speaker sections are displayed with a yellow background and are printed using bold text
In Step 3, we associate the style sheet with the document in the same way as we have done numerous times now:
<link rel="stylesheet" type="text/css" href="pb-none.css" />
In Steps 4 and 5 we run the document in Microsoft Internet Explorer and print the document on paper. The screen shot of the printed page should be close to what you print.
In Step 6, we add the following line to our style sheet:
h1 { page-break-before: always }
This line tells the web browser to always insert a page break before the <h1> element. This forces a new page for each section of our document. Thus, a page break is inserted before the heading 'Act Two Scene One', the only level-one heading our document contains. If you have lots of paper to spare, add <h1> to the beginning and </h1> to the end of each line in Gonzalo's speech (the last speech in the document) and print it out: you will see that each line is printed on a separate page.
Continued...
