jquery - Vertical text inside table headers using a JavaScript-based SVG library - Stack Overflow

admin管理员组

文章数量:1402775

I use jqGrid with many columns containing boolean information, which are displayed as checkboxes inside the table (see .htm as an example). To display information more pactly I use vertical column headers. It works very well and works in jqGrid in all browsers (see my discussion with Tony Tomov in jqGrid forum /?page_id=393/feature-request/headers-with-vertical-orientation/), but in IE vertical text is blurred and doesn't look nice enough (open the link above in IE and you will see exactly what I mean). I was asked from users why the text displayed so strangely. So I'm thinking of using a JavaScript-based SVG library like SVG Web ( / ) or Raphaël ( / ). SVG is very powerful and it is difficult to find a good example. I need only to display vertical text (-90 grad, from the bottom up) and use if possible without working in mode of absolute positioning.

So one more time my question: I need to have a possibility to display vertical text (-90 grad rotation) inside <td> elements of a table header. I want to use a JavaScript-based SVG library like SVG Web or Raphaël. The solution must support IE6. Does anybody have a good reference example which could help me do this? If somebody posts a whole solution of the problem I would be happy.

To be exact here is my current solution: I define

.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 */;
}

define RotateCheckboxColumnHeaders function

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);
                }
            }
        }
    }
};

And include a call like RotateCheckboxColumnHeaders(grid, 110); after creating jqGrid.

I use jqGrid with many columns containing boolean information, which are displayed as checkboxes inside the table (see http://www.ok-soft-gmbh./VerticalHeaders/TestFixedO.htm as an example). To display information more pactly I use vertical column headers. It works very well and works in jqGrid in all browsers (see my discussion with Tony Tomov in jqGrid forum http://www.trirand./blog/?page_id=393/feature-request/headers-with-vertical-orientation/), but in IE vertical text is blurred and doesn't look nice enough (open the link above in IE and you will see exactly what I mean). I was asked from users why the text displayed so strangely. So I'm thinking of using a JavaScript-based SVG library like SVG Web ( http://code.google./p/svgweb/ ) or Raphaël ( http://raphaeljs./ ). SVG is very powerful and it is difficult to find a good example. I need only to display vertical text (-90 grad, from the bottom up) and use if possible without working in mode of absolute positioning.

So one more time my question: I need to have a possibility to display vertical text (-90 grad rotation) inside <td> elements of a table header. I want to use a JavaScript-based SVG library like SVG Web or Raphaël. The solution must support IE6. Does anybody have a good reference example which could help me do this? If somebody posts a whole solution of the problem I would be happy.

To be exact here is my current solution: I define

.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 */;
}

define RotateCheckboxColumnHeaders function

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);
                }
            }
        }
    }
};

And include a call like RotateCheckboxColumnHeaders(grid, 110); after creating jqGrid.

• javascript
• jquery
• jqgrid
• svg

Share Improve this question Follow edited Feb 5, 2011 at 23:22 Wayne Koorts 11.1k1313 gold badges4848 silver badges7272 bronze badges asked Apr 24, 2010 at 16:15 OlegOleg 222k3535 gold badges412412 silver badges812812 bronze badges 3

• if you are looking for CSS3 equivalent solution may be this site will help you useragentman./IETransformsTranslator i might try to recreate your grid and try it in IE6 – paul Commented Jan 3, 2011 at 5:00
• @paul: Thank you for advice, but I already tested DXImageTransform.Microsoft.Matrix before. It produce the same results as DXImageTransform.Microsoft.BasicImage(rotation=3) filter with the same quality. If the font size is relatively small everithing looks bad. Moreover if one try to scale the page, IE scale the bad image and not try to produce the new image with the better quality. All other browsers produces a perfect results which are also perfect scalable. So the problam stay opened. Even IE9 beta don't give the better results. – Oleg Commented Jan 3, 2011 at 18:25
• Making things work for IE is a bit challenging....We generally have a fallback mechanism in form of png image. So, your best bet might be using png images if svg doesn't worked.... – paul Commented Jan 4, 2011 at 0:24

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Here's a working jsfiddle that does it. It should work in IE 6, I only used jquery and raphael js. I made static sizes for the raphael drawing area and the text, but you can certainly do a little math to figure out dynamic sizes:

http://jsfiddle/UYj58/9/

Code looks like this if you include jquery and raphael:

$(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();
    });
});

And the HTML looks like this:

<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>

Oh, and I used this as my example: http://raphaeljs./text-rotation.html

Canvas text transformations example

            <!--[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>

本文标签： jqueryVertical text inside table headers using a JavaScriptbased SVG libraryStack Overflow