28-abr-2006, 13:05
|
#1 (permalink) |
 Fecha de Ingreso: mayo-2005
Mensajes: 56
|
Rotar Texto
<html> <head> <title>Untitled</title> </head> <body> <form name="formulario"> <table border="2"> <tr> <td>prueba</td> <td style="layout-flow:'vertical-ideographic'">prueba</td> <td>prueba</td> <td>prueba</td> </tr> <tr> <td>prueba</td> <td>prueba</td> <td>prueba</td> <td>prueba</td> </tr> </table> </form> </body> </html> lo que necesito es que se voltie pero del otro lado, que las letras empiecen de abajo hacia arriba, ojala me puedan ayudar... gracias |
|
|
|
02-may-2006, 17:31
|
#2 (permalink) |
|
Fecha de Ingreso: mayo-2005
Mensajes: 56
|
Hola, despues de tiempo de busqueda e intento tras intento encontre la solucion
<html>
<head> <title>Untitled</title> </head> <body> <form name="formulario"> <table border="2"> <tr> <td>prueba</td> <td><b style="position:'absolute';filter='progid:DXImageT ransform.Microsoft.BasicImage(rotation=3)'">prueba </b></td> <td>prueba</td> <td>prueba</td> </tr> <tr> <td>prueba</td> <td>prueba</td> <td>prueba</td> <td>prueba</td> </tr> </table> </form> </body> </html> Esta fue la primera solucion que encontre rotando el texto, pero lo malo es que era necesario usar posicion absoluta y eso movia espantoso el texto, teni que encontrar una forma de no usar posicion absoluta <html> <head> <title>Untitled</title> </head> <body> <form name="formulario"> <table border="2"> <tr> <td>prueba</td> <td style="layout-flow:'vertical-ideographic'; filter='progid:DXImageTransform.Microsoft.BasicIma ge(rotation=2)'">prueba</td> <td>prueba</td> <td>prueba</td> </tr> <tr> <td>prueba</td> <td>prueba</td> <td>prueba</td> <td>prueba</td> </tr> </table> </form> </body> </html> asi no se usa posicion absoluta y se respeta la posicion, espero le sirva a alguien |
|
|
|
|
08-may-2006, 11:21
|
#3 (permalink) |
 Fecha de Ingreso: noviembre-2002
Mensajes: 981
|
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:
Otra forma es <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>
Código:
Son ejemplos muy viejos, seguro habrá que hacerles algunos ajustes.<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>
Una última opción sería 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.  |
|
|
|
|
08-mar-2007, 11:08
|
#4 (permalink) |
|
Fecha de Ingreso: noviembre-2002
Mensajes: 981
|
Rotar o girar texto e imagen.
Sigo encontrando ejemplos añejos y sigo aprovechando tu tema para postearlos, Davhira.
Éste seguro lo saqué del Foro, pero debe ser anterior a la debacle del 2002 y ya no debe estar disponible.
Código:
Otro del que no dejo ejemplo es<html>
<head>
<title> ROTACIÓN DE UN OBJETO DE TEXTO EN SUS TRES EJES.</title>
<SCRIPT>
<!--
function eje1() {
texto.Rotate(15, 0, 0);
}
function eje2() {
texto.Rotate(0, 15, 0);
}
function eje3() {
texto.Rotate(0, 0, 15);
}
// -->
</SCRIPT>
<STYLE>
<!--
strong{font-weight:900}
.btn{background:#00dddd; align:center; cursor:default}
// -->
</STYLE>
</head>
<body >
<h2>Rotación de un objeto de texto en <strong>IE5+</strong>.</h2>
<table><td>
<OBJECT ID="texto"
CLASSID="CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6"
STYLE="position:relative; width:300px; height:300 px">
<PARAM NAME="SourceURL" VALUE="">
<PARAM NAME="CoordinateSystem" VALUE="0">
<PARAM NAME="MouseEventsEnabled" VALUE="0">
<PARAM NAME="HighQuality" VALUE="1">
<PARAM NAME="PreserveAspectRatio" VALUE="-1">
<PARAM NAME="Line0001" VALUE="SetLineStyle(1,0)">
<PARAM NAME="Line0002" VALUE="SetLineColor(0,0,0)">
<PARAM NAME="Line0003" VALUE="SetFillColor(255,128,0)">
<PARAM NAME="Line0004" VALUE="SetFont('serif', 24, 0, 0, 1, 0)">
<PARAM NAME="Line0005" VALUE="Text('QWERTYUIOP', 0, 0, 0)">
</OBJECT>
</td><td style=padding:30px>
<table><tr><td>
<input type=button onClick=eje1(); value="Eje X">
</td><td>
<input type=button onClick=eje2(); value="Eje Y">
</td><td>
<input type=button onClick=eje3(); value="Eje Z">
</td></tr>
<tr class=btn><td
onmouseover="giro1=setInterval('eje1()',500)" onmouseout="clearInterval(giro1)">Giro X
</td><td
onmouseover="giro2=setInterval('eje2()',500)" onmouseout="clearInterval(giro2)">Giro Y
</td><td
onmouseover="giro3=setInterval('eje3()',500)" onmouseout="clearInterval(giro3)">Giro Z
</td></tr></table>
</td></table><p>
Cada botón <b><font style=background:buttonface>Eje</font></b> rota el texto 15º; los <tt>mouseover</tt> <b><font style=background:#00dddd>Giro</font></b> le dan rotación continua.<p>
<fieldset style="padding:0 10px"><legend>código : </legend>
<pre><OBJECT ID="NOMBRE_ID"
CLASSID="CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6"
STYLE="position:relative; width:<font color=red>300px</font>; height:<font color=red>300px</font>">
<PARAM NAME="HighQuality" VALUE="<b><font color=chocolate>1</font></b>">
<PARAM NAME="Line0001" VALUE="SetLineStyle(<b><font color=blue>1, 0</font></b>)">
<PARAM NAME="Line0002" VALUE="SetLineColor(<b><font color=magenta>0,0,0</font></b>)">
<PARAM NAME="Line0003" VALUE="SetFillColor(<b><font color=green>255,128,0</font></b>)">
<PARAM NAME="Line0004" VALUE="SetFont(<b><font color=orange>'serif', 24, 0, 0, 1, 0</font></b>)">
<PARAM NAME="Line0005" VALUE="Text(<b><font color=teal>'QWERTYUIOP', 0, 0, 0</font></b>)">
</OBJECT></pre>
</fieldset><p>
<blockquote>
<font color=red><tt>width:</tt></font> y <font color=red><tt>height:</tt></font> deben ser iguales al doble del tamaño del texto.<p>
HighQuality(<b><font color=chocolate>modo</font></b>)<br>
<b>modo=0</b> => Baja resolusión.<br>
<b>modo=1</b> => Alta resolusión.<p>
SetLineStyle(<b><font color=blue>tipo, grosor</font></b>)<br>
<b>tipo=0</b> => Sin línea de contorno de texto.<br>
<b>tipo=1</b> => Línea continua.<br>
<b>tipo=2</b> => Linea discontinua.<br>
<b>grosor=0-9</b> => Ancho de la línea de borde.<p>
SetLineColor(<b><font color=magenta>R, G, B</font></b>)<br>
Intensidad del color (<b>R</b>=rojo, <b>G</b>=verde, <b>B</b>=azul)
de 0 a 255 de la linea de contorno de texto.<p>
SetFillColor(<b><font color=green>R, G, B</font></b>)<br>
Intensidad del color (<b>R</b>=rojo, <b>G</b>=verde, <b>B</b>=azul)
del relleno del texto.<p>
SetFont(<b><font color=orange>'font', Tam, B, It, Sub, Tach</font></b>)<br>
<b>font</b>: Arial, Verdana, etcétera.<br>
<b>Tam</b>: El tamaño de la letra.<br>
<b>B</b>: 0=> Normal; 1=> Negrita.<br>
<b>It</b>: 0=> Normal; 1=> Cursiva.<br>
<b>Sub</b>: 0=> Normal; 1=> Subrayado.<br>
<b>Tach</b>: 0=> Normal; 1=> Tachado.<p>
Text(<b><font color=teal>'texto', X, Y, Z</font></b>)<br>
<b>texto</b>: El texto que se muestra.<br>
<b>X</b>: Posición X inicial.<br>
<b>Y</b>: Posición Y inicial.<br>
<b>Z</b>: Posición Z inicial.<p>
</blockquote>
</body>
</html>
<!--
<PARAM NAME="CoordinateSystem" VALUE="0">
<PARAM NAME="MouseEventsEnabled" VALUE="0">
<PARAM NAME="HighQuality" VALUE="0">
<PARAM NAME="PreserveAspectRatio" VALUE="-1">
<PARAM NAME="Line0001" VALUE="SetLineStyle(1,0)">
<PARAM NAME="Line0002" VALUE="SetLineColor(0,0,0)">
<PARAM NAME="Line0003" VALUE="SetFillColor(255,128,0,255,128,0)">
<PARAM NAME="Line0004" VALUE="SetFont('serif',24,0,0,1,0)">
<PARAM NAME="Line0005" VALUE="Text('QWERTYUIOP',0,0)">
-->
Using a Matrix Transform Matrix filter. Todos siguen siendo para IExplorer y Windows. |
|
|
|
|
05-jun-2007, 12:18
|
#5 (permalink) |
|
Fecha de Ingreso: noviembre-2002
Mensajes: 981
|
Re: Rotar Texto
Quedé con culpa porque en este tema pusimos solamente versiones del efecto para IE, así que empecé a trabajar en algo que funcionara también en Firefox.
Resulta que en Texto Vertical hablé de un viejo experimento usando ASCII-Art, y como no tenía nada mejor, empecé a trabajar desde allí. Ninguno de los 2 próximos ejemplos es exactamente ése, ni tampoco se acercan al rotation, al layout-flow o al writing-mode de MS; pero, como dije, los pongo para lavar culpas. El primero se podría haber hecho con un escript, pero creo que así se entiende mejor. Está hecho con ASCII-CSS-Art y -por supuesto- no es un texto real sino "dibujado". Aunque no es muy serio, a alguien puede servirle.
Código:
Continúa en el mensaje siguiente.<!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 ASCII CSS ART. </title>
<style type="text/css">
body {background-color:black; color:white; font-family:default; }
.bl{background-color:white; color:white; font-size:14px; line-height:6px;}
.ng{background-color:black; color:black; font-size:14px; line-height:6px;}
</style>
</head>
<body>
<h2>Texto a 270° dibujado con ASCII / CSS Art.</h2>
<blockquote>
<span class="bl">                 </span><br>
<span class="bl">               </span><span class="ng"> </span><span class="bl"> </span><br>
<span class="bl">                 </span><br>
<span class="bl">            </span><span class="ng"> </span><span class="bl">  </span><br>
<span class="bl">           </span><span class="ng"> </span><span class="bl">   </span><span class="ng"> </span><span class="bl"> </span><br>
<span class="bl">           </span><span class="ng"> </span><span class="bl">   </span><span class="ng"> </span><span class="bl"> </span><br>
<span class="bl">           </span><span class="ng"> </span><span class="bl">   </span><span class="ng"> </span><span class="bl"> </span><br>
<span class="bl">           </span><span class="ng"> </span><span class="bl">   </span><span class="ng"> </span><span class="bl"> </span><br>
<span class="bl">  </span><span class="ng"> </span><span class="bl">  </span><span class="ng"> </span><span class="bl">   </span><span class="ng"> </span><span class="bl"> </span><br>
<span class="bl">  </span><span class="ng"> </span><span class="bl"> </span><span class="ng"> </span><span class="bl"> </span><span class="ng"> </span><span class="bl">          </span><br>
<span class="bl">  </span><span class="ng"> </span><span class="bl"> </span><span class="ng"> </span><span class="bl"> </span><span class="ng"> </span><span class="bl">     </span><span class="ng"> </span><span class="bl"> </span><span class="ng"> </span><span class="bl"> </span><br>
<span class="bl">  </span><span class="ng"> </span><span class="bl"> </span><span class="ng"> </span><span class="bl"> </span><span class="ng"> </span><span class="bl">    </span><span class="ng"> </span><span class="bl"> </span><span class="ng"> </span><span class="bl"> </span><span class="ng"> </span><span class="bl"> </span><br>
<span class="bl">  </span><span class="ng"> </span><span class="bl"> </span><span class="ng"> </span><span class="bl"> </span><span class="ng"> </span><span class="bl">    </span><span class="ng"> </span><span class="bl"> </span><span class="ng"> </span><span class="bl"> </span><span class="ng"> </span><span class="bl"> </span><br>
<span class="bl">   </span><span class="ng"> </span><span class="bl">  </span><span class="ng"> </span><span class="bl">    </span><span class="ng"> </span><span class="bl"> </span><span class="ng"> </span><span class="bl"> </span><span class="ng"> </span><span class="bl"> </span><br>
<span class="bl">           </span><span class="ng"> </span><span class="bl"> </span><span class="ng"> </span><span class="bl"> </span><span class="ng"> </span><span class="bl"> </span><br>
<span class="bl">   </span><span class="ng"> </span><span class="bl">      </span><span class="ng"> </span><span class="bl">  </span><br>
<span class="bl">  </span><span class="ng"> </span><span class="bl">   </span><span class="ng"> </span><span class="bl">          </span><br>
<span class="bl">  </span><span class="ng"> </span><span class="bl">   </span><span class="ng"> </span><span class="bl">   </span><span class="ng"> </span><span class="bl">  </span><br>
<span class="bl">  </span><span class="ng"> </span><span class="bl">   </span><span class="ng"> </span><span class="bl">        </span><span class="ng"> </span><span class="bl"> </span><br>
<span class="bl">  </span><span class="ng"> </span><span class="bl">   </span><span class="ng"> </span><span class="bl">       </span><span class="ng"> </span><span class="bl">  </span><br>
<span class="bl">   </span><span class="ng"> </span><span class="bl">       </span><span class="ng"> </span><span class="bl">   </span><br>
<span class="bl">              </span><span class="ng"> </span><span class="bl">  </span><br>
<span class="bl">  </span><span class="ng"> </span><span class="bl">            </span><span class="ng"> </span><span class="bl"> </span><br>
<span class="bl">  </span><span class="ng"> </span><span class="bl">       </span><span class="ng"> </span><span class="bl">  </span><br>
|
|
|
|
|
05-jun-2007, 12:20
|
#6 (permalink) |
|
Fecha de Ingreso: noviembre-2002
Mensajes: 981
|
Re: Rotar Texto
Viene del mensaje anterior.
Código:
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.<span class="bl">  </span><span class="ng"> </span><span class="bl">              </span><br> <span class="bl">   </span><span class="ng"> </span><span class="bl">             </span><br> <span class="bl">  </span><span class="ng"> </span><span class="bl">          </span><br> <span class="bl">         </span><span class="ng"> </span><span class="bl"> </span><br> <span class="bl">   </span><span class="ng"> </span><span class="bl">           </span><br> <span class="bl">  </span><span class="ng"> </span><span class="bl">   </span><span class="ng"> </span><span class="bl">     </span><span class="ng"> </span><span class="bl"> </span><span class="ng"> </span><span class="bl"> </span><br> <span class="bl">  </span><span class="ng"> </span><span class="bl">   </span><span class="ng"> </span><span class="bl">    </span><span class="ng"> </span><span class="bl"> </span><span class="ng"> </span><span class="bl"> </span><span class="ng"> </span><span class="bl"> </span><br> <span class="bl">  </span><span class="ng"> </span><span class="bl">   </span><span class="ng"> </span><span class="bl">    </span><span class="ng"> </span><span class="bl"> </span><span class="ng"> </span><span class="bl"> </span><span class="ng"> </span><span class="bl"> </span><br> <span class="bl">  </span><span class="ng"> </span><span class="bl">   </span><span class="ng"> </span><span class="bl">    </span><span class="ng"> </span><span class="bl"> </span><span class="ng"> </span><span class="bl"> </span><span class="ng"> </span><span class="bl"> </span><br> <span class="bl">   </span><span class="ng"> </span><span class="bl">     </span><span class="ng"> </span><span class="bl"> </span><span class="ng"> </span><span class="bl"> </span><span class="ng"> </span><span class="bl"> </span><br> <span class="bl">            </span><span class="ng"> </span><span class="bl">  </span><br> <span class="bl"> </span><span class="ng"> </span><span class="bl">               </span><br> <span class="bl"> </span><span class="ng"> </span><span class="bl"> </span><span class="ng"> </span><span class="bl">     </span><span class="ng"> </span><span class="bl"> </span><br> <span class="bl"> </span><span class="ng"> </span><span class="bl"> </span><span class="ng"> </span><span class="bl">       </span><span class="ng"> </span><span class="bl">   </span><span class="ng"> </span><span class="bl"> </span><br> <span class="bl"> </span><span class="ng"> </span><span class="bl"> </span><span class="ng"> </span><span class="bl">       </span><span class="ng"> </span><span class="bl">   </span><span class="ng"> </span><span class="bl"> </span><br> <span class="bl"> </span><span class="ng"> </span><span class="bl"> </span><span class="ng"> </span><span class="bl">       </span><span class="ng"> </span><span class="bl">   </span><span class="ng"> </span><span class="bl"> </span><br> <span class="bl"> </span><span class="ng"> </span><span class="bl"> </span><span class="ng"> </span><span class="bl">       </span><span class="ng"> </span><span class="bl">   </span><span class="ng"> </span><span class="bl"> </span><br> <span class="bl"> </span><span class="ng"> </span><span class="bl">     </span><span class="ng"> </span><span class="bl">  </span><br> <span class="bl">                 </span><br> </blockquote> </body> </html>
Código:
Al menos éstos sí funcionan en FF. Y peor es nada.<!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ó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>
Impresionante uso de CSS. |
|
|
|
|
02-jun-2008, 07:59
|
#7 (permalink) |
|
Fecha de Ingreso: noviembre-2002
Mensajes: 981
|
Respuesta: Rotar Texto
Acá hay una forma de "rotar" un texto en minúsculas a 180°.
http://www.fliptext.org/ http://www.revfad.com/flip.html Me los enviaron K3nny y roc2107 (gracias  !) y lo que hacen es convertir el texto a su versión "girada" en unicode.Los problemas son : que no todos los caracteres tienen esa versión (a la "l" todavía no la resolvieron), que los ejemplos no contienen letras del español (como la "ñ") y que nosotros estamos en un foro de desarrolladores web, así que el texto limpio no nos sirve, necesitamos el código para meterlo en la página, porque así es más seguro que lo vean. Hice esta herramienta para tratar de suplir esas falencias y que a nosotros nos sean más útiles.
Código:
Usé el método de seudoarrays asociativos como uno de los ejemplos anteriores; pero lo escribí de la manera más 'conocida' para que quienes recién empiezan en JS lo pudieran entender mejor.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CARACTERES GIRADOS. </title>
<script type="text/javascript">
var gir = new Array();
gir['a'] = 592;
gir['b'] = 113;
gir['c'] = 596;
gir['d'] = 112;
gir['e'] = 477;
gir['f'] = 607;
gir['g'] = 387;
gir['h'] = 613;
gir['i'] = 305;
gir['j'] = 638;
gir['k'] = 670;
gir['l'] = 124; //8402;bien,pero mucho espaciado //108; //639;
gir['m'] = 623;
gir['n'] = 117;
gir['ñ'] = 7797;
gir['o'] = 111;
gir['p'] = 100;
gir['q'] = 98;
gir['r'] = 633;
gir['s'] = 115;
gir['t'] = 647;
gir['u'] = 110;
gir['v'] = 652;
gir['w'] = 653;
gir['x'] = 120;
gir['y'] = 654;
gir['z'] = 122;
gir['.'] = 729;
gir[' '] = 32;
gir['['] = 93;
gir['('] = 41;
gir['{'] = 125;
gir['?'] = 191;
gir['¿'] = 63;
gir['!'] = 161;
gir['¡'] = 33;
gir["\'"] = 44;
gir["\\"] = 92;
gir["/"] = 47;
gir['<'] = 62;
gir['_'] = 8254;
gir[';'] = 1563;
gir[','] = 699;
gir['-'] = 45;
gir['+'] = 43;
gir['|'] = 124;
gir['#'] = 35;
gir['$'] = 36;
gir['='] = 31;
gir[':'] = 58;
gir['ç'] = "596;̒";
gir['á'] = "592;̗";
gir['é'] = "477;̗";
gir['í'] = "305;̗";
gir['ó'] = "111;̗";
gir['ú'] = "110;̗";
gir['ü'] = "110;̤";
//gir['ù'] = "110;̖";
//gir['û'] = "110;̬";
function rotar(){
var txtARot = document.getElementById("aRotar").value.toLowerCase();
var tot = txtARot.length;
var rotad = "";
for(c=tot-1; c>=0; --c){
var letra = txtARot.charAt(c);
if(gir[letra]) rotad += "&#" + gir[letra] + ";";
else alert("El caracter \"" + letra + "\" no es valido.")
}
document.getElementById("muestra").innerHTML = document.getElementById("rotados").value = rotad;
}
</script>
<style type="text/css">
body {color:#ffffff; background-color:#000000;}
input , p {width:90%; font-family:"Arial Unicode MS", "Lucida Sans Unicode", Batang; text-transform:lowercase;}
#muestra {font-size: 125%; background-color:#333333; text-align:right;}
</style>
</head>
<body>
<h2>Muestra texto rotado 180° y su código.</h2>
A rotar <br><input type=text id=aRotar onkeyup="rotar()"> <br>
Código <br><input type=text id=rotados readonly=readonly> <br>
Muestra
<p id=muestra></p>
</body>
</html>
Van a notar que todos los caracteres se convierten a código, incluyendo a los que no hace falta (como la "o" ó la "b", que es una "q" al revés). Es nada más que para complicarle la vida al que mire nuestro código fuente  .Si se les ocurren más caracteres los agregamos. Y por supuesto, si el navegador no reconoce unicode, o el sistema operativo no tiene instalada ninguna fuente que contenga todos estos caracteres, no se van a ver.  |
|
|
|
Mode Lineal
