I am having trouple using a print stylesheet with this layout. I want to be able to click ‘print’ in the browser and it print a page that fits perfectly on the A4 printer paper. I don’t want to ‘shrink to fit’ but I want to set it so that the print out (or print preview) adjusts things and displays about 680px wide.
I am using media=“print” to set a stylesheet and it does pick it up and change nearly everything I want it to.
The problem is that it doesn’t change the width. I am trying to set something like 680px wide when viewing the print preview.
If I change the media=“print” to media=“screen” then this stylesheet is fully picked up and used in the normal web page view. I could set ?print=1 or something in the address bar but of course this is pretty poor web design.
I am trying to set something like 680px wide when viewing the print preview.
You never know what your printer can handle so you should avoid widths on printed output and just left it be auto (effectively 100%).
As I mentioned in other threads print stylesheets are very hit and miss still and need loads of trial and error to get things close to what you want.
Remove all floats and positioning and non essential items like navigation and non essential images (although most browsers will block background images form being printed anyway). Go for a much simpler printed output and you stand more chance of success.
As Paul said, don’t set a width for the page content. Depending on whether people are using A4 or Letter paper, modern laser printers or clunky old home printers, the available width could vary quite a bit. Just leave the width out altogether, and let the printer use all the available width.
But also - when you’re printing, don’t use px as a measurement. Just as using pt/cm/in is completely verboten when you’re working on screen (because they are physical measurements that won’t be replicated on screen), px is a measurement that is specific to screen displays, and is meaningless on paper. If you need to set font sizes then either use em/% as you would on screen, or set them in pt. If you need to set object dimensions then either use em/% or set them in cm/in.
If I change the media=“print” to media=“screen” then this stylesheet is fully picked up and used in the normal web page view. I could set ?print=1 or something in the address bar but of course this is pretty poor web design.
I’m not sure what you’re doing here. What should be happening is that in your <head> you have multiple stylesheets linked, eg
and then whatever format you are using, the appropriate stylesheet will be applied. So while you’re looking at it on screen in your web browser, it will apply the “styles.css” sheet. When you print, the browser applies the “print.css” styles as it sends it to the printer - and if you do a “Print preview”, the browser will apply the print stylesheet for that as well. There’s no need to do anything else to the HTML or to add a special link to a ‘print-friendly’ format, it’s all done automatically.