Is there a way to rotate text input?

Answer 1

off the top of ny head, i think this is something that you can only do in csss3 which isn't widely supported enough to use yet (unless its some kind of internal app where you can say that a certain browser is required)

Answer 2

Your best bet is probably Flash.

Answer 3

Not fully supported on current browsers, but works reasonably (at least) on FF3 and IE7, is the canvas HTML element. The canvas element is part of HTML5 and allows for dynamic scriptable rendering of bitmap images. Canvas consists of a drawable region defined in HTML code with height and width attributes. JavaScript code may access the area through a full set of drawing functions similar to other common 2D APIs, thus allowing for dynamically generated graphics.

A page from the Mozilla Manual shows how to draw text on a canvas. All canvas graphics can have rotate(angle) applied. The example uses the rotate method to draw shapes in a circular pattern.:

function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
ctx.translate(75,75);

for (i=1;i<6;i++){ // Loop through rings (from inside to out)
    ctx.save();
    ctx.fillStyle = 'rgb('+(51*i)+','+(255-51*i)+',255)';

    for (j=0;j<i*6;j++){ // draw individual dots
      ctx.rotate(Math.PI*2/(i*6));
      ctx.beginPath();
      ctx.arc(0,i*12.5,5,0,Math.PI*2,true);
      ctx.fill();
    }

    ctx.restore();
  }
}

Answer 4

There's no good cross-browser solution.

Latest Webkit supports CSS transformations, that allow such thing in straightforward way.

There's <foreignContent> in SVG that theoretically would allow to rotate HTML, but it's not widely supported (and where it's supported, it's usually incomplete and buggy).

I suggest that you change design of the page. Try visual tricks with borders and shadows around the input that make it seem slightly rotated.

I advise against hacks in Javascript or Flash. Browser's input elements are important for usability. Your hacks may not play well with password managers/autofill, various standard keyboard shortcuts, text selection, etc.

Answer 5

Agree with PEZ. I would use Flash for this one. But in Safari you can use CSS3 transformations to accomplish this.

Answer 6

Can anyone give the css3 solution?