1 Problem with ALA Print Style Sheet?

Speaking of print style sheets, when I do a print preview of this article in Firefox, the content moves across the page to the right on each successive page.

If I increase the scale from “shrink to fit” to, say “100%” the content starts to go off the page at the right hand side.

Is anyone else noticing this problem, and does it actually occur when you print the article out? I’m not attached to a printer so can’t check myself.

posted at 12:17 am on September 06, 2005 by Christian Watson

3 Untitled

One question that still intrigues me is whether all browsers download image files that are referenced in a print style sheet but not in the screen style sheet or in the markup? The limited number of browsers I’ve tested do appear to download the images whether the user prints the page or not.

The problem is that the image file is referenced in the markup. The browser can’t tell if there might be some JavaScript that later makes the image not-hidden. The browser dutifully requests the image from the server just as the markup tells it.

In my opinion, this is another argument for the content property to be allowed in places other than :before and :after. If you had the following markup:

<img src=”example.jpg” id=”example” alt=”” width=”109” height=”158” />

adding the following to your print stylesheet would do what you want:

example { content: url(“example_hi-res.jpg”); }

Unfortunately, that doesn’t currently work. I think I suggested a similar approach way back when FIR was big news. I guess this is more for a W3C list than ALA, though.

posted at 01:47 am on September 06, 2005 by Greg Pfeil

4 Seperate print-version

Another method is making a separate printerfriendly html-version (alongside a printerfriendly css file on the actual page). Then you can place images with a larger resolution that will only be downloaded if the user deceides to print the page.

This technique has been working fine for years, that’s to say: if your pages are rendered from a dB.

posted at 01:56 am on September 06, 2005 by Niek Emmen

5 Content property

Greg Pfeil’s proposal would work in Opera 8 (and I guess Opera 7 too). Another solution would be using content on :after and then position it absolutely to hide the low quality image (but that would not work on Gecko yet).

posted at 02:14 am on September 06, 2005 by Federico Panico

6 Missing something?

This article seems to be missing a few paragraphs – the ones that tell us how to actually do this image swapping trick.

Sure he tells us what we need to do, and shows that the hires image can be shrunk down to an unobtrusive dot. Apparently he’s “experimented with various image replacement (IR) techniques” and found one that works in every modern browser – which is nice.

Unfortunately, he doesn’t set out what that technique is. We have to go picking through the source of the page and ALA’s (as yet non-existant) print stylesheet to see how it works (if, indeed, it does – Firefox print preview seems totally confused by the whole page right now).

Some more code snippets would have been helpful, as would putting the examples on a seperate page, with minimal content and the CSS in a <style> element to keep everything together.

posted at 05:37 am on September 06, 2005 by Chris Hunt

7 Use background images

Would it not be possible to just make the logo a background image, and specify a higher resolution image in the print css file?

posted at 05:50 am on September 06, 2005 by Susan Ottwell

8 Using background images

Would it not be possible to just make the logo a background image, and specify a higher resolution image in the print css file?

That might work OK for a logo that is always in the same place on every page, but it would be more problematic for pictures scattered throughout the document.

One option might be to use an empty <div id=”pic1”></div> (or would it need a &amp;nbsp; in to stop it collapsing?), set the height and width of the div in the CSS, and then give it a different background image in each of the screen and print stylesheets.

I don’t know how much I like this idea – it seems to be subverting the perfectly good and semantically correct <img> construct for a very limited benefit.

posted at 06:27 am on September 06, 2005 by Stephen Down

9 High-res photos

Hmmm…Including a few 300dpi photos that will print if the user prints but still has to download when he/she first comes to the web page? That could slow a modem user down to 3 or 4 minutes for a page to load. I know you say to use it only if you think it’s neccessary but I wouldnt want every user to have to sit there through that when only maybe 5% would print. I’d probably just have a link to a page that includes the high-res photos and give them warning ahead of time.

Nice article though, some useful info.

posted at 07:01 am on September 06, 2005 by David Ross

10 high-res images

so, - having the images in the html increases the download volume, - setting it as background-picture makes it less likely to print(as you can turn off printing of backgrounds, isn’t that even a default setting?) - :after {content:...} is, so far, not working everywhere. I like the idea, but can you use it in a commercial environment? Is it possible to detect the display-medium, i.e. via Javascript? If JS worked, couldn’t you simply replace it? I guess that would be the straight forward way, so I must assume it doesn’t work, otherwise it would’ve been suggested before?! So, is the solution without downsides to wait for IE7 and use :after?

posted at 07:24 am on September 06, 2005 by Matthias Willerich