am wondering what the best approach is here, that works without JavaScript…
I have a website in which bg color for all pgs is a dark-ish gray, and black font (headlines and subheadlines are white) now there will be a ‘print’ link on every page… and this has to take user to a print version of the page (i.e., that ‘print’ page has to have white background, and those headlines have to be black (also there’s a logo link to home pg on every page, will have to load a diff logo for ‘print’ pgs…)
what is best approach here, without having to recreate the pages (would be a huge pain – every time there’s content revision would have to be done in two pgs) and without using JavaScript (is it possible to load diff styles (or a diff stylesheet) for the same pg dynamically w/o JS? probably not, right?) all I would have to do is load class “print” in body, but would need JS for that…
yep, I totally agree… removed everything except logo on top of pg (and another logo @ bottom of pg), main content area, and copyright and legal stuff at bottom…
I like this… how system knows, once you send a page to print, to load print styleshyeet…
thank you very much… I should have researched before posting here… hadn’t thought of ‘print’ stylesheet… have never done before… what u posted is exactly what I found… was wondering at first, if would have to rewrite entire stylesheet for print… but you’re right, if you put media=“screen” for yr main stylesheet and then media=“print” for the print stylesheet you don’t have to… also found good way to test … you just take out media=“print” for print stylesheet and you see page with the print styles (provided ‘print’ stylesheet comes after other stylesheet, I suppose…
get rid of ad banners? ha! wouldn’t they love that… (actually moot in my situation, since no ad banners in my site) however: hadn’t thought of removing nav, links, and floats (yikes, redo layout then…) but I guess if I have a layout in which left and right sidebars contain just nav, then can remove left and right sidebars, leave only main content div and remove float from that one…
It’s also worth mentioning that being eco friendly (green) has become big business these days. Reducing your visitors ink and paper consumption / wastage will not only save them a LOT of money in the long run (you would be shocked how expensive ink and paper can become if you work out the waste ratio) you’re also helping the environment. The end visitor doesn’t need to blow their color ink cartridges printing out an advertisement which (as has been said) requires a click to have any kind of effect. Printed documents do not need unnecessary elements and should only have the content (no repeat areas like navigation). If it’s purpose is to be clicked on, it shouldn’t be on the page. You’ll still have the advertising impact on the physical page, but there’s no excuse for forcing the visitor to incur added expense, just because you didn’t feel like removing unnecessary clutter. It would be doing your clients a disservice not to remove those elements.
Advertisers mostly couldn’t care less if you don’t have the ad banner on a printed page. What good does it do? Many ads are animated Flash anyway, so you’d only get one snapshot of the banner (if anything at all), and on many others, there’s no text to say where the ad takes you. Web ads are all about being clicked on - so having them in a printed page is completely pointless, and even advertisers recognise that!
If you’re printing a page off a website, what do you want? The content. And that’s it. So get rid of everything else. Yes, it means ‘redoing’ the layout, but it’s really really simple - once you’ve got rid of all the sidebars and navigation and other cruft, there’s very little (if any) layout left to do. And the simpler you make it, (a) the easier it is for you, and (b) the better it will print.
Nononono … no need to have a print link in any form …
The best thing to do is to set up a second stylesheet for printing, called something like “print.css”. You reference it with lines like
`
`
(If you don’t apply media="screen" then you will have to undo everything in styles.css for the print version, which is often more work than simply starting a new stylesheet from scratch)
In the print stylesheet, you should do things like:
hide all navigation, ad banners, and anything else whose only function is to be clickable.
simplify the layout, ideally get rid of all floats and positioning, and just have a nice linear flow.
change the colour scheme, so that you have black-on-white for text, no background colours, and any colours used will be distinctive and will work when printed in colour or greyscale.
for text-heavy pages, you might want to experiment with things like content:after to expand abbreviations or URLs, or page-break properties on headings.
Creating separate versions of a document on the fly is more work for you, and less obvious for users. One of the things that we should try to do, in subtle ways, is to educate the general surfing public about how to get the most out of their browsers. That means getting them to use native Print functions and Print Preview, and dispelling this expectation that we’ll hold their hand and provide a separate print-friendly version of every page … rather than just making pages that print properly first time!
