JavaScript - Vertical Text

by pythondave

HTML

<!--[if lte IE 8]>
<style>span.vt { writing-mode: tb-rl; filter: flipv fliph; }</style>
<![endif]-->

<table>
    <tr>
        <th class="verticalText">hello</th>
        <th class="verticalText">This is a long one</th>
        <th class="verticalText">This has quitealongword</th>
        <th class="verticalText">hello world</th>
    </tr>
    <tr>
        <td>hello</td>
        <td>hello</td>
        <td>hello</td>
        <td>4</td>
    </tr>
</table>

CSS

th {
    border: 1px black solid;
    background-color: LightBlue;
}
td {
    border: 1px black solid;
}
/* svg { border:1px black solid; } */

JavaScript

main();

function main() {
    var verticalTextElements = getElementsByClass('verticalText');
    for (var i=0; i<verticalTextElements.length;i++) {
        makeTextVertical(verticalTextElements[i]);
    }
}

function makeTextVertical(htmlElement) {
    var Text = htmlElement.innerHTML;
    var s = '<span class="vt">';
    s +=    '   <svg class="svg" height="140px" width="16px">';
    s +=    '       <text x="-140" y="13" transform="rotate(-90 0 0)">';
    s +=    '          <tspan>' + Text + '</tspan>';
    s +=    '       </text>';
    s +=    '   </svg>';
    s +=    '</span>';
    htmlElement.innerHTML = s;
}

function getElementsByClass(searchClass,node,tag) {
    var classElements = [];
    if (node == null) node = document;
    if (tag == null) tag = '*';
    var els = node.getElementsByTagName(tag);
    var elsLen = els.length;
    var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
    for (i=0, j=0; i<elsLen; i++) {
        if ( pattern.test(els[i].className) ) {
            classElements[j] = els[i]; j++;
        }
    }
    return classElements;
}