Calvin's Doings

I needed to make a graph on a web page and I didn’t want to use images because then they would have to be accessible to the end user. I was scouring the Internet trying to find a solution to this problem.

Turns out the <div> and <span> tags are great for this. The problem is you can’t print them unless you have Print Background Images enabled in your browser. I found a work around for this: use the same <div> or <span> tags to make your rectangle but instead of setting the dimensions of the box and the fill color just set the height and the border width to the size you need.

Here is how I make horizontal bars that will print in any browser:

<SPAN style=’border-left: black 100px solid; display: inline-block; height: 10px></SPAN>

That line will make a black rectangle that is 100 pixels long and 10 pixels high. Just change the border width and color for each additional bar.