在HTML中旋转文本

Question

有没有一种跨浏览器的方法可以将文本从水平旋转到垂直？

我需要向图中添加一个标签。当然，我可以使用图像，但在此之前，我想我应该问一下其他选择。

谢谢

Answer 1

我唯一能想到的就是一点SVG。

RaphaelJS以一种很好的跨浏览器方式处理这类事情。

Raphaël目前支持火狐3.0+、Safari 3.0+、Chrome 5.0+、Opera 9.5+和ë6.0+。

看看他们的spinning text example吧。

Answer 2

如果你的网站是静态的，我建议你创建图片，如果你使用像php这样的编程语言，你应该使用一个库来动态转换图片中的文本。

Answer 3

给画布一点小小的爱怎么样？

<!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>

更多信息请点击此处：http://www.html5canvastutorials.com/

(在OS X Lion上使用Chrome 18、Firefox 11和Safari 5进行了测试。)