Rotando letras con Javascript

Por el 30 de Marzo de 2008

en: Sin categoría

Un curioso y divertido truco para rotar letras visto en este foro, se trata de una función Javascript que sustituye las letras dadas por los caracteres que más se le parecen al rotar las letras del texto 180º.

Girar Texto

Tras esta breve presentación de Unicode pasemos a ver el truco Javascript para rotar las letras de un texto. Para probarlo introduce una cadena de texto en el campo "Original" y pulsa el botón "Girar Texto".

Original:


Texto rotado180º:

En la gran mayoria de los caracteres se utilizan caracteres unicode pero tambien hay algunos caso en los que para representar una letra del alfabeto invertida se utiliza otra letra del alfabeto para representarla:

b -> q
d -> p
g -> b
l -> 1
n -> u
o -> o
p -> d
s -> s
q -> b
x -> x
z -> z

¿Qué es Unicode?

Pero te puedes seguir preguntando ¿Qué es Unicode?...

Unicode proporciona un número único para cada carácter (Sólo un número),sin importar el programa ó el idioma y plataforma que lo utilize.

Es compatible con la gran mayoría de sistemas operativos y con todos los navegadores actuales.

Por lo tanto y resumiendo es una manera de representar caracteres de tal forma que podemos tener en un mismo texto el número de lenguas que queramos al mismo tiempo (chino, español, japonés, ruso, sueco, etc...).

¿Cómo se asocian caracteres y números en Unicode?
Cada caracter tiene un número asociado : U+xxxx, la U es Unicode y las xxxx son un número hexadecimal.

Ejemplo

Caracter Unicode
A U+0041
a U+0061
ß U+00DF

Veamos que podemos hacer con unos caracteres de UNICODE un tanto especiales los elementos de bloque, este es un archivo pdf con todos los elementos de bloque soportados por los navegadores | Block Elements - Test for Unicode support in Web browsers:

█ █ █▀█ █   █▀█ █ ▀
█▀█ █▄█ █▄▄ █▀█ ▄ █

Si al copiar este código se te deforma es por el tipo de fuente utilizada, la fuente adecuada para mostrar este ejemplo es Courier New

Unicode | Wikipedia

Código fuente para rotar letras Javascript



  <script language="JavaScript">
  function rotar() {
  var result = cadena_rotar(document.f.original.value);
  document.f.rotado.value = result;
  }

function cadena_rotar(aString) {
  aString = aString.toLowerCase();
  var last = aString.length - 1;
  var result = "";
  for (var i = last; i >= 0; --i) {
  result += rotar_caracter(aString.charAt(i))
  }
  return result;
  }

function rotar_caracter(c) {
  if (c == 'a') {
  return '\u0250'
  }
  else if (c == 'b') {
  return 'q'
  }
  else if (c == 'c') {
  return '\u0254' 
  }
  else if (c == 'd') {
  return 'p'
  }
  else if (c == 'e') {
  return '\u01DD'
  }
  else if (c == 'f') {
  return '\u025F' 
  }
  else if (c == 'g') {
  return 'b'
  }
  else if (c == 'h') {
  return '\u0265'
  }
  else if (c == 'i') {
  return '\u0131'//'\u0131\u0323'
  }
  else if (c == 'j') {
  return '\u0638'
  }
  else if (c == 'k') {
  return '\u029E'
  }
  else if (c == 'l') {
  return '1'
  }
  else if (c == 'm') {
  return '\u026F'
  }
  else if (c == 'n') {
  return 'u'
  }
  else if (c == 'o') {
  return 'o'
  }
  else if (c == 'p') {
  return 'd'
  }
  else if (c == 'q') {
  return 'b'
  }
  else if (c == 'r') {
  return '\u0279'
  }
  else if (c == 's') {
  return 's'
  }
  else if (c == 't') {
  return '\u0287'
  }
  else if (c == 'u') {
  return 'n'
  }
  else if (c == 'v') {
  return '\u028C'
  }
  else if (c == 'w') {
  return '\u028D'
  }
  else if (c == 'x') {
  return 'x'
  }
  else if (c == 'y') {
  return '\u028E'
  }
  else if (c == 'z') {
  return 'z'
  }
  else if (c == '[') {
  return ']'
  }
  else if (c == ']') {
  return '['
  }
  else if (c == '(') {
  return ')'
  }
  else if (c == ')') {
  return '('
  }
  else if (c == '{') {
  return '}'
  }
  else if (c == '}') {
  return '{'
  }
  else if (c == '?') {
  return '\u00BF' 
  }
  else if (c == '\u00BF') {
  return '?'
  }
  else if (c == '!') {
  return '\u00A1'
  }
  else if (c == "\'") {
  return ','
  }
  else if (c == ',') {
  return "\'"
  }
  return c;
  }
  </script>
  • Entradas relacionadas:
  • No hay coincidencias

1 Respuesta a Rotando letras con Javascript

Avatar

Anónimo

31 de Marzo de 2008 a las 3:14 am

Esta interesante el articulo pero duele ver el language="JavaScript" en vez type="text/javascript" y los tropecientos else if ahi juntitos xD

Un saludo

Avatar

Anónimo

17 de Mayo de 2008 a las 11:55 am

nos os podéis imaginar lo que ligo girando letras en los chats …..gracias

Avatar

jrosell

11 de Diciembre de 2008 a las 9:12 am

es posible hacer lo mismo sin javascript. O sea escribir las letras directamente…

Avatar

www.Gb3rt.hypeforum.net

7 de Julio de 2008 a las 7:16 pm

hola amigos civerneticos los quiero invitar a mi nueva comunidad en la red se llama http://WWW.Gb3rt.hyperforum.net espero que entren y se registren y sean parte de esta gran comunidad!! los espero no me fallen

Avatar

Anónimo

23 de Junio de 2008 a las 4:56 pm

jejeje, muy bueno, gracias por el aporte.

Avatar

Anónimo

23 de Junio de 2008 a las 4:58 pm

jaja, que bueno xD.

Avatar

Anónimo

6 de Mayo de 2009 a las 4:10 am

por el amor de dios utiliza un switch y no if’s

Dejar un comentario