MooTools + Raphael - Element.makeTextVertical

by pythondave

HTML

<script src="http://www.irunmywebsite.com/raphael/javascript/raphael0152C.js"></script>
<div>
    <a href="http://jsfiddle.net/pythondave/px7Ht/show?demoNumber=1">Raphael rotation</a> | 
    <a href="http://jsfiddle.net/pythondave/px7Ht/show?demoNumber=2">Simple text transformation</a> | 
    <a href="http://jsfiddle.net/pythondave/px7Ht/show?demoNumber=3">Raphael rotation with options</a><br/><br/>
<table>
    <tr>
        <th>This is a story all about how my life got flip-turned upside down</th>
        <th>Another header</th>
        <th>Short</th>
        <th>This is really quite a long header</th>
    </tr>
    <tr>
        <td>1</td><td>2</td><td>3</td><td>4</td>
    </tr>
    <tr>
        <td>5</td><td>6</td><td>7</td><td>8</td>
    </tr>
</table>
</div>

CSS

div {
    font-family: verdana;
    font-size: 12px;
    margin: 20px;
}

a { color: blue; }

th {
    border: 1px black solid;
    background-color: LightBlue;
    font-family: courier new;
    font-size: 12px;
    nowrap: nowrap;
}

td { border:1px black solid; }

JavaScript

String.implement({
    toWordArray: function() { return this.split(' '); },
    toWordsArray: function(options) {
        if (typeof(options) == 'number') { options = {maxCharactersPerLine:options}; }
        var wordArray = this.toWordArray();
        var wordsArray = [];
        var words = '';
        wordArray.each(function(word, index) {
            if (words.length + word.length <= options.maxCharactersPerLine) {
                words += word + ' ';
            } else {
                wordsArray.push(words.trim());
                words = word + ' ';
            }
        });
        wordsArray.push(words.trim());
        return wordsArray;
    },
    toVerticalElement: function(options) {
        if (typeof(options) == 'number') { options = {maxCharactersPerLine:options}; }

        var table = new Element('table');
        document.body.appendChild(table); //needed for IE9 or Raphael errors
        var tr = new Element('tr').inject(table);

        var wordsArray = this.toWordsArray(options.maxCharactersPerLine);

        wordsArray.each(function(line, index) {
            var td = new Element('td').setStyle('border', 'none').inject(tr);
            var heightAdjustment = options.heightAdjustment || 1;
            var widthAdjustment = options.widthAdjustment || 1;            
            var paper = Raphael(td, 15*widthAdjustment, 7*options.maxCharactersPerLine*heightAdjustment);
            paper.text(-3.5*options.maxCharactersPerLine*heightAdjustment, 6*widthAdjustment, line)
                .attr({font:(options.font || '12px Verdana')})
                .attr({'font-weight':(options.fontWeight || 'bold')})
                .rotate(-90, 0, 0);
        });

        return table;
    },
    toVerticalHtml: function(options) {
        options.wordSeparator = options.wordSeparator || '  ';
        options.lineSeparator = options.lineSeparator || '<br/>';
        return this.toVerticalString(options).replace(/ /g,'&nbsp;');
    },
    toVerticalString:...