Using the 'page-break-before' Property
October 30, 2000
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 }
}
[Note: The 3rd and 4th lines above are one line. They were split
for formatting purposes]
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</title>
<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-<br />
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>
<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>
<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 }
}
[Note: The 3rd and 4th lines above are one line. They were split
for formatting purposes]
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.
Printing and Paginated Media
Beginning XHTML
Other Properties
|
