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

atenas García

29 de agosto de 2011 a las 5:44 am

hay perdon esque no puedo voltear las letras de cabeza me podrian mandar ( fαiry lOνe чOυ ) de cabeza por favor n_____________n

Dejar un comentario