Background Image List Bullets and Printing

Get Started
1

Hello everyone,

So, I have a site in which I’ve used a background-image to act as bullets for some elements. This is all well and good, working perfectly.

The problem is printing. These icons actually have a usability meaning, so they need to be on the printed page.

Of course, background-images don’t print by default, and I don’t want the end-user to have to worry about turning on this option.

So, I’m left with a couple of options:

  • Replace the background image technique with image elements altogether.
  • Replace the background image technique with image elements when our Javascript-powered print button is pressed.

The page they’re printing doesn’t provide anything useful without Javascript (it’s a Google Maps thing), so the users will have Javascript.

I don’t really want to ugly up my markup with an image, but I may.

Are there any approaches I’m missing? What would you use?

Thanks.

2

If they’re list items, maybe the list-style-image property, although it may be a bit buggy in IE.

3

You could use generated content to include the image in the print stylesheet:

[i]whatever[/i]:before {content: url(/image.png);}
4

Thanks for the ideas.

I gave the list-style-image a try before. It changed into a regular disc in print in the browsers I tested. =(

I could use :before/content, but it’s not fully supported by IE, which is a good portion of our demographic. =(

I went ahead and just used a regular img statically put in there, but if anyone else has any ideas, please put them forward.

5

List-style-image should work in all browsers, although in IE7 and below, it won’t apply the image to floated elements. If you haven’t got any floats around there, are you sure you’ve got the right path for the image?

6

Well, it worked how I expected on the page itself, but when I did a print preview it showed a bullet. I checked it once and it worked, checked it again and it was a regular bullet. I think it was in FF4b that it was goofed up, may be a bug.

7

Why not provide a media=print style sheet and set list-style-images to disc? It’s better practice to provide specific rendering sheets, plus, it’s much easier! Just copy your file and change the one rule. If it really matters that bullets are something instead of bullets, then change the declaration by adding an actual hidden image via a class that is shown in the alt style sheet.

Or use jQuery to show/hide an actual image.

8

It might be something to do with this line from the original message:

These icons actually have a usability meaning, so they need to be on the printed page.

9

Yeah. We do have a print style sheet to get rid of certain border, etc., to make it take up less ink when printed. However, these icons need to be printed.

Basically they are the same images as the markers used on the map (up to four markers), so they need to be there so they know what corresponds to what.

10

If it’s a key to what the markers mean, wouldn’t you be better off using a <dl> construction rather than <ul>? That way, you’d have inline images, which could improve accessibility as well as solving the print problem very easily.

11

Well, I have added the images manually at this point (with <img>).

Using a dl actually isn’t a bad idea. I didn’t think of it as a “definition”, but I guess it is. Thanks.