如何使用CSS跨瀏覽器繪製垂直文本？

Question

我想通過跨瀏覽器（> = IE6，> = Firefox 2，任何版本的Chrome，Safari或Opera）將單個文本字旋轉90度。如何才能做到這一點？

Answer 1

以最新信息（來自CSS Tricks）更新了此答案。榮譽馬特和道格拉斯指出了過濾器的實施。

.rotate { 
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    -ms-transform: rotate(-90deg); 
    -o-transform: rotate(-90deg); 
    transform: rotate(-90deg); 

    /* also accepts left, right, top, bottom coordinates; not required, but a good idea for styling */ 
    -webkit-transform-origin: 50% 50%; 
    -moz-transform-origin: 50% 50%; 
    -ms-transform-origin: 50% 50%; 
    -o-transform-origin: 50% 50%; 
    transform-origin: 50% 50%; 

    /* Should be unset in IE9+ I think. */ 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 
} 

舊答案：

對於FF 3.5或Safari/3.1的Webkit，檢查出：-moz-transform（和-webkit變換）。 IE有Matrix filter（v5.5 +），但我不確定如何使用它。 Opera還沒有轉換功能。

.rot-neg-90 { 
    /* rotate -90 deg, not sure if a negative number is supported so I used 270 */ 
    -moz-transform: rotate(270deg); 
    -moz-transform-origin: 50% 50%; 
    -webkit-transform: rotate(270deg); 
    -webkit-transform-origin: 50% 50%; 
    /* IE support too convoluted for the time I've got on my hands... */ 
} 

Answer 2

我適應這個從http://snook.ca/archives/html_and_css/css-text-rotation：

 
<style> 
    .Rotate-90 
    { 
     display: block; 
     position: absolute; 
     right: -5px; 
     top: 15px; 
     -webkit-transform: rotate(-90deg); 
     -moz-transform: rotate(-90deg); 
    } 
</style> 
<!--[if IE]> 
    <style> 
     .Rotate-90 { 
      filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 
      right:-15px; top:5px; 
     } 
    </style> 
    <![endif]--> 

Answer 3

我使用下面的代碼寫在一個頁面垂直文本。 的Firefox 3.5+，WebKit的，歌劇10.5+和IE

.rot-neg-90 { 
    -moz-transform:rotate(-270deg); 
    -moz-transform-origin: bottom left; 
    -webkit-transform: rotate(-270deg); 
    -webkit-transform-origin: bottom left; 
    -o-transform: rotate(-270deg); 
    -o-transform-origin: bottom left; 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); 
} 

Answer 4

我已經嘗試做它在純CSS問題 - 根據字體看起來就有點垃圾。作爲替代方案，您可以使用SVG/VML來完成它。有一些庫可以幫助它輕鬆跨瀏覽器，例如Raphael和ExtJS。在ExtJS4的代碼如下所示：

var drawComp = Ext.create('Ext.draw.Component', { 
     renderTo: Ext.getBody(), //or whatever.. 
     height: 100, width: 100 //ditto.. 
    }); 
    var text = Ext.create('Ext.draw.Component', { 
     type: "text", 
     text: "The text to draw", 
     rotate: { 
      x: 0, y: 0, degrees: 270 
     }, 
     x: -50, y: 10 //or whatever to fit (you could calculate these).. 
    }); 
    text.show(true); 

這將在IE6 +以及所有現代瀏覽器中運行，但是，不幸的是我認爲你需要至少FF3.0。

Answer 5

我的解決方案，能夠在Chrome，火狐，IE9，IE10工作（更改度按照您的要求）：

.rotate-text { 
    -webkit-transform: rotate(270deg); 
    -moz-transform: rotate(270deg); 
    -ms-transform: rotate(270deg); 
    -o-transform: rotate(270deg); 
    transform: rotate(270deg); 
    filter: none; /*Mandatory for IE9 to show the vertical text correctly*/  
} 

Answer 6

如果使用引導3，你可以使用它的一個混入：

.rotate(degrees); 

實施例：

.rotate(-90deg); 

Answer 7

另一種解決方案是使用一個SVG特t節點即supported by most browsers。

<svg width="50" height="300"> 
    <text x="28" y="150" transform="rotate(-90, 28, 150)" style="text-anchor:middle; font-size:14px">This text is vertical</text> 
</svg> 

演示：https://jsfiddle.net/bkymb5kr/

更多關於SVG文本：http://tutorials.jenkov.com/svg/text-element.html

Answer 8

的CSS Writing Modes模塊引入了垂直文本正交流動。

只需使用具有所需值的writing-mode屬性。

span { margin: 20px; } 
 
#vertical-lr { writing-mode: vertical-lr; } 
 
#vertical-rl { writing-mode: vertical-rl; } 
 
#sideways-lr { writing-mode: sideways-lr; } 
 
#sideways-rl { writing-mode: sideways-rl; }

<span id="vertical-lr"> 
 
    ↑ (1) vertical-lr 至<br /> 
 
    ↑ (2) vertical-lr 至<br /> 
 
    ↑ (3) vertical-lr 至 
 
</span> 
 
<span id="vertical-rl"> 
 
    ↓ (1) vertical-rl 至<br /> 
 
    ↓ (2) vertical-rl 至<br /> 
 
    ↓ (3) vertical-rl 至 
 
</span> 
 
<span id="sideways-lr"> 
 
    ↓ (1) sideways-lr 至<br /> 
 
    ↓ (2) sideways-lr 至<br /> 
 
    ↓ (3) sideways-lr 至 
 
</span> 
 
<span id="sideways-rl"> 
 
    ↓ (1) sideways-rl 至<br /> 
 
    ↓ (2) sideways-rl 至<br /> 
 
    ↓ (3) sideways-rl 至 
 
</span>