Écrire du texte à l'envers

Vous vous souvenez du poisson d'avril de YouTube, où tout le texte et le contenu étaient affichés à l'envers ? Si vous ne l'avez pas vu, il est toujours actif à ce jour, il suffit d'ajouter à la fin de l'URL "&flip=1" pour voir n'importe quelle page inversée (texte, vidéo, etc). Voyez un exemple avec RickRoll (Rick Astley).

Suivant les exemples disponibles de différentes implémentations, une table associative de conversion de caractères Unicode est utilisée pour obtenir chaque caractère correspondant ('\u0250' équivaut à la lettre "a"). La plupart du temps, un caractère semblable est utilisé en raison de la similitude de sa forme et non de sa valeur. Aussi, les nombres sont plutôt difficiles à faire correspondre à un symbole. Seul le 6 pourrait être convertit en 9 et vice versa dans cet effet miroir (0, 1 et 8 demeureraient inchangés). Dans cet exemple, on n'en tient pas compte.

Créez d'abord un formulaire avec deux champs textarea et un bouton:

<form id="myform">
  <div>
      <label for="txtOriginal">Texte original</label><br />
      <textarea id="txtOriginal"></textarea>
  </div>

  <div>
      <label for="txtResult">Résultat</label><br />
      <textarea id="txtResult"></textarea>
  </div>

  <button type="button" id="flip">Inverser le texte</button>
</form>

Assurez-vous d'avoir une entête meta UTF-8 dans la balise HEAD :

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Attachez la librairie jQuery (elle est optionnelle mais je l'utilise dans le code) :

<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>

Définissez la table des caractères en JavaScript. Pour une question de lisibilité, chaque association est représentée sur une ligne. Les symboles commençant par \u correspondent aux symboles équivalents inversés en Unicode.

var characters = {
  a : '\u0250',
  b : 'q',
  c : '\u0254',
  d : 'p',
  e : '\u01DD',
  f : '\u025F',
  g : '\u0183',
  h : '\u0265',
  i : '\u0131',
  j : '\u027E',
  k : '\u029E',
  m : '\u026F',
  n : 'u',
  r : '\u0279',
  t : '\u0287',
  v : '\u028C',
  w : '\u028D',
  y : '\u028E',
  '.' : '\u02D9',
  '[' : ']',
  '(' : ')',
  '{' : '}',
  '?' : '\u00BF',
  '!' : '\u00A1',
  "\'" : ',',
  '<' : '>',
  '_' : '\u203E',
  '\\' : '/',
  ';' : '\u061B',
  '\u203F' : '\u2040',
  '\u2045' : '\u2046',
  '\u2234' : '\u2235'
}

Créez la fonction qui procédera à la conversion du texte à l'envers :

function flipString(aString) {
  var last = aString.length - 1;
  var result = new Array(aString.length);
  var i, c, r;

  for (i = last; i >= 0; --i) {
      c = aString.charAt(i);
      r = characters[c];
      result[last - i] = r != undefined ? r : c;
  }
  return result.join('');
}

Et finalement, attachez la fonction à l'événement click() du bouton à l'aide de jQuery :

function initialize() {
  $('#flip').click(
      function() {
          var text = flipString($('#txtOriginal').val().toLowerCase());
          $('#txtResult').attr('value', text);
      }     
  );
}

$(document).ready( initialize );

J'ai aussi trouvé un site qui permet d'inverser le contenu de n'importe quelle page (complète), flip.sytes.org, mais il n'a pas été en mesure de restaurer en version originale RickRoll ;-)

Source : je dois mentionner que je ne suis pas l'auteur original de la totalité du JavaScript. J'ai récupéré certaines portions à gauche et à droite dans différents exemples, corrigé une ou deux erreurs, simplifié le code et je l'ai adapté à jQuery. À vrai dire, j'aurais aimé pouvoir donner le crédit, mais l'auteur semble plutôt difficile à identifier, le même exemple se retrouvant un peu partout sur le Web.