CODEWITHSUNDEEP
jqueryhtmlcss
santa
santa

Reputation: 12512

Rotate text in HTML

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

Upvotes: 5

Views: 895

Answers (4)

james.garriss
james.garriss

Reputation: 13397

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>

Upvotes: 0

james.garriss
james.garriss

Reputation: 13397

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

Upvotes: 0

PachinSV
PachinSV

Reputation: 3780

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.

Upvotes: 0

Richard JP Le Guen
Richard JP Le Guen

Reputation: 28753

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.

Upvotes: 2

Related Questions