在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中旋轉文本

回答

相關問題