CSSのクロスブラウザで縦書きテキストを描画するにはどうすればよいですか？

Question

クロスブラウザ（> = IE6、> Firefox 2、Chrome、Safari、またはOperaのいずれかのバージョン）をサポートし、テキストの1単語を90度回転させたいとします。これはどうすればできますか？

Answer 1

最新の情報（CSS Tricks）でこの回答を更新しました。フィルターの実装を指摘してくれたMattとDouglasの功績。

.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/Webkitの3.1

、チェックアウト：-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の、オペラX 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でコードは次のようになります。これは、IE6 +およびすべての最新ブラウザで動作します

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); 

、しかし、残念ながら私はあなたが、少なくともFF3.0が必要だと思います。

Answer 5

クロム、Firefoxの、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テックスを使用することですノードは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> 

デモ：SVGテキストにhttps://jsfiddle.net/bkymb5kr/

詳細：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>