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:
<!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;&&35;791";
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>
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.
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.
