在HTML中旋转文本

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

我需要为图形添加标签。当然，我可以使用图像，但在我做之前，我想我会询问其他选择。

谢谢

来源

2011-06-07 santa

这里希望圣诞老人找到一份礼物，他可以与我们所有人分享！ – n8wrl 2011-06-07 18:56:51

我们如何谈论跨浏览器？ – 2011-06-07 18:57:40

只有新的skool浏览器或包括Internet Explorer 6-8？ – Tronic 2011-06-07 18:58:15

我只能想到的一点是SVG。

RaphaelJS aparently在处理一个很好的跨浏览器的方式这样的事情。

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

查看他们的spinning text example。

来源

2011-06-07 18:59:48

本身不是jQuery，但它是某种东西。 – 2011-06-07 19:00:54

是的，我想这是与jQuery ... – santa 2011-06-07 19:49:26

@santa - [为什么？]（http://en.wikipedia.org/wiki/Golden_hammer） – 2011-06-07 19:50:23

，如果你的网站是静态的，我建议你创建的图片，如果你使用一些编程语言如PHP，你应该使用一个图书馆的文字转换成图像上飞。

来源

2011-06-07 19:11:05 PachinSV

对帆布有点爱吗？

<!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，11火狐和Safari 5）

来源

2012-04-23 16:51:24

除市场领导者外，在所有主流浏览器上进行测试？ :-) – 2012-08-10 23:10:15

怎么样在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>

来源

2012-04-23 16:59:25

在HTML中旋转文本

回答

相关问题