C'è un modo per ruotare l'inserimento di testo?

Question

Devo allineare una casella di testo e del testo, a circa 30 gradi, in questo modo:

Vorrei che funzionasse almeno in IE e FF. Tutto ciò che ho trovato in rete riguarda la rotazione delle immagini.
Chiunque?

Answer 1

Non esiste una buona soluzione cross-browser.

L'ultimo Webkit supporta le trasformazioni CSS, che consentono tale cosa in modo semplice.

C'è <foreignContent> in SVG che teoricamente consentirebbe di ruotare HTML, ma non è ampiamente supportato (e dove è supportato, di solito è incompleto e buggy).

Ti suggerisco di cambiare il design della pagina. Prova i trucchi visivi con bordi e ombre attorno all'input che lo fanno sembrare leggermente ruotato.

Sconsiglio gli hack in Javascript o Flash. Gli elementi di input del browser sono importanti per l'usabilità. I tuoi hack potrebbero non funzionare bene con gestori password / compilazione automatica, varie scorciatoie da tastiera standard, selezione di testo, ecc.

Answer 2

La tua scommessa migliore è probabilmente Flash.

Answer 3

Non completamente supportato sui browser attuali, ma funziona ragionevolmente (almeno) su FF3 e IE7, è canvas HTML element . L'elemento canvas fa parte di HTML5 e consente il rendering dinamico tramite script delle immagini bitmap. Il canvas è costituito da un'area disegnabile definita nel codice HTML con attributi di altezza e larghezza. Il codice JavaScript può accedere all'area tramite un set completo di funzioni di disegno simili ad altre API 2D comuni, consentendo così la grafica generata dinamicamente.

Una pagina del Manuale di Mozilla mostra come disegnare il testo su una tela. Su tutta la grafica su tela è possibile applicare rotate(angle) . L'esempio utilizza il metodo di rotazione per disegnare forme in un modello circolare .:

function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
ctx.translate(75,75);

for (i=1;i<6;i++){ // Loop through rings (from inside to out)
    ctx.save();
    ctx.fillStyle = 'rgb('+(51*i)+','+(255-51*i)+',255)';

    for (j=0;j<i*6;j++){ // draw individual dots
      ctx.rotate(Math.PI*2/(i*6));
      ctx.beginPath();
      ctx.arc(0,i*12.5,5,0,Math.PI*2,true);
      ctx.fill();
    }

    ctx.restore();
  }
}

Answer 4

Accetto con PEZ. Vorrei usare Flash per questo. Ma in Safari puoi usare le trasformazioni CSS3 per farlo.

Answer 5

Al di sopra di ogni testa, penso che questo sia qualcosa che puoi fare solo in CSS3 che non è ancora abbastanza supportato da usare ancora (a meno che non sia una sorta di app interna in cui puoi dire che è richiesto un certo browser ).

Answer 6

Prova css3

-webkit-transform: rotate(270deg);
-moz-transform:rotate(270deg);
-o-transform: rotate(270deg);

Ma questo non funzionerà su IE

Per IE 9+ (grazie a Michael Potter)

-ms-transform: rotate(270deg)