Printer Friendly

[Bob Johnson]

Some sites offer a separate "printer friendly" version of their pages.

1. What are they doing to their HTML to ensure that it prints out in a way
that looks good - and pretty close to what shows up on the screen?

2. How can I send such a page to the user's local/defualt printer?

Thank You!

 

[darrel]

1. What are they doing to their HTML to ensure that it prints out in a way

that looks good - and pretty close to what shows up on the screen?

There's really no such thing as that. The whole point of a printer friendly
version is that it is NOT the same as what you see on screen.

Typically, your printer friendly page will be set to 100% wide (so it will
only be as wide as the printed page...not wider), will reduce the amount of
solid-color images (swaping them with ouline versions, etc.), removes
unecessary navigation, etc. You can do a lot of this with CSS. You have a
CSS file for your screen, and one for your printer. The print CSS then
simply sets some DIVs to 'display: none' so they don't appear on the
print-friendly version.

2. How can I send such a page to the user's local/defualt printer?

You don't. Or, rather, you shouldn't. You can only do that in internet
explorer (using javascript) and that isn't usually preferred. Instead, you
have them load the printer friendly page in their browser and then let them
print it. This is MUCH more user friendly. I, for instance, will often click
on PRINTER FRIENDLY because it's actually easier to read in the browser. Or
perhaps I want to save it as text, etc.

If, instead, you are looking for a pixel-perfect replication of something,
then I suggest you consider writing out a PDF file instead and have them
print that.

-Darrel

 

[Kyril Magnos]

Bob,

The "usual" way to do it is to redirect to a dummy-down page (a page with
very little visual enhancement) and inject the content of the previous page
into the new one. This gives a bare-bones look to the page. Perfect for
printing.

To send output to the printer, you need to call the JavaScript
window.print(); function. It will open up the printer selection dialog on
the client.

--
HTH

Kyril Magnos

| Some sites offer a separate "printer friendly" version of their pages.
|
| 1. What are they doing to their HTML to ensure that it prints out in a way
| that looks good - and pretty close to what shows up on the screen?
|
| 2. How can I send such a page to the user's local/defualt printer?
|
| Thank You!
|
|
|

 

[Chris Becker]

Bob,
For a CSS way of doing it, see this page here:

http://www.onlinescorekeeper.com/Leagues/DivisionList.aspx?League=ccsa

First look at it on your screen. Notice the header and menu at the top of
the screen and the sponsorship info, etc. Then use IE or Firefox's print
preview function (other browsers may have preview as well, but these are
what I am familiar with) to see the page as it will be sent to the printer.
Notice that the header and menu are gone and the text at the top displays
when the page was "printed". This is all done using CSS (and might not be
totally functional in old browsers, but I have yet to hear my users
complain).

Here is the section of my css file that applies to printing only. Notice
the display:none and visibility:hidden:

/* == Print styles == */
@media print
{
.Page {page-break-after:always; page-break-inside:avoid;}
BODY {margin:0px 0px 0px 0px;}
BODY, TD, TH {font-size:11pt;}
TR, TD, TH {page-break-inside:avoid;}
A, A:Visited, .Matrix, .Matrix A, .Matrix A:Visited {color:#000000
!important; background-color:#FFFFFF; text-decoration:none !important;}
SELECT, .Footer, .Admin, .PageHeader, .Tabs, .NoPrint, .MatrixNoPrint
{visibility:hidden; display:none;}
.PrintDate {visibility:visible; display:block; font-weight:bold;
font-size:smaller; text-align:center;}
TABLE {width:100%;}
THEAD {display:table-header-group;}
.NewsItem {border:solid 2px black;}
.NewsSubject, .NewsText {color:Black;}
.NewsInfo {color:Gray;}
}

Full css:
http://www.onlinescorekeeper.com/Leagues/style/style.css

I like this solution better than having the user nav to a different printer
friendly page, but you mileage may vary.

Chris