Hola
Davhira :
Había visto tu mensaje, pero no lo respondí porque la verdad es que no tiene una buena solución. La que usaste es solamente para
Internet Explorer 5.5+. Me parece que lo mejor es "hacer lo mismo que el filtro" (o más o menos), pero a mano : convertir el texto a imagen y rotalo con un editor.
Lo de usar
layout-flow tampoco era necesario, seguramente lo descubriste mientras buscabas y hacías pruebas. El problema es que para aplicar los filtros
IE necesita que el objeto tenga un
layout, y la posición absoluta se lo da, junto con otras propiedades
filter:Alpha ¿sólo se aplica a imágenes?
Estoy seguro de que en el Foro ya trataron este tema, pero si tú no lo encontraste, yo no lo voy a hacer, así que aprovecho y dejo algún ejemplo más.
Código:
<HTML>
<HEAD>
<TITLE> ROTACIÓN.</TITLE>
<STYLE>
button{font:bold 16px inherit; width:110px}
</STYLE>
</HEAD>
<BODY>
<h2>Rota un elemento 90, 180 y 270 grados.</h2>
Con filtro <tt>rotation</tt>. Para <font face=sans-serif><b>IE 5.5+</b></font>.
<p>
<DIV ID="rotable" STYLE="position:absolute; left:270px;" /*debe tener ancho, alto y/o posición*/>
<h3>QWERTYUIOP</h3>
<IMG SRC='http://www.forosdelweb.com/images/vbulletin3_logo_fdw.gif'>
</DIV>
<BUTTON onclick="rotable.style.filter=''">Rotar 0°</BUTTON> <br>
<BUTTON onclick="rotable.style.filter=
'progid:DXImageTransform.Microsoft.BasicImage(rotation=1)'">
Rotar 90°</BUTTON> <br>
<BUTTON onclick="rotable.style.filter=
'progid:DXImageTransform.Microsoft.BasicImage(rotation=2)'">
Rotar 180°</BUTTON> <br>
<BUTTON onclick="rotable.style.filter=
'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)'">
Rotar 270°</BUTTON> <br>
</BODY>
</HTML>
Otra forma es
Código:
<html>
<head>
<title> TEXTO A 45º.</title>
<SCRIPT>
<!--
function giro(){
alfa.style.cssText="position:absolute;height:90%";
bravo.style.display="none";}
// -->
</SCRIPT>
<STYLE>
<!--
b{font-weight:900}
// -->
</STYLE>
</head>
<body ><div id=bravo style="position:absolute;top:0;font:26px wingdings;color:blue;cursor:hand" onclick=giro()><u title="Rotar a 0º.">Æ</u></div>
<!--COMIENZA TEXTO ROTADO-->
<div id=alfa style=" position:absolute; filter:flipH() flipV(); height:90%; writing-mode:tb-rl ">
<h2>Rota el texto a 45º. <br>El efecto "de abajo hacia arriba y de izquierda a derecha" combina <b>CSS</b> y filtros de <b>IE</b>.</h2>
Ver <a href="textovertical1.html">textovertical1.html</a>.
</div>
</body>
</html>
Son ejemplos muy viejos, seguro habrá que hacerles algunos ajustes.
Una última opción sería
E
N
C
O
L
U
M
N
A
R
L
O
S
C
A
R
A
C
T
E
R
E
S
, que también funciona en todos los navegadores.
Y te felicito. No sólo porque encontraste una respuesta por ti mismo, sino porque la compartiste con nosotros.
