CODEWITHSUNDEEP
htmlcsstext-renderingtext-stylingtext-rotation
Lea Cohen
Lea Cohen

Reputation: 8190

Is there a way to rotate text input?

I have to align a textbox and some text, at about 30 degrees, like this: rotated text

I would like it to work at least in IE and FF. Everything I found on the net deals with image rotation.
Anyone?

Upvotes: 1

Views: 7231

Answers (6)

siniradam
siniradam

Reputation: 2929

Try css3

-webkit-transform: rotate(270deg);
-moz-transform:rotate(270deg);
-o-transform: rotate(270deg);

But this will not work on IE

For IE 9+ (thanks to Michael Potter)

-ms-transform: rotate(270deg)

Upvotes: 1

benlumley
benlumley

Reputation: 11382

Off the top of any head, I think this is something that you can only do in CSS3 which isn't widely supported enough to use yet (unless it's some kind of internal app where you can say that a certain browser is required).

Upvotes: 2

airportyh
airportyh

Reputation: 22668

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

Upvotes: 2

Kornel
Kornel

Reputation: 100110

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.

Upvotes: 5

gimel
gimel

Reputation: 86362

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

Upvotes: 3

PEZ
PEZ

Reputation: 17004

Your best bet is probably Flash.

Upvotes: 4

Related Questions