Bagaimana cara menggambar teks vertikal dengan browser lintas CSS?

Saya ingin memutar satu kata teks sebesar 90 derajat, dengan cross-browser (> = IE6,> = Firefox 2, versi Chrome, Safari, atau Opera). Bagaimana ini bisa dilakukan?

Memperbarui jawaban ini dengan informasi terkini (dari Trik CSS ). Kudos to Matt and Douglas untuk menunjukkan implementasi filter.

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

Jawaban lama:

Untuk FF 3.5 atau Safari / Webkit 3.1, periksa: -moz-transform (dan -webkit-transform). IE memiliki filter Matrix (v5.5 +), tapi saya tidak yakin bagaimana cara menggunakannya. Opera belum memiliki kemampuan transformasi.

.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... */
}

Saya menggunakan kode berikut untuk menulis teks vertikal dalam satu halaman. Firefox 3.5+, webkit, opera 10.5+ dan 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);
}

Solusi lain adalah dengan menggunakan simpul teks SVG yang didukung oleh sebagian besar browser .

<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/

Lebih lanjut tentang teks SVG: http://tutorials.jenkov.com/svg/text-element.html

The CSS Menulis Mode modul memperkenalkan arus orthogonal dengan teks vertikal.

Cukup gunakan writing-modeproperti dengan nilai yang diinginkan.

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>

Saya mengadaptasi ini dari http://snook.ca/archives/html_and_css/css-text-rotation :

<style>
    .Rotate-90
    {
        display: blok;
        posisi: absolut;
        kanan: -5px;
        atas: 15px;
        -webkit-transform: rotate (-90deg);
        -moz-transform: rotate (-90deg);
    }
</style>
<! - [jika IE]>
    <style>
        .Rotate-90 {
            filter: progid: DXImageTransform.Microsoft.BasicImage (rotasi = 3);
            kanan: -15px; atas: 5px;
        }
    </style>
    <! [endif] ->

Saya mengalami masalah saat mencoba melakukannya dalam CSS murni - tergantung fontnya, ini bisa terlihat seperti sampah. Sebagai alternatif, Anda dapat menggunakan SVG / VML untuk melakukannya. Ada perpustakaan yang membantu membuatnya lintas browser dengan mudah misalnya Raphael dan ExtJS . Dalam ExtJS4 kodenya terlihat seperti ini:

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

Ini akan bekerja di IE6 + dan semua browser modern, namun, sayangnya saya pikir Anda memerlukan setidaknya FF3.0.

Jika Anda menggunakan Bootstrap 3, Anda dapat menggunakan salah satu dari itu mixins:

.rotate(degrees);

Contoh:

.rotate(-90deg);

Solusi saya yang dapat digunakan di Chrome, Firefox, IE9, IE10 (Ubah derajat sesuai kebutuhan Anda):

.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*/      
}

Jika mode penulisan CSS : sideways-lradalah apa yang Anda sukai, dan Anda kebetulan menemukan peramban berbasis kromium / krom. Anda boleh mencoba

{
  writing-mode: vertical-rl; 
  transform: rotate(180deg);
}

jadi semua browser modern mendukungnya sekarang.

referensi: https://bugs.chromium.org/p/chromium/issues/detail?id=680331#c4