Tech, Oracle, user experience, coffee, design standards, and shameless ranting

Vertical text in javascript

Vertical Grid using Raphael

Vertical text in a table

I’ve just recently been given a Word document with a mock up of a report that I needed to reproduce in HTML.

Well, i looked at various options like using transforms, rotate, DX filters in IE, but none of them worked properly, or without major headaches.

Whilst searching around, I found a JS library called RaphaelJS which lets you draw text and shapes on screen as SVG and after a bit of tinkering produced a really nice implementation of the grid with vertical headers et al.

Initial HTML looks like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<table class="summarygrid" cellspacing="0" cellpadding="0px">
<thead>
<tr style="text-align:center;">
  <th>Feature</th>
  <th><div id="rotate1"><span>Cycle</span></div></th>
  <th><div id="rotate2"><span>Assessment Type</span></div></th>
  <th><div id="rotate3"><span>Condition</span></div></th>
</tr>
</thead>
<tbody>
  <tr><td>Feature 1</td><td>U</td><td>N</td><td>N</td></tr>
  <tr><td>Feature 2</td><td>Y</td><td>Y</td><td>U</td></tr>
  <tr><td>Feature 3</td><td>U</td><td>N</td><td>Y</td></tr>
</tbody>
</table>

And the javascript looks like this:

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(document).ready(function(){
    var font = {font: '13px Helvetica, Arial'};
//    var fill = {fill: "hsb(199deg, 1, 1)"}
    var fill = {fill: "rgb(255,255,255)"}
    $('tr th div').each(function (index, div){
        R = Raphael($(div).attr('id'), 20, 180);
 
        R.text(9, 175, $(div).find('span').text())
            .attr(font)
            .attr(fill)
            .rotate(-90, true).attr({'text-anchor': 'start'});
        $(div).find('span').hide();
    });
});

Great little find

Share

You can follow any responses to this entry through the RSS 2.0 feed.

Switch to our mobile site