Existe uma maneira de entrada de texto de rotação?

Question

Eu tenho que alinhar uma caixa de texto e algum texto, a cerca de 30 graus, como este:

Eu gostaria que ele funcione, pelo menos no IE e FF. Tudo o que eu encontrados nas ofertas de rede com rotação de imagem.
Qualquer um?

Answer 1

Não há nenhuma boa solução cross-browser.

Últimas transformações suportes Webkit CSS, que permitem tal coisa de maneira simples.

Há <foreignContent> em SVG que teoricamente permitiria rodar HTML, mas não é amplamente suportado (e onde é suportado, geralmente é incompleto e de buggy).

Eu sugiro que você mudar de design da página. Tente truques visuais com bordas e sombras em torno da entrada que fazê-lo parecer um pouco rodado.

Eu aconselho contra hacks em Javascript ou Flash. elementos de entrada do navegador são importantes para a usabilidade. Seus hacks pode não jogar bem com os gerenciadores de senha / preenchimento automático, vários atalhos de teclado padrão, seleção de texto, etc.

Answer 2

Sua melhor aposta é provavelmente o Flash.

Answer 3

Não totalmente suportado em navegadores atuais, mas funciona razoavelmente (pelo menos) em FF3 e IE7, é a tela HTML elemento . O elemento de tela é parte do HTML5 e permite a renderização de scripts dinâmica de imagens bitmap. Lona é constituída por uma região amovível definido no código HTML com atributos de altura e largura. código JavaScript pode acessar a área através de um conjunto completo de funções similares a outros comum 2D APIs de desenho, permitindo assim gráficos gerados dinamicamente.

A página dos shows manual Mozilla como desenhar texto em uma tela. Todos os gráficos de lona pode ter rotate(angle) aplicada. O exemplo que se utiliza o método de rotação para desenhar formas em um padrão 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

Concordo com PEZ. Gostaria de usar o Flash para este. Mas no Safari você pode usar transformações CSS3 para fazer isso.

Answer 5

Em cima de qualquer cabeça, eu acho que isso é algo que você só pode fazer em CSS3 que não é amplamente suportado o suficiente para usar, mas (a menos que seja algum tipo de aplicativo interno onde você pode dizer que um determinado navegador é requerido ).

Answer 6

Tente css3

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

Mas isso não vai funcionar no IE

Para o IE 9 + (graças a Michael Potter)

-ms-transform: rotate(270deg)