Làm cách nào tôi có thể vẽ văn bản dọc với trình duyệt chéo CSS?

Tôi muốn xoay một từ văn bản một góc 90 độ, với trình duyệt chéo (> = IE6,> = Firefox 2, mọi phiên bản Chrome, Safari hoặc Opera) hỗ trợ. Điều này có thể giải quyết như thế nào?

Đã cập nhật câu trả lời này với thông tin gần đây (từ Thủ thuật CSS ). Kudos cho Matt và Douglas đã chỉ ra việc thực hiện bộ lọc.

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

Câu trả lời cũ:

Đối với FF 3.5 hoặc Safari / Webkit 3.1, hãy xem: -moz-Transform (và -webkit-Transform). IE có bộ lọc Ma trận (v5.5 +), nhưng tôi không chắc chắn cách sử dụng nó. Opera chưa có khả năng biến đổi.

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

Tôi đang sử dụng đoạn mã sau để viết văn bản dọc trong một trang. Firefox 3.5+, webkit, opera 10.5+ và 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);
}

Một giải pháp khác là sử dụng một nút văn bản SVG được hỗ trợ bởi hầu hết các trình duyệt .

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

Bản trình diễn: https://jsfiddle.net/bkymb5kr/

Thông tin thêm về văn bản SVG: http://tutorials.jenkov.com/svg/text-element.html

Các CSS chế độ Viết Module giới thiệu dòng trực giao với văn bản dọc.

Chỉ cần sử dụng writing-modetài sản với giá trị mong muốn.

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>

Tôi đã điều chỉnh điều này từ http://snook.ca/archives/html_and_css/css-text-rotation :

<phong cách>
    .Rotate-90
    {
        hiển thị: khối;
        vị trí: tuyệt đối;
        phải: -5px;
        đầu trang: 15px;
        -webkit-Transform: xoay (-90deg);
        -moz-Transform: xoay (-90deg);
    }
</ phong cách>
<! - [nếu IE]>
    <phong cách>
        .Rotate-90 {
            bộ lọc: progid: DXImageTransform.Microsoft.BasicImage (rotation = 3);
            phải: -15px; trên cùng: 5px;
        }
    </ phong cách>
    <! [endif] ->

Tôi đã gặp vấn đề khi cố gắng thực hiện bằng CSS thuần túy - tùy thuộc vào phông chữ, nó có thể trông hơi rác. Để thay thế, bạn có thể sử dụng SVG / VML để làm điều đó. Có những thư viện giúp làm cho nó vượt qua trình duyệt một cách dễ dàng, ví dụ như Raphael và ExtJS . Trong ExtJS4, mã trông như thế này:

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

Điều này sẽ hoạt động trong IE6 + và tất cả các trình duyệt hiện đại, tuy nhiên, thật không may, tôi nghĩ rằng bạn cần ít nhất FF3.0.

Nếu bạn sử dụng Bootstrap 3, bạn có thể sử dụng một trong những mixins của nó:

.rotate(degrees);

Thí dụ:

.rotate(-90deg);

Giải pháp của tôi sẽ hoạt động trên Chrome, Firefox, IE9, IE10 (Thay đổi độ theo yêu cầu của bạn):

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

Nếu chế độ viết CSS : sideways-lrlà những gì bạn thích và bạn tình cờ chạy vào trình duyệt dựa trên chromium / chrome. Bạn có thể thử

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

Vì vậy, tất cả các trình duyệt hiện đại hỗ trợ nó ngay bây giờ.

tham khảo: https://bugs.chromium.org/p/chromium/issues/detail?id=680331#c4