Tema: Rotar Texto
Ver Mensaje Individual
  #6 (permalink)  
Antiguo 05/06/2007, 12:20
furoya
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 5 meses
Puntos: 317
Re: Rotar Texto

Viene del mensaje anterior.

Código:
<span class="bl">&#xa0; </span><span class="ng">&nbsp;</span><span class="bl">&#xa0; &#xa0; &#xa0; &#xa0; &#xa0; &#xa0; &#xa0; </span><br>
<span class="bl">&#xa0; &#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0; &#xa0; &#xa0; &#xa0; &#xa0; &#xa0; &#xa0;</span><br>
<span class="bl">&#xa0; </span><span class="ng">&nbsp; &nbsp; &nbsp;</span><span class="bl">&#xa0; &#xa0; &#xa0; &#xa0; &#xa0; </span><br>
<span class="bl">&#xa0; &#xa0; &#xa0; &#xa0; &#xa0;</span><span class="ng">&nbsp; &nbsp; &nbsp; &nbsp;</span><span class="bl">&#xa0;</span><br>
<span class="bl">&#xa0; &#xa0;</span><span class="ng">&nbsp; &nbsp;</span><span class="bl">&#xa0; &#xa0; &#xa0; &#xa0; &#xa0; &#xa0;</span><br>
<span class="bl">&#xa0; </span><span class="ng">&nbsp;</span><span class="bl">&#xa0; &#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0; &#xa0; &#xa0;</span><span class="ng">&nbsp; </span><span class="bl">&#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0;</span><br>
<span class="bl">&#xa0; </span><span class="ng">&nbsp;</span><span class="bl">&#xa0; &#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0; &#xa0; </span><span class="ng">&nbsp;</span><span class="bl">&#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0;</span><br>
<span class="bl">&#xa0; </span><span class="ng">&nbsp;</span><span class="bl">&#xa0; &#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0; &#xa0; </span><span class="ng">&nbsp;</span><span class="bl">&#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0;</span><br>
<span class="bl">&#xa0; </span><span class="ng">&nbsp;</span><span class="bl">&#xa0; &#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0; &#xa0; </span><span class="ng">&nbsp;</span><span class="bl">&#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0;</span><br>
<span class="bl">&#xa0; &#xa0;</span><span class="ng">&nbsp; &nbsp;</span><span class="bl">&#xa0; &#xa0; &#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0;</span><br>
<span class="bl">&#xa0; &#xa0; &#xa0; &#xa0; &#xa0; &#xa0; </span><span class="ng">&nbsp; &nbsp;</span><span class="bl">&#xa0; </span><br>
<span class="bl">&#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0; &#xa0; &#xa0; &#xa0; &#xa0; &#xa0; &#xa0; &#xa0;</span><br>
<span class="bl">&#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0; &#xa0; &#xa0;</span><span class="ng">&nbsp; &nbsp; &nbsp; &nbsp;</span><span class="bl">&#xa0;</span><br>
<span class="bl">&#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0; &#xa0; &#xa0; &#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0; &#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0;</span><br>
<span class="bl">&#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0; &#xa0; &#xa0; &#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0; &#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0;</span><br>
<span class="bl">&#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0; &#xa0; &#xa0; &#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0; &#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0;</span><br>
<span class="bl">&#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0; &#xa0; &#xa0; &#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0; &#xa0;</span><span class="ng">&nbsp;</span><span class="bl">&#xa0;</span><br>
<span class="bl">&#xa0;</span><span class="ng">&nbsp; &nbsp; &nbsp; </span><span class="bl">&#xa0; &#xa0; &#xa0;</span><span class="ng">&nbsp; &nbsp;</span><span class="bl">&#xa0; </span><br>
<span class="bl">&#xa0; &#xa0; &#xa0; &#xa0; &#xa0; &#xa0; &#xa0; &#xa0; &#xa0;</span><br>
</blockquote>

</body>
</html>
El segundo sí muestra el 'texto' en la fuente que hayamos declarado, pero tampoco es un texto real. Y uso un escript porque sería practicamente imposible escribir el código a mano. Lo pongo solamente como muestra, ya que el tiempo de rendering puede ser enorme, y directamente proporcional a la superficie del párrafo; lo que lo hace más que inútil en una página real.

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>BTLR.</title>
<script type="text/javascript">
function btlr(){
var contFin = "";
var objIni = document.getElementById( "derecho" );
var objFin = document.getElementById( "torcido" );
var alcho = parseInt(objIni.offsetHeight);
var anto = parseInt(objIni.offsetWidth);
var contIni = objIni.innerHTML;
var i , j;
objFin.style.height = anto +"px";
objFin.style.width = alcho +"px";

for(i=0; i<alcho; i++){
for(j=0; j<anto; j++){
contFin += "<div style='position:absolute; top:"+(anto-j-1)+"px; left:"+i+"px; background-color:#ffffff; height:1px; width:1px; overflow:hidden'><div style='white-space:nowrap; cursor:not-allowed; margin-left:"+ (j*-1) +"px; margin-top:"+(i*-1)+"px; background-color:#ffffff; overflow:hidden;'>"+ contIni +"</div></div>"}}

objFin.innerHTML = contFin;
}
//onload = btlr;
</script>
<style type="text/css">
body{color:#ffffff; background-color:#000000; }
#derecho , #torcido {position:relative; font: bold 16px sans-serif;postion:relative; border-collapse:collapse; color:#000000; background-color:#ffffff; overflow:hidden;}
</style>
</head>
<body>
<h2>Simulaci&oacute;n de texto rotado a 270°. ( IE 5.5+, FF )</h2>

<p><span id="derecho">Foros del Web</span></p>

<div id="torcido"> <input type="button" value="270°" onclick="btlr(); return false"> Clic para rotar. ( El efecto puede demorar varios segundos en mostrarse. )</div>

</body>
</html>
Al menos éstos sí funcionan en FF. Y peor es nada.

Impresionante uso de CSS.