Вертикальный текст внутри заголовков таблиц с использованием библиотеки SVG на основе JavaScript

Question

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

Итак, еще раз мой вопрос: Мне нужно иметь возможность отображать вертикальный текст (- 90 град. Вращение ) внутри <td> элементов заголовка таблицы. Я хочу использовать основанную на JavaScript библиотеку SVG, такую ​​как SVG Web или 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.

Answer 1

Вот работающий jsfiddle, который делает это. Это должно работать в IE 6, я использовал только jquery и Raphael JS. Я сделал статические размеры для области рисования Рафаэля и текста, но вы, конечно, можете немного подсчитать, чтобы определить динамические размеры:

http://jsfiddle.net/UYj58/9/

Код выглядит так, если вы включите jquery и rafahael:

$(document).ready(function(){
    var font = {font: '12px Helvetica, Arial'};
    var fill = {fill: "hsb(120deg, .5, 1)"}
    $('tr th div').each(function (index, div){
        R = Raphael($(div).attr('id'), 20, 100);
        R.text(4, 50, $(div).find('span').text())
            .attr(font)
            .attr(fill)
            .rotate(-90, true);
        $(div).find('span').hide();
    });
});

И HTML выглядит так:

<table>
    <thead>
        <tr>
            <th><div id="columnOne"><span>heading one</span></div></th>
            <th><div id="columnTwo"><span>heading two</span></div></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
        </tr>
    </tbody>
</table>

О, и я использовал это как мой пример: http://raphaeljs.com/text-rotation.html

Answer 2

Пример преобразования текста холста

            <!--[if IE]><script type="text/javascript" src="../excanvas.js"></script><![endif]-->
<script type="text/javascript" src="../canvas.text.js"></script>
<script type="text/javascript" src="../faces/dejavu_sans-normal-normal.js"></script>
<script type="text/javascript" src="../faces/dejavu_sans-bold-normal.js"></script>
    </head>
    <body>
            <canvas width="500" height="300" id="test-canvas" style="font-size: 16px;"></canvas>

            <script type="text/javascript">
                function initCanvas(canvas) {
                    if (window.G_vmlCanvasManager && window.attachEvent && !window.opera) {
                        canvas = window.G_vmlCanvasManager.initElement(canvas);
                    }
                    return canvas;
                }

                window.onload = function() {
                    var canvas = initCanvas(document.getElementById("test-canvas")),
                                ctx = canvas.getContext('2d');

                    ctx.strokeStyle = "rgba(255,0,0,1)";
                    ctx.fillStyle = "rgba(0,0,0,1)";
                    ctx.lineWidth = 1;
                    ctx.font = "20pt Verdana, sans-serif";
                    ctx.strokeStyle = "#000";
                    ctx.rotate(Math.PI / 2);
                    ctx.fillText('Vertical', 0, 0);
                    ctx.restore();
                }
            </script>
    </body>