Better css_graph

There’s a rails plugin called css_graphs written by Geoffrey Grosenbach over at nuby on rails. It’s a rails helper wrapped around some work making graphs out of xhtml and css. done by the folks at Apples to Oranges. It’s pretty slick.

I played with it a while back when it first showed up. I even was thinking about doing a ‘create your own charts and graphs entirely with xhtml/css’ kind of site, but didn’t. Though, I’ve still held onto the idea of using some of these in some places. The problem is, I’ve never liked the markup for the graph itself. Seemed all presentational, not very semantic.

So I cleaned it up. A bit. It’s certainly not perfect. I would love any feedback on it, especially any ideas on how to get rid of the span and have the text from inside the <dd> actually be the first bit of text of the <dt>, whilst still being the value of <dd>. semantics, damn it!

Here’s the nuts and bolts of it…

<style>
.bar_chart {
  position: relative;/* IE is dumb */
  width: 100%;
  border: 1px solid #666;
  padding: 0;
  background: #F33;
  clear: both;
}  
.bar_chart dt {
  display: block;
  position: relative;
  background: #3F3;
  height: 2em;
  line-height: 2em;
  border-right: 1px solid #666;
}
.bar_chart dt span {
  padding-left: 1em;
  color: black;
  /*display: none;*/
}
dd {
  padding: 1em;
  margin: 0;
  float: left;
}
</style>

<dl class="bar_chart">
  <dt style="width:24%"><span>24%</span></dt>
  <dd>24% of tests passed. 76% failed.</dd>
</dl>

…and this is what it looks like.

.bar_chart {
position: relative;/* IE is dumb */
width: 100%;
border: 1px solid #666;
padding: 0;
background: #F33;
clear: both;
}
.bar_chart dt {
display: block;
position: relative;
background: #3F3;
height: 2em;
line-height: 2em;
border-right: 1px solid #666;
}
.bar_chart dt span {
padding-left: 1em;
text-align: left;
color: black;
/*display: none;*/
}
.bar_chart dd {
padding: 1em;
margin: 0;
float: left;
}

24%
24% of tests passed. 76% failed.

When CSS is turned off, you get this:

24%
24% of tests passed. 76% failed.

…which is not optimal. That’s where I’d like some help if anyone has any suggestions.

UPDATE: comments are off now, because this one post is getting slammed with spam.

Advertisements