Page 1 of 1

Different images in print vs screen stylesheets. Rate Topic: -----

#1 moopet  Icon User is offline

  • binary decision maker
  • member icon

Reputation: 339
  • View blog
  • Posts: 1,185
  • Joined: 02-April 09

Posted 27 May 2010 - 02:11 PM

I'm going to talk about images in print-media stylesheets. Sound exciting? Right :)

This is a quick tutorial for anyone who wants a different image to show up depending on whether the page is views on screen or printed.
I forsee a few questions, which I'm going to try to answer up front:

Q) Why don't you just set a different background-image in the print stylesheet?
A) Because (almost?) all current browsers override author styles with something similar to
background-image: none !important;


in their default styles, and there's nothing you can do about it. Basically, when you print a web page you (usually) get IMG images but not CSS background-images.

Q) Why don't you set the print version as the default and then use javascript to change it on page load?
A) Because I'd rather not rely on javascript to do something that can be accomplished using HTML/CSS. If the user has scripts turned off, they get the wrong image, and even if they have scripts turned on, they will likely get a flash of the wrong image up first.

Q) You can make special stylesheets that are specifically for print versions? I never knew that! I always offer people a special "printer friendly" version of the page, so if they want a hard copy they have to jump through my flaming hoops!
A) You apparently live in a cave. Say "hi" to the bear for me.
A2) Oh, ok. You can put this in your document:
<link rel="stylesheet" media="print" href="whatever.css" />



Q) Why would you want a different image on the screen than the one on paper?
A) Because you have a website with a particular colour theme with a dark background, and printers use white paper - you can either print the entire page black and waste ink or you can make a clean white version which will look good on paper.


Right. On with it! And by example, please...

Say you have a header with an H1 element, and you're using a common method of text-image replacement to make it look pretty:
<style>
h1 {
  text-indent: -9999px;
  background: black url(my-dark-logo.png) no-repeat;
}
</style>

<h1>My Cool Site</h1>



How can we go about making that use a different image for print? I've already said it's not as simple as putting
<style>
h1 {
  text-indent: -9999px;
  background: black url(my-light-logo.png) no-repeat;
}


in the print stylesheet, because the browser will ignore it. So... maybe we can get the same result using an IMG element? Turns out there are a few ways of doing this, but the easiest, to my mind is like this:
/* this bit goes in the screen stylesheet... */
h1 {
  text-indent: -9999px;
  background: black url(my-light-logo.png) no-repeat;
}

h1 img {
  display: none;
}

/* ...and this bit goes in the print stylesheet */

h1 img {
  display: block;
  float: right;
}

<!-- and the new version of our html... -->

<h1><img src="my-light-logo.png" alt="My Cool Site" />My Cool Site</h1>



Provided the two images are of the same size, this works in every modern browser I've tried it in.

What we're doing is having our printer-friendly image sit on top of the screen image. The text in both cases is thrown half a mile off the left hand side of the viewing area so you can forget about it. The screen CSS tells the browser to hide the IMG since audio terminals and such that read out the ALT tag would read the same text twice, which would annoy people, and we don't want it showing up if something else goes wrong in the future anyway. Why is the ALT tag a duplicate of the H1 text? Because if the user has images turned off in their browser, they won't get to see the H1 text because it's off the left of the screen... remember? Yeah.

Is This A Good Question/Topic? 0
  • +

Page 1 of 1