Question

是否有跨浏览器方法将文本从水平旋转到垂直？

我需要在图表中添加标签。当然我可以使用图像，但在我这样做之前，我想我会问其他替代方案。

由于

Answer 1

我唯一能想到的就是SVG。

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

Raphaël目前支持Firefox 3.0 +，Safari 3.0 +，Chrome 5.0 +，Opera 9.5+和Internet Explorer 6.0 +。

查看他们的spinning text example。

Answer 2

如果您的网站是静态的，我建议您创建图像，如果您使用某些编程语言（如php），则应使用库来动态转换图像中的文本。

Answer 3

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

此处有更多信息：http://www.html5canvastutorials.com/

（在OS X Lion上使用Chrome 18，Firefox 11和Safari 5进行测试。）

Answer 4

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

在HTML中旋转文本

4 个答案: