Look BETTER when you print 2

[EdwardMartinIII]

Okay, I've figured out how, on my li'l web pages, to set up two different CSS files -- one for online viewing and one for printing.

Works great.

I've figured out how to have different picture classes visible or not, based on stylesheet. Very handy.

What I'm not sure yet is if I can do the following:

Imagine I have two pictures. One is 144 x 144 pixels at 72dpi (basically, 2" x 2" on the screen). It has been downsampled from a 600 x 600 pixels at 300 dpi image (2" x 2" in print).

Can I use the CSS such that online viewers see the 144 x 144 image (at approximately 2" x 2" on the screen) and people who print get the much higher resolution 600 x 600 in a 2" x 2" form factor?

Thanks!

Edward

"Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!" -- inventor of the cat door

 

[Vragabond]

You could put both pictures in your html, have one display none for the print stylesheet and display inline for screen and vice versa. If this is only one picture and it is important to have it like that than it is probably worth a try.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[traingamer]

See the A List Apart article on High-Resolution Image Printing for more on this.

Greg
People demand freedom of speech as a compensation for the freedom of thought which they seldom use. Kierkegaard

 

[EdwardMartinIII]

You could put both pictures in your html, have one display none for the print stylesheet and display inline for screen and vice versa."

Yep, I do this now, by using two different image styles.

Edward

"Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!" -- inventor of the cat door

 

[EdwardMartinIII]

See the A List Apart article..."

Oh, looks like someone's already done exactly this sort of thing. Niiiiice!

Edward

"Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!" -- inventor of the cat door

 

[EdwardMartinIII]

Thank you both -- you each provided a piece of the solution!

I made two stylesheets, one for print and one for web.

In the print stylesheet, I declared

img.img_print
{
  float: left;
  border: solid 1px #000000;
  display: block;
}

img.img_online
{
  float: left;
  border: solid 1px #000000;
  display: none;
}

and in the web stylesheet, I declared

img.img_print
{
  float: left;
  border: solid 1px #000000;
  display: none;
}

img.img_online
{
  float: left;
  border: solid 1px #000000;
  display: block;
}

Then I made two images, one full-sized and one reduced to fit on web pages. I put both images side-by-side in the code. The low-res version was classed as "img_online". The hi-res version was classed as "img_print" AND I manually set its dimensions to those of the online proxy. So, it prints with the same dimensions, but much higher resolution.

Just tested it and it works great!

Thanks!

Edward

"Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!" -- inventor of the cat door