General Discussion > Wishlist

ReportNet wishlist

(1/2) > >>

Merri:
Here's one:

The ability to rotate text in column headings to any angle

Darek:
First you would have to convince them ...  http://www.w3.org/

CoginAustin:
CSS works to rotate text.


--- Code: ---<div style="layout-flow: vertical-ideographic">

--- End code ---
Column Header Field

--- Code: --- </div>
--- End code ---

Also DHTML can rotate text on all axis..

Darek:
At "ANY" angle ?

CoginAustin:
You can rotate to any angle. However, it must be absolutely positioned and it would take extra real estate(vertcal length+horizontal length) since the actually column do not display at the same angle. With this in mind you will also have to adjust the column height and width manually as the text is basically not part of that cell. I have no idea what issues there are as far as printing.

Another easier way to go about it is to just create a .gif of the text at the angle you want  ;D

Real estate required:

*Vertical text
abcdefg

*Horizontal
a
b
c
d
e
f
g

Diagonal
a
 b
  c
   d
     e
      f
       g





To do it:


--- Code: ---<STYLE>
.positioned { position: relative; }
</STYLE>
<SCRIPT>
var id = 0;
function displayTextDiagonal (text, down, deg, lsp) {
  deg = deg || 45;
  deg = Math.PI / 180 * deg;
  lsp = lsp || 10;
  dy = lsp * Math.tan(deg);
  var html = '';
  html += '<DIV ID="td' + id + '"' + ' CLASS="positioned"' + '>';
  if (down) {
    for (var r = 0; r < text.length; r++) {
      html += '<SPAN ID="td' + id + r
             + '" CLASS="positioned" STYLE="left: '
             + (r * lsp) + 'px; top: ' + (r * dy) + 'px;">';
      html += text.charAt(r);
      html += '</SPAN>';
    }
  }
  else {
    for (var r = 0; r < text.length; r++) {
      html += '<SPAN ID="td' + id + r
              + '" CLASS="positioned" STYLE="left: '
              + (r * lsp) + 'px; top: '
              + ((text.length - r) * dy) + 'px;">';
      html += text.charAt(r);
      html += '</SPAN>';
    }
  }
  html += '<\/DIV>';
  id++;
  document.write(html);
}
</SCRIPT>
<SCRIPT>
displayTextDiagonal('Column Heading', true, 45);
</SCRIPT>

--- End code ---

Navigation

[0] Message Index

[#] Next page