web-dev-qa-db-ja.com

CSSクロスブラウザで縦書きのテキストを描画する方法

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

htmlcsscss3cross-browser
241
usr

最新の情報でこの回答を更新しました（ 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-transform）をチェックしてください。 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... */
}
212
Robert K

私は以下のコードを使ってページに縦書きのテキストを書いています。 Firefox 3.5以降、Webキット、オペラ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);
}
73
Choesang

別の解決策は、SVGテキストノードを使用することです。これは ほとんどのブラウザでサポートされています です。

<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

13
Jenny O'Reilly

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>
8
Oriol

これを http://snook.ca/archives/html_and_css/css-text-rotation から書き直しました。

 <スタイル> 
。回転-90 
 {
]表示：ブロック、
]位置：絶対、
]右：-5px ; 
 top：15px; 
 -webkit-transform：回転（-90度）; 
 -moz-transform：回転（-90度）; 
} 
 ____。] </style> 
 <！ -  [if IE]> 
 <style> 
 .Rotate-90 {
 filter：progid：DXImageTransform。 Microsoft.BasicImage（rotation = 3）; 
右：-15px。 top：5px; 
} 
 </style> 
 <！[endif]  - >
6
john

Bootstrap 3を使用している場合は、ミックスインの1つを使用できます。

.rotate(degrees);

例：

.rotate(-90deg);
5
Andreas Fröwis

私は純粋なCSSでそれをしようとするのに問題がありました - それは少しゴミに見えることができるフォントによって異なります。別の方法として、SVG/VMLを使ってそれを行うことができます。簡単にクロスブラウザにするのを助けるライブラリがあります。 ラファエル および 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が必要だと思います。

5
Mark Rhodes

Chrome、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*/      
}
4
Devner