Comment créer du texte vertical en utilisant uniquement CSS?

Question

Est-il possible de créer du texte vertical en utilisant uniquement CSS, compatible avec IE6 +?

Par vertical Je veux dire

F 
O 
O 

B 
A 
R 

Answer 1

Modifié: Vous pouvez essayer ce qui suit:

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

Cela semble fonctionner dans Firefox 3.5 et IE7 + (ne pas avoir accès à IE6 en ce moment). La seule chose qui manque de cette solution est une nouvelle ligne supplémentaire pour un espace, le résultat est quelque chose comme:

F
O
O
B
A
R

Answer 2

Aujourd'hui, il est impossible dans un navigateur manière agnostique. Attendez CSS3.

Answer 3

Vous pouvez réaliser quelque chose de similaire (au moins dans IE) en utilisant ce CSS:

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

Mais cela fera tourner les caractères de 90 degrés dans le sens des aiguilles d'une montre.

Answer 4

Cela fonctionne dans IE, mais malheureusement pas FF:

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