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.

Continued...