Printer Friendly Website Script

[spenland]

Hi guys, I'm looking for a script that when the user clicks a print icon, a printer friendly version will be shown that will allow the user to print the page successfully on letter size paper.

I'm using a tableless design with DIV tags and CSS, so I was thinking all I need to do is remove the stylesheet from each page. Is this the best way to go? Do you have any other ideas?

[speed]

The easiest option is to just create a style sheet for the print, http://alistapart.com/articles/goingtoprint/

[spenland]

Thanks Speed that is exactly what I was looking for!

[alciere]

You might also consider creating a PDF file for the user to download.

[spenland]

OK scratch that, I'm having some trouble getting this print thing to work properly. Basically my webpage is 900px wide, with a 200px sidebar on the left. I'm making all the images, menus, and sidebar with the display:none property with no problems. The problem is that the text is not wrapping properly, several words get cut off and if I decrease the font I just can fit more words on the line but it still gets cut off! grrrrrrr

My CSS is pretty complicated, I have a mix of relative and absolute DIVs to achieve the look that my company wants. Any advice?

[ronbaker1]

It's easy - for print pages, I create a "print" style sheet in addition to the "screen" media style page. Usually, I make a copy of the screen style page. And, I set "display:none" for any elements that I don't want on the printed page, such as the navigation bar. I also make minor adjustments in the width(s) to make the content fit a printed page. For example, I make certain the page size fits the dimensions of a print page (around 660px in width for a portrait page).

You've indicated that your web pages are 900px, which means some of your text will not fit on a print page in portrait format. The result is some of the text is "cut off". I don't have your CSS style sheet to confirm my guess, but I suspect you need to reset the widths to fit the typical print page (around 660px).

You should find it fairly easy to tailor the screen style sheet to create a print style sheet, with a few changes.

Ron Baker
www.apex-systems.net
www.hilton-head-property.com
www.hilton-head-real-estate.biz

[DrTandem1]

Your web page and your printer-friendly page should be from separate sources. As someone mentioned, converting it to a PDF is a good option.

You need to realize that the print world is far different from the virtual world.

[ksawatzk]

Originally Posted by spenland

Hi guys, I'm looking for a script that when the user clicks a print icon, a printer friendly version will be shown that will allow the user to print the page successfully on letter size paper.

I'm using a tableless design with DIV tags and CSS, so I was thinking all I need to do is remove the stylesheet from each page. Is this the best way to go? Do you have any other ideas?

++++++++++++++++
Another thought would be to use 3 pages. A Server-Side Include page with the text, a Style 1 page with the SSI page that would display the way you want for your site layout, and a Style 2 page with the same SSI page with CSS set just for printing. That way you make text changes to the SSI page and never have to touch the layout for either...

[speed]

Originally Posted by spenland

OK scratch that, I'm having some trouble getting this print thing to work properly. Basically my webpage is 900px wide, with a 200px sidebar on the left. I'm making all the images, menus, and sidebar with the display:none property with no problems. The problem is that the text is not wrapping properly, several words get cut off and if I decrease the font I just can fit more words on the line but it still gets cut off! grrrrrrr

My CSS is pretty complicated, I have a mix of relative and absolute DIVs to achieve the look that my company wants. Any advice?

Assuming printing the web page is still what you want to do, without seeing the page in question it's hard to be specific, but as well as using display: none for the bit's you don't want, also change your containers width from 900px to 90%.

Using a % width should make the text wrap to fit but this does depend on what else you have on the page, i.e. a 900px wide image will probably scupper this.

Do you need to absolutely positioned items on the print version? I'm guessing you could leave them in the flow as in your first post you mentioned just removing the style sheet?

[TrafficProducer]

Print out , Hard copy, code Javascript, Just do the page as-is)

To Print: <a href="javascript:if (window.print != null) { window.print(); }
 else { alert('Your browser does not support this method of printing.
 Please select Print/File from your Browser Menu.'); }">Click here</a>
 or Select File/Print from your Browser Menu.

PDF could mean they keep a harddrive copy, pass-it on, (Viral Marketing) as well.

[spenland]

Cool thanks for the ideas, I've gotten it to work pretty good except for in IE of course, where it tends to still chop off a bit of text.

[Webnauts]

Should the company logo be included in the print version?

[TrafficProducer]

Should the company logo be included in the print version?

Why not?

and make sure you add a full URL e.g.

http://www.acomputerportal.com

As tags cannot link to website from hard copies.

Some print-outs allow Water-Marks, a faint background image.

[Webnauts]

Originally Posted by TrafficProducer

...and make sure you add a full URL e.g. http://www.acomputerportal.com. As tags cannot link to website from hard copies.

That is not true! Did you try to print a page of ours?
Check a print review of your pages, e.g http://www.webnauts.net

Originally Posted by TrafficProducer

Some print-outs allow Water-Marks, a faint background image.

I prefer this option instead of a logo. That is just 2 minutes work.

Thanks.

[TrafficProducer]

print review of your pages, e.g http://www.webnauts.net

I see a footer with the complete, (of the page to be printed), URL. No other URL's within the page are fully printed.

(This works for other sites as well)

Have you tried this with filenames with underscores in the name e.g. page_two.html etc??