Texto vertical dentro de encabezados de tabla utilizando una biblioteca SVG basada en JavaScript

Question

Utilizo jqGrid con muchas columnas que contienen información booleana, que se muestran como casillas de verificación dentro de la tabla (consulte http://www.ok-soft-gmbh.com/VerticalHeaders/TestFixedO.htm como ejemplo). Para mostrar información de forma más compacta, uso encabezados verticales de columna. Funciona muy bien y funciona en jqGrid en todos los navegadores (vea mi discusión con Tony Tomov en el foro jqGrid http://www.trirand.com/blog/?page_id=393/feature-request/headers-with-vertical-orientation/), pero en IE el texto vertical está borroso y no se ve lo suficientemente agradable (abra el enlace de arriba en IE y verá exactamente lo que quiero decir). Los usuarios me preguntaron por qué el texto se mostraba de forma tan extraña. Así que estoy pensando en usar una biblioteca SVG basada en JavaScript como SVG Web (http://code.google.com/p/svgweb/) o Raphaël (http://raphaeljs.com/). SVG es muy poderoso y es difícil encontrar un buen ejemplo. Solo necesito mostrar el texto vertical (-90 grad, de abajo hacia arriba) y usarlo si es posible sin trabajar en modo de posicionamiento absoluto.

Así que una vez más mi pregunta: Necesito tener una posibilidad para mostrar el texto vertical (- rotación de 90 grad) en el interior <td> elementos de un encabezado de la tabla. Quiero utilizar una biblioteca SVG basada en JavaScript como SVG Web o Raphaël. La solución debe ser compatible con IE6. ¿Alguien tiene un buen ejemplo de referencia que podría ayudarme a hacer esto? Si alguien publica una solución completa del problema, sería feliz.

Para ser exactos aquí está mi solución actual: defino

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

definen RotateCheckboxColumnHeaders función

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

e incluyen una llamada como RotateCheckboxColumnHeaders(grid, 110); después de crear jqGrid.

Answer 1

He aquí una jsFiddle de trabajo que lo hace. Debería funcionar en IE 6, solo utilicé jquery y raphael js. Hice tamaños estáticas para el área de dibujo Raphael y el texto, pero que sin duda puede hacer un poco de matemáticas para averiguar tamaños dinámicos:

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

código es el siguiente si se incluye jQuery y 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(); 
    }); 
}); 

y el HTML se parece a esto:

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

Ah, y utiliza esto como mi ejemplo: http://raphaeljs.com/text-rotation.html

Answer 2

transformaciones de texto lienzo ejemplo

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