Jak mogę narysować tekst pionowy za pomocą przeglądarki CSS?

Question

Chcę obrócić pojedyncze słowo tekstu o 90 stopni, korzystając z obsługi wielu przeglądarek (> = IE6,> = Firefox 2, dowolnej wersji przeglądarki Chrome, Safari lub Opera). Jak to zrobić?

Answer 1

Zaktualizowano tę odpowiedź na podstawie najnowszych informacji (z CSS Tricks). Kudos do Matta i Douglasa za wskazanie implementacji filtra.

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

Old odpowiedź:

For FF 3.5 lub Safari/Webkit 3.1, sprawdź: -moz-transform (i -webkit-transform). IE ma Matrix filter (v5.5 +), ale nie jestem pewien, jak z niego korzystać. Opera nie ma jeszcze możliwości transformacji.

.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

I dostosowany to z 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

Używam następujący kod do wpisywania tekstu w pionie na stronie. Firefox 3.5+, WebKit, opera 10.5+ i 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

miałem problemy staramy się robić to w czystym CSS - w zależności od czcionki może wyglądać trochę śmieci. Jako alternatywę możesz użyć SVG/VML, aby to zrobić. Istnieją biblioteki, które ułatwiają przeglądanie przeglądarki, np. Raphael i ExtJS. W ExtJS4 kod wygląda następująco:

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

To będzie pracować w IE6 + i wszystkich nowoczesnych przeglądarkach, jednak niestety myślę, że trzeba co najmniej FF3.0.

Answer 5

Moje rozwiązanie, które będzie działać na Chrome, Firefox, IE9, IE10 (Zmień stopni jak na swoje wymagania):

.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

Jeśli używasz Bootstrap 3, można użyć jednej z nich znajduje się wstawek:

.rotate(degrees); 

przykład:

.rotate(-90deg); 

Answer 7

Innym rozwiązaniem jest użycie tex SVG t węzeł, który jest 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> 

Demo:https://jsfiddle.net/bkymb5kr/

więcej w tekście SVG:http://tutorials.jenkov.com/svg/text-element.html

Answer 8

Moduł CSS Writing Modes wprowadza ortogonalne przepływów z tekstem pionowym.

Po prostu użyj właściwości writing-mode z żądaną wartością.

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>