Come posso disegnare un testo verticale con CSS cross-browser?


243

Voglio ruotare una singola parola di testo di 90 gradi, con supporto cross-browser (> = IE6,> = Firefox 2, qualsiasi versione di Chrome, Safari o Opera). Come si può fare?


4
Non esiste un CSS puro che puoi utilizzare con compatibilità incrociata. Quello che ho è tutto quello che c'è. Stai meglio con un'immagine.
Robert K,

1
Il crossbrowser di testo verticale non è così difficile. Su dns4.nl c'è una soluzione che funziona anche in opera. L'ho provato con tutte le versioni, ad esempio, Mozilla e Safari (anche corona). il link è: dns4.nl/pagina/html_code/vertikale_tekst.html . commento per xkcd150 :> Il problema è che si basa sull'elemento canvas. - xkcd150 20 settembre alle 10:13 No, la procedura non si basa sull'elemento canvas.

Ecco un tutorial che spiega come eseguire tutti i tipi di trasformazioni di testo anche in IE (compresa la soluzione al tuo problema) :) useragentman.com/blog/2010/03/09/… Spero che ti aiuti!
Juanma Guerrero,

Ecco una ripartizione della tecnica che ho usato: scottgale.com/blog/css-vertical-text/2010/03/01

Potrei ruotare correttamente seguendo le istruzioni fornite in questa pagina ma non sono riuscito a stampare la pagina. Il testo viene stampato all'indietro. Questo sito mi è stato molto utile: sevenwires.com/play/UpsideDownLetters.html
Nahuel

Risposte:


213

Aggiornata questa risposta con informazioni recenti (dai trucchi CSS ). Complimenti a Matt e Douglas per aver sottolineato l'implementazione del filtro.

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

Vecchia risposta:

Per FF 3.5 o Safari / Webkit 3.1, controlla: -moz-transform (e -webkit-transform). IE ha un filtro Matrix (v5.5 +), ma non sono sicuro su come usarlo. Opera non ha ancora capacità di trasformazione.

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

+1 per l'icona dell'orso fantasma;) Ho avuto un sacco di problemi nel fare questo lavoro, ho finito per cambiare la mia struttura DOM e sfumare con un margine negativo. Una versione di IE che è più semplice da usare ma non sembra corretta quando la pagina viene stampata: writing-mode: tb-rl; filtro: flipv fliph;
RMorrisey,

12
Microsoft "filter: progid: DXImageTransform.Microsoft.BasicImage (rotation = 3);"
Matt,

1
Sfortunatamente, IE9 (in modalità standard!) Applica sia gli stili -ms-transform- *, sia il filtro. Nella visualizzazione di compatibilità, applica solo il filtro.
Romløk,

3
Assicurati che il tuo testo sia un elemento a blocchi, cioè usa display: inline-block o simile
James Westgate,

2
Ecco alcuni filtri per IE8 e IE9. Il primo è IE8, il secondo è la modalità standard IE8 e # 3 rimuove il filtro per IE9 +. Arrrgh, non riesco a ottenere commenti stackoverflow per smettere di filtrare i miei hack CSS, quindi guarda jsfiddle.net/GrPyj/9
Justin Grant il

73

Sto usando il seguente codice per scrivere il testo verticale in una pagina. Firefox 3.5+, webkit, opera 10.5+ e 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);
}

Funziona su Chrome 5. Non funziona con la modalità "stranezze" di IE 8; fa lavoro in "modalità IE8 Standards".
Asaf Bartov,

Grazie per avermi fatto sapere. Pubblicalo qui, se trovi un modo per avere testo verticale in IE in modalità stranezze.
Choesang

15

Un'altra soluzione è utilizzare un nodo di testo SVG che è supportato dalla maggior parte dei 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/

Ulteriori informazioni sul testo SVG: http://tutorials.jenkov.com/svg/text-element.html


ottima soluzione, molto meglio delle precedenti - nessun problema con il posizionamento del testo dopo la rotazione
Picard

9

Il modulo Modalità di scrittura CSS introduce flussi ortogonali con testo verticale.

Basta usare la writing-modeproprietà con il valore desiderato.

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>


2
lateralmente-rl al momento non è ampiamente supportato, consiglierei vertical-rl e ruotando a 180 gradi
godblessstrawberry

6

L'ho adattato da http://snook.ca/archives/html_and_css/css-text-rotation :

<Style>
    .Rotate-90
    {
        blocco di visualizzazione;
        posizione: assoluta;
        a destra: -5px;
        sopra: 15px;
        -webkit-transform: rotate (-90deg);
        -moz-transform: rotate (-90deg);
    }
</ Style>
<! - [se IE]>
    <Style>
        .Rotate-90 {
            filtro: progid: DXImageTransform.Microsoft.BasicImage (rotazione = 3);
            destra: -15px; top: 5px;
        }
    </ Style>
    <! [Endif] ->

5

Ho avuto problemi cercando di farlo in puro CSS - a seconda del carattere può sembrare un po 'spazzatura. In alternativa è possibile utilizzare SVG / VML per farlo. Ci sono librerie che aiutano a farlo attraversare il browser con facilità, ad esempio Raphael ed ExtJS . In ExtJS4 il codice è simile al seguente:

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

Funzionerà in IE6 + e in tutti i browser moderni, tuttavia, sfortunatamente, penso che sia necessario almeno FF3.0.


1
Adoro la differenziazione tra IE6 + e tutti i browser moderni: sembra che tu stia dicendo che qualsiasi versione di IE non è moderna :)
ClarkeyBoy,

1
@ClarkeyBoy Direi che solo IE10 è quasi aggiornato con altri browser, e solo perché il rendering gpu forzato e il layout della griglia. Non puoi davvero chiamare IE un browser moderno, perché aggiorna x3-x10 volte più lentamente di ogni altro browser.
skmasq,

La soluzione migliore è utilizzare un file SVG o questo JS, poiché potresti scoprire che l'utilizzo della proprietà di trasformazione CSS potrebbe non essere compatibile con le tue pagine progettate in modo reattivo.
b01,

5

Se usi Bootstrap 3, puoi usare uno dei suoi mixin:

.rotate(degrees);

Esempio:

.rotate(-90deg);

1
Funziona ancora, ma si noti che: Tutti i mixin del fornitore sono obsoleti a partire dalla v3.2.0 a causa dell'introduzione di Autoprefixer nel nostro Gruntfile. Saranno rimossi in v4.
yishaiz,

4

La mia soluzione che funzionerebbe su Chrome, Firefox, IE9, IE10 (Cambia i gradi secondo i tuoi requisiti):

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

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.