¿Hay alguna manera de rotar el ingreso de texto?

Question

Tengo que alinear un cuadro de texto y algo de texto, a unos 30 grados, de esta manera:

Me gustaría que funcionara al menos en IE y FF. Todo lo que encontré en la red trata de la rotación de imágenes.
¿Alguien?

Answer 1

No hay una buena solución de navegador cruzado.

El último Webkit admite transformaciones CSS, que permiten tal cosa de manera directa.

Hay <foreignContent> en SVG que teóricamente permitiría rotar HTML, pero no es ampliamente compatible (y donde es compatible, generalmente es incompleto y tiene errores).

Sugiero que cambie el diseño de la página. Pruebe trucos visuales con bordes y sombras alrededor de la entrada que la hagan parecer ligeramente rotada.

Aconsejo contra hacks en Javascript o Flash. Los elementos de entrada del navegador son importantes para la usabilidad. Es posible que sus trucos no funcionen bien con administradores de contraseña / autocompletar, varios atajos de teclado estándar, selección de texto, etc.

Answer 2

Su mejor apuesta es probablemente Flash.

Answer 3

No es totalmente compatible con los navegadores actuales, pero funciona razonablemente (al menos) en FF3 e IE7, es el elemento HTML de lienzo . El elemento de lienzo es parte de HTML5 y permite la representación dinámica de secuencias de comandos de imágenes de mapa de bits. El lienzo consiste en una región dibujable definida en código HTML con atributos de altura y anchura. El código JavaScript puede acceder al área a través de un conjunto completo de funciones de dibujo similares a otras API 2D comunes, lo que permite gráficos generados dinámicamente.

Una página del Manual de Mozilla muestra cómo dibujar texto en un lienzo. Todos los gráficos de lienzo pueden tener rotate(angle) aplicado. El ejemplo utiliza el método de rotación para dibujar formas en un patrón circular .:

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

De acuerdo con PEZ. Yo usaría Flash para este. Pero en Safari puedes usar transformaciones CSS3 para lograr esto.

Answer 5

En la parte superior de cualquier cabeza, creo que esto es algo que solo puedes hacer en CSS3 que aún no es lo suficientemente compatible como para usarlo (a menos que sea algún tipo de aplicación interna en la que puedas decir que se requiere cierto navegador) ).

Answer 6

Prueba css3

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

Pero esto no funcionará en IE

Para IE 9+ (gracias a Michael Potter)

-ms-transform: rotate(270deg)