Printer-Friendly Sites

October 8th, 2008 by admin Categories: Web Dev. No Responses

The paperless office is a mythical creature.  In fact, I’m fairly certain I saw it in the background of the final scene in the Lord of the Rings movie.  It appeared to be eating a treant.

The fact is that offices and individuals still use a massive amount of paper in their daily business.  The internet, while cutting down on vast paper resources used for directories, advertising and records, has also created an increase in on-demand printing.  People still print information found on the web for records, for later perusal, or to stick on the fridge at work (generally to harass fellow employees while maintaining plausible deniability).  However, nothing is worse that broken paragraphs or misplaced headings (the next section heading being the last line on a page).

Our issue then becomes one of ensuring that information on our web pages is printed in a manner that allows for proper layout and readability.  We can accomplish this using either (or both) of the following methods:

Page Breaks
Apply page breaks to your html tags (They MUST be in the html tags of the page itself) using styles.

style=”page-break-before: always;”

style=”page-break-after: always;”

As you can guess, the first style forces a page break after the current tag closes.  The second forces a page break before the current tag opened.  Here’s two examples:

<h2 style=”page-break-before: always;”>My Section Heading</h2> This creates a page break prior to the heading “My Section Heading” on the document.

<p style=”page-break-after: always;”>blah blah blah </p> This creates a page break after the current paragraph ends (closes)

Murdering Orphans
For this example you will need some cotton candy and a baseball bat wrapped in barbed wire.  haha?

No, seriously, we just need our stylesheet.

‘Orphans’ are the first line of a paragraph that appears at the bottom of a page.  It is the opposite of a ‘widow’ which is the last line of a paragraph at the top of a page.

To solve these problems, edit the style of  your p tags by adding something like the following on your style sheet:

p {
widows:5;
orphans:10;
}

This will force 5 or more lines of text at the top of a page and at least 10 lines of text at the bottom of a page.  If the printer cannot provide these then the entire paragraph is shifted.

Bookmark and Share

 

Comment on Facebook