1

I have a completely fluid website that is designed primarily for printing. It stretches beautifully to any window or paper size:

body { width: 100%; }

However, for printed pages, some of my black lines and text become grey and I have 1px lines that don't print as solid lines, but more of a fuzzy grey dotted line. This seems to be because browsers are scaling the page on print, like the "Shrink To Fit" of IE.

So I see two options.

  1. Specify line widths and font sizes using css units that work well on print, potentially fighting against browsers in-built mechanisms to make pages print well when everything is specified in pixels. This question works at part of that without much success.

  2. Find the body width (8.5in? 7.5in? 90%? 800px?) which makes lines solid and text black for 8.5 inch wide paper.

Which approach is likely to be successful?

Community
  • 1
  • 1
brentonstrine
  • 21,694
  • 25
  • 74
  • 120

2 Answers2

2

You might consider using a separate stylesheet for print media, or perhaps just override offending styles with a @media print { /* rules here */} block at the end of your current stylesheet.

If you are designing a website for both screen and print, this will give you the most flexible way to independently control styling for both media.

Mike Brant
  • 70,514
  • 10
  • 99
  • 103
0

It could be an issue with the printer quality. 1px rendered in hi-res looks a bit different when it comes out of a 5 year old printer with print quality set to "fast draft".

Two easy troubleshooting options to try:

  1. Either increase the print quality and print in full color, or try it from a different printer.

  2. If it's possible, perhaps you could try to thicken the lines a bit? I know it may not work with your design, but sometimes the simplest answers are best.

Good luck man.

Rick
  • 31
  • 3