Controlling Page Breaks

Browsers can show very long pages in a single window thanks to the scroll bar. When visitors go to print a page, the contents of particularly long pages must be divided to fit on a given paper size . CSS lets you control where those page breaks should occur.

To control page breaks before elements:

In the style rule, type page-break-before: when or page-break-after:when , where when is one of always (so that page breaks always occur before/after the selected elements), avoid (so that page breaks only occur before/after the selected elements when absolutely necessary), or auto (to let the browser decide).

To keep elements from being divided between two pages:

In the style rule, type page-break-inside: avoid .

Tips

The page-break-before and page-break-after properties theoretically accept values of left and right (to make pages start on the left or right side, respectively), but those values are currently not supported on any browser.
The default value for all of the page break properties is auto . Only page-break-inside is inherited.
Currently, page-break-before and -after elements are supported by IE, Firefox, and Opera, though Explorer and Firefox don't understand the avoid value. Only Opera understands page-break-inside .

Figure 14.5. I don't want paragraphs to be divided between pages so I use `page-break-inside:avoid` . So that each second level header starts on its own page, I add `page-break-before:always` to the `h2` tags.

Figure 14.6. By putting a page break before each `h2` element (like `The Storm` ), I ensure that they start on a a fresh page. Notice also the extra space at the bottom of the page since the paragraph that followed was too big to fit in its entirety (and "inside page breaks" were to be avoided). Instead the entire next paragraph will be printed in full on the following page.

Printing Link URLs

Since link URLs are not shown on a Web page, they are not usually printed with the page either. The CSS content property can reveal those URLs in the printed edition of your page. Too bad Internet Explorer (up to and including version 7) still doesn't get it.

To print link URLs:

1.	If desired, remove the styling from your links by typing `a {text-decoration: none; color : black}` .
2.	Add a new pseudo-selector for adding content after links by typing `a:after` .
3.	Type the beginning `{` for the declaration.
4.	Type `content:` to specify which content should appear after links.
5.	To precede the link URL with a space and parentheses, type `" ("` .
6.	To add the URL itself, that is the value of the `href` attribute of the `a` element, type `attr(href)` .
7.	To add the final parentheses, type `")"` .
8.	Type `;` to complete the rule.
9.	Add additional formatting for the link URL, if desired. I used `font-style: italic;` .
10.	Finish the declaration with a `}` .

Tips

The content property is supported by Firefox, Opera, and Safari, but not Internet Explorer. Sigh.
You can keep internal linksthat is links to other parts of the same pagefrom printing out with a:not([href^='#']) :after as the selector in step 2. It's ugly but it works in Firefox and Safari.

Figure 14.7. First I remove the typical coloring and underlining that on-screen links get. Then I take the `HRef` attribute of the selected element and add parentheses and finally italic formatting to it.

Figure 14.8. The value of the link's `href` attribute, which is the URL that we want, is printed after the "click-me" part of the link (in this case, my name ), enclosed in parentheses and styled with italics (on the very last line shown).

Flylib.com

Category list

Similar pages

Controlling Page Breaks