Beginning XHTML | 12 | WebReference

Beginning XHTML | 12

To page 1current pageTo page 3To page 4To page 5
[previous] [next]

Beginning XHTML

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 } 
    }
  2. 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).
  3. 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>
  4. 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:
    1
  5. From within the browser, use File | Print to print the document. Two pages that look something like this should print:

    2

    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.

  6. 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 } 
    }
  7. Save the file as pb-before.css (i.e. we are adding a page break to this style sheet).
  8. 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>
  9. Save the file as pb-before.htm and run it in your browser. You should see something like this:
    3
  10. Print the document as before; it should now look something like this:
    4
To page 1current pageTo page 3To page 4To page 5
[previous] [next]


Created: April 19, 2001
Revised: April 19, 2001

URL: http://webreference.com/authoring/languages/xhtml/beginning/chap13/3/