Wattle Software - producers of XMLwriter XML editor
 Home | Site Map 
XMLwriter
 Screenshots
 Features
 About Latest Version
 Awards & Reviews
 User Comments
 Customers
Download
 Download XMLwriter
 Download Plug-ins
 Download Help Manual
 Downloading FAQ
Buy
 Buy XMLwriter
 Pricing
 Upgrading
 Sales Support
 Sales FAQ
Support
 Sales Support
 Technical Support
 Submit a Bug Report
 Feedback & Requests
 Technical FAQ
Resources
 XML Links
 XML Training
 XMLwriter User Tools
 The XML Guide
 XML Book Samples
Wattle Software
 About Us
 Contact Details
Beginning XHTML

Buy this book

Back Contents Next

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.

 

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</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 }

}

 

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.

The 'page-break-inside' Property

The page-break-inside property controls whether a page can break within an element. The page-break-inside property can have one of the following values:

 

auto

avoid

The value auto means that a page break should not be forced or forbidden within the element. The value avoid means that a page break should be avoided within the element.

Unfortunately, at the time that this book was written, neither Microsoft Internet Explorer or Netscape Navigator support the page-break-inside property.

The 'orphans' Property

The orphans property specifies the minimum number of lines of a paragraph that must be left at the bottom of the page when the page breaks. If less than this number of lines can be printed at the bottom of the page, the page breaks before the paragraph.

 

For example, if you wanted to make sure that at least 5 lines of text appear at the bottom of the page, you would write the following in your style sheet:

 

p { orphans: 5 }

Unfortunately, at the time that this book was written, neither Microsoft Internet Explorer or Netscape Navigator support the orphans property.

The 'widows' Property

The widows property specifies the minimum number of lines of a paragraph that can be printed at the top of the page when the page breaks in the middle of a paragraph. If less than this number of lines can be printed at the top of the page, the page breaks before the paragraph.

 

For example, if you wanted to make sure that at least 5 lines of text appear at the top of the page, you would write the following in your style sheet:

 

p { widows: 5 }

Unfortunately, at the time that this book was written, neither Microsoft Internet Explorer or Netscape Navigator support the widows property.

The '@page' Rule

The @page rule allows you to describe the page (or paper, in the case of printing): things like its size and margins.

 

The @page rules generally take a form similar to other style sheet rules:

 

@page {

   /* properties */

}

 

For example, if you wanted to set the left margin for all pages to be 4 centimeters, you would write:

 

@page {

   margin-left: 4cm;

}

 

The @page rules can also be customized for left side pages and right side pages. If, for example, you wanted to set the left margin for all left (@page :left) side pages to 3 centimeters, and the left margin for all right (@page :right) side pages to 4 centimeters, you would write:

 

@page :left {

   margin-left: 3cm;

}

 

@page :right {

   margin-left: 4cm;

}

 

In addition, you can name your page rules, but we will talk about that later. First, we will learn about some of the @page rule properties: size, margin, and marks.

Unfortunately, at the time that this book was written, neither Microsoft Internet Explorer nor Netscape Navigator support any of the @page rule features. It is still a good idea to be familiar with these features since, given the rate of change within the Internet, we may see these features implemented soon!

The 'size' Property

The size property specifies the size and orientation of the printed page. The size of a page can be either a fixed size or scalable.

 

Absolute

When you want the size of a page to be absolute (a fixed size), you specify the width and height using one of the following units:

 

in (for inches)

cm (for centimeters)

mm (for millimeters)

 

Thus, if we want to specify that the page size is 8 ˝ inches by 11 inches, we write:

 

@page { size: 8.5in 11in }

 

and if we wanted to specify A4 page dimensions in centimeters, we write:

 

@page { size: 21cm 29.7cm }

 

Relative

When we want the size of a page to be relative (scalable), we specify one of three values:

 

auto – used when we want the page size to be set to the size and orientation of the target pages (the paper, for example)

landscape – used when we want to override the target page's orientation and make the longer sides horizontal

portrait – used when you want to override the target page's orientation and make the longer sides vertical

 

Thus, if we want to say that the page should be printed in landscape mode, we write:

 

@page { size: landscape }

 

As mentioned previously, at the time that this book was written, none of the major browsers supported this feature.


The Margin-Related Properties

The margin-related properties are used to set the left, right, top, and bottom margins of the page.

 

Property

Definition

margin-left

Sets the margin for the left side of the printed page.

margin-right

Sets the margin for the right side of the printed page.

margin-top

Sets the margin for the top of the printed page.

margin-bottom

Sets the margin for the bottom of the printed page.

 

For example, if we wanted a 4 cm margin on the left side of the printed page, we write:

 

@page { margin-left: 4cm }

 

If we wanted a 5 cm margin on the top of the printed page, we write:

 

@page { margin-top: 5cm }

 

The margin property is a short-cut for setting margins; it lets us set all of the margins using one property. For example, we could combine the following set of properties:

 

@page { margin-left: 4cm; margin-right: 3cm; margin-top: 5cm; margin-bottom: 2cm }

 

into the single property:

 

@page { margin: 5cm 3cm 2cm 4cm } /* top right bottom left */

 

Note that the order for the margin properties values is top, right, bottom, left (you can imagine the order as moving clockwise around the page, starting from the top).

 

The margin property does not require you to type in four values. In fact, you can type in anywhere from one to four values. If you write:

 

@page { margin: 5cm }

 

you will set the top, right, bottom, and left margins to 5 centimeters. If you write:

 

@page { margin: 5cm 3cm }

 

you will set the top and bottom margins to 5 centimeters and the right and left margins to 3 centimeters. If you write:

 

@page { margin: 5cm 3cm 2cm }


you will set the top margin to 5 centimeters, the right and left margins to 3 centimeters, and the bottom margin to 2 centimeters.

 

This may sound rather confusing, but it stems from the fact that most documents either have all of their margins set to the same size, or the top and bottom margins set to the same size and the left and right margins set to another size, or the left and right margins set to the same size but the top and bottom margins differ. The following table should help, where we have used the abbreviations 't' for top, 'l' for left, 'b' for bottom and 'r' for right:

 

Number of values in margin property

Description

1

t+l+b+r=same

2

t+b=same, l+r=same

3

t, l+r=same, b

 

While our examples above are all done using centimeters, the margins can be specified as a percentage, a length, or as the auto value.

Percentage

If you specify a percentage value, the margin is calculated as a percentage of the width or height of the page (the width of the page is used for the margin-left and margin-right properties, and the height of the page is used for the margin-top and margin-bottom properties).

Length

If you specify a length value, the margin is set to an absolute value. As with the size property, only the in, cm, and mm units may be used. Font units cannot be used because a piece of paper has no notion of font metrics.

Auto

If you specify this keyword, you are telling the web browser to use a computer value for the margins. In most cases, this means that there will be no margins (other than those specified within the content of the document).

 

Currently, none of the major browsers support the margin properties, but you can get a similar behavior for the left and right margins by applying the margin-left and margin-right properties to the body element.

Try It Out – Applying Margins to the Body Element

In this exercise, we will apply the margin property to the body element. We would like to be showing you how to apply margins to the @page rules, but since they don't currently work in the major browsers, this is the next best approach.

2.       Load the file pb-none.css into your text editor and make the following changes:


 

@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; margin-left: 3cm; margin-right: 3cm }

   span.speaker { font-weight: bold }

}

 

Save the file as pb-margins.css

Load the file pb-none.htm into your text editor and make the following changes:

<head>

  <title>Page Margin Example</title>

  <link rel="stylesheet" type="text/css" href="pb-margins.css" />

</head>

 

Save the file as pb-margins.htm and run it in your browser. You will see the same screen shot as before because we have not changed the screen style sheet properties, so we will not show that shot here.

However, you should see a difference when the document is printed:


How it Works

In Step 1, we described how we wanted the document to print by specifying three @media rules. If you look at the third @media rule:

 

@media print {

   body { font-family: serif; margin-left: 3cm; margin-right: 3cm }

   span.speaker { font-weight: bold }

}

 

We can see that we specified that the left margin and right margin should be 3 centimeters. Notice that we did not assign these properties in the @media rules for the screen media type or the shared screen and print media rules. This means that the margins will only be seen when the document is printed.

 

In Step 2, we associate the style sheet with our document, and in Step 3 we load the document into Microsoft Internet Explorer.

 

As you can see in Step 3, there is no hint of a margin. This is because we did not specify any value for the margins for the screen media type in Step 1.

 

In Step 4, we print the document and the margins appear; this is because we specified margins for the print media type in Step 1.

The 'marks' Property

You use the marks property to display crop marks and cross marks on the printed page. Crop marks indicate where the paper should be cut; this is important when you print a document on a page that is larger than the target page size. Cross marks are used so that multiple pages can be aligned.

 

To show crop marks, we write:

 

@page { marks: crop }

 

and to show cross marks, we write:

 

@page { marks: cross }

 

If you do not want to show any marks (which is the default), we write:

 

@page { marks: none }

 

Since crop and cross marks appear outside of the normal page area, they can only be seen if you set your page size, using the @page rule's size property, to an absolute value.

Naming @page rules and the page property

As mentioned earlier, the @page rules can be applied to the entire document by writing:

 

@page { /* properties */ }

 

to left hand pages by writing:

 

@page :left { /* properties */ }

 

and to right hand pages by writing:

 

@page :right { /* properties */ }

 

In addition, you can name @page rules so that you can apply them with greater fidelity. To name an @page rule, you write:

 

@page name {/* properties */ }

 

where name is replaced with the name of your rule. For example, if you wanted to write an @page named 'rotated' that forced an element to appear in landscape mode, you would write:

 

@page rotated { size: landscape }

 

This named @page rule can then be applied to an element by using the page property. For example, if you wanted all tables to appear on paper in landscape mode, you would write:

 

@page rotated { size: landscape }

table { page: rotated }

 

This means that all tables will appear on pages that are printed in landscape mode. If it happens that the page containing the table is being printed in a different mode, a page break will be inserted before the table, forcing the table to appear on a new page printed in landscape mode.

 

Unfortunately, as mentioned before, the @page rules are not currently supported in the major browsers, so we do not have the chance to use these properties in practice!

 


BackContentsNext
©1999 Wrox Press Limited, US and UK.

Buy this book



Select a Book

Beginning XML
Beginning XHTML
Professional XML
Professional ASP XML
Professional XML Design...
Professional XSLT...
Professional VB6 XML
Designing Distributed...
Professional Java XML...
Professional WAP

© Wattle Software 1998-2019. All rights reserved.