Printable progress bars

Posted on by

You may have noticed that when you print lists including my examples of progress bars, the colors are not rendered. This is actually the expected behavior: when printing Web pages, background colors are usually ignored by the browser.

So what can you do if you want to print your progress bars?

A first possibility is to modify your browser settings to print backgrounds. In Internet Explorer for example, follow this path:
Tools | Internet Options | Advanced | Printing.

A second option is to modify the formula and use colors instead of background colors, or use images. Here is an example of workaround for the above screenshot, where I used border colors (instead of background colors in the original post):

="<DIV style='position:relative;'><DIV style='font-size:0px; border-top: 14px solid "&CHOOSE(INT(&#91;%&#93;*10) +1,"red","red","OrangeRed","OrangeRed","DarkOrange","Orange","Gold","yellow","GreenYellow","LawnGreen","Lime")&"; width:"&(&#91;%&#93;*100)&"%;'>&nbsp;</DIV><DIV style='position:absolute; top:0px;'>"&TEXT([%],"0%")&"</DIV></DIV>"

As usual, feel free to share your own solutions!

This behavior was first reported to me by Peter Allen, who is also the author of this example. His workaround is to use hr tags (horizontal rules). Unfortunately this doesn’t work well for me as hr tags have a different behavior in Internet Explorer and Firefox.

5 thoughts on “Printable progress bars”

  1. How would I do this using an image instead of colors? For example, if the progress was 50%, I would want 5 copies of the image in the column.

    Thanks.

  2. Kate, off the top of my head I see 3 options:
    – have one long picture where your initial picture is repeated 10 times; only display 50% of the picture (i.e. 5 of your initial pictures), using the CSS clip property.
    – create 10 different pictures: picture1 with your image, picture2 with your image twice, etc. For 50%, call picture5.
    – use your image as background (background-image: url(star.gif);), and use “background-repeat: repeat-x”.

  3. Pingback: Sneak peek: colored calendar « Path to SharePoint

  5. Pingback: SharePoint calendars: color coding, hover effects, etc. « Path to SharePoint

Comments are closed.