Beginning XHTML | 13

Beginning XHTML

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 nor Netscape Navigator supported 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 nor Netscape Navigator supported 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 nor Netscape Navigator supported 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:

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 supported 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!