Вертикальный текст в заголовках таблицы, пользующихся основанной на JavaScript библиотекой SVG

Я использую jqGrid со многими столбцами, содержащими булеву информацию, которые отображены как флажки в таблице (см. http://www.ok-soft-gmbh.com/VerticalHeaders/TestFixedO.htm как пример). Для отображения информации более сжато, я использую заголовки вертикального столбца. Это работает очень хорошо и работает в jqGrid во всех браузерах (см. мое обсуждение с Tony Tomov на jqGrid форуме http://www.trirand.com/blog/?page_id=393/feature-request/headers-with-vertical-orientation/), но в IE вертикальный текст размывается и не выглядит достаточно хорошим (откройте ссылку выше в IE, и Вы будете видеть точно, что я имею в виду). Меня спросили от пользователей почему текст, отображенный так странно. Таким образом, я думаю о пользовании основанной на JavaScript библиотекой SVG как сеть SVG (http://code.google.com/p/svgweb/) или Raphaël (http://raphaeljs.com/). SVG очень мощен, и трудно найти хороший пример. Я должен только отобразить вертикальный текст (-90 выпускников, с самого начала) и использование, если это возможно, не работая в режиме абсолютного расположения.

Так еще раз мой вопрос: у Меня должна быть возможность отобразить вертикальный текст (-90 вращений выпускника) внутри элементы заголовка таблицы. Я хочу пользоваться основанной на JavaScript библиотекой SVG как сеть SVG или Raphaël. Решение должно поддерживать IE6. У кого-либо есть хороший справочный пример, который мог помочь мне сделать это? Если бы кто-то отправляет целое решение проблемы, я был бы счастлив.

Чтобы быть точным вот, мое текущее решение: Я определяю

.rotate 
{
    -webkit-transform: rotate(-90deg);    /* Safari 3.1+, Chrome */
    -moz-transform: rotate(-90deg);    /* Firefox 3.5+ */
    -o-transform: rotate(-90deg); /* Opera starting with 10.50 */
    /* Internet Explorer: */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* IE6, IE7 */
   -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)" /* IE8 */;
}

определить RotateCheckboxColumnHeaders функция

var RotateCheckboxColumnHeaders = function (grid, headerHeight) {
    // we use grid as context (if one have more as one table on tnhe page)
    var trHead = $("thead:first tr", grid.hdiv);
    var cm = grid.getGridParam("colModel");
    $("thead:first tr th").height(headerHeight);
    headerHeight = $("thead:first tr th").height();

    for (var iCol = 0; iCol < cm.length; iCol++) {
        var cmi = cm[iCol];
        if (cmi.formatter === 'checkbox') {
            // we must set width of column header div BEFOR adding class "rotate" to
            // prevent text cutting based on the current column width
            var headDiv = $("th:eq(" + iCol + ") div", trHead);
            headDiv.width(headerHeight).addClass("rotate");
            if (!$.browser.msie) {
                if ($.browser.mozilla) {
                    headDiv.css("left", (cmi.width - headerHeight) / 2 + 3).css("bottom", 7);
                }
                else {
                    headDiv.css("left", (cmi.width - headerHeight) / 2);
                }
            }
            else {
                var ieVer = jQuery.browser.version.substr(0, 3);
                // Internet Explorer
                if (ieVer !== "6.0" && ieVer !== "7.0") {
                    headDiv.css("left", cmi.width / 2 - 4).css("bottom", headerHeight / 2);
                    $("span", headDiv).css("left", 0);
                }
                else {
                    headDiv.css("left", 3);
                }
            }
        }
    }
};

И включайте вызов как RotateCheckboxColumnHeaders(grid, 110); после создания jqGrid.