Rotate text in HTML

Question

Is there a cross-browser method to rotate text from horizontal to vertical?

I need to add a label to a graph. Of course I could use an image but before I did that I thought I'd ask about other alternatives.

Thanks

Here's hoping Santa finds a gift he can share with all of us! — n8wrl, Jun 07 '11 at 18:56
http://stackoverflow.com/questions/382591/rotating-a-div-element-in-jquery — zod, Jun 07 '11 at 19:00
@n8wrl We're 11.5% through the 21st century -- it's time we figure out how flip text online, right?! — santa, Jun 07 '11 at 19:41
@Richard JP Le Guen At lest big 2: FF & IE. With FF Safari and Chrome will follow. — santa, Jun 07 '11 at 19:43
I'm a bit late to the party on this one, but for the record, I found sIFR font replacement capable of vertical display with just a quick few changes in the .fla source. It does of course assume the User has Flash plugin (which our users did) but it works in IE6 etc. Possibly Cufon replacement could have Javascript applied to it to perform the same task? — danjah, Mar 21 '12 at 20:39

score 2 · Answer 1 · answered Jun 07 '11 at 18:59

2

Only thing I can think of is a little bit of SVG.

RaphaelJS aparently handles this sort of thing in a nicely cross-browser way.

Raphaël currently supports Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+.

Check out their spinning text example.

answered Jun 07 '11 at 18:59

Richard JP Le Guen

28,364
7
89
119

1

Not jQuery per se, but it's something. – Richard JP Le Guen Jun 07 '11 at 19:00
It's great but it's 60K file... I think for my modest needs I can get away with image text. – santa Jun 07 '11 at 19:51

score 0 · Answer 2 · answered Apr 23 '12 at 16:51

How about a little love for Canvas?

<!DOCTYPE html>
<html>
    <body>
        <canvas id="myCanvas" height="100px" width="20px"></canvas>
        <script>
            var canvas = document.getElementById("myCanvas");
            var context = canvas.getContext("2d");
            var text = "Hello, World!";
            context.rotate(Math.PI/2);
            context.fillText(text, 10, 0);
        </script>
    </body>
</html>

More info here: http://www.html5canvastutorials.com/

(Tested with Chrome 18, Firefox 11, and Safari 5 on OS X Lion.)

score 0 · Answer 3 · answered Apr 23 '12 at 16:59

How about a little love for SVG?

<!DOCTYPE html>
<html>
    <body>
        <svg xmlns="http://www.w3.org/2000/svg" mlns:xlink="http://www.w3.org/1999/xlink">
            <text x="10" y="50" transform="rotate(90 20 30)">Hello, World!</text>
        </svg>
    </body>
</html>

score 0 · Answer 4 · answered Jun 07 '11 at 19:11

0

if you're site is static I suggest you to create the images, and if you use some programming language like php you should use a library to convert your text in images on the fly.

answered Jun 07 '11 at 19:11

PachinSV

3,680
2
29
41

Rotate text in HTML

4 Answers4