Pergunta

É possível criar texto vertical usando apenas CSS, compatível com IE6 +?

Por média verticais I

F
O
O

B
A
R
Foi útil?

Solução

Editado: Você pode tentar o seguinte:

p {
  letter-spacing: 1000px;    // more than width of parent 
  word-wrap: break-word;    // seems to work in at least Firefox and IE7+ 
}

Isso parece funcionar no Firefox 3.5 e IE7 + (não têm acesso ao IE6 agora). A única coisa que está faltando essa solução é uma nova linha extra para um espaço, o resultado é algo como:

F
O
O
B
A
R

Outras dicas

Hoje não é possível de forma agnóstica browser. Espere por CSS3.

Isso funciona no IE, mas infelizmente não FF:

.verticaltext 
{
    writing-mode: tb-rl;
    filter: fliph flipv;
}

Você pode conseguir algo semelhante (pelo menos no IE) usando este CSS:

.verticaltext {
  writing-mode: tb-rl;
}

Mas isso vai girar os caracteres em 90 graus no sentido horário.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top