Text auf dem Kopf

So funktioniert das Script

Das Script besteht aus drei Teilen: einer Tabelle mit den umgedrehten Zeichen, einer kleinen Schleife, die diese Tabelle in beide Richtungen nutzbar macht, und der Funktion flipString(), die den Text rückwärts durchläuft und dabei jedes Zeichen austauscht.

const flipTable = {
  a: "\u0250",
  b: "q",
  c: "\u0254",
  d: "p",
  …
};

Das geschweifte Klammernpaar erzeugt ein Objekt — eine Sammlung von Paaren aus Name und Wert, die man sich wie ein Wörterbuch vorstellen kann. Links steht der normale Buchstabe, rechts sein gestürztes Gegenstück. Bei manchen ist das ein ganz gewöhnlicher Buchstabe: Ein b auf dem Kopf ist ein q, ein d wird zum p. Für den Rest gibt es kein Tastaturzeichen, deshalb stehen dort Schreibweisen wie "\u0250". Das ist die Nummer des Zeichens im Unicode-Zeichensatz — ɐ ist das umgedrehte a. So lassen sich auch Zeichen notieren, die man nicht eintippen kann.

Object.keys(flipTable).forEach(function (zeichen) {
  flipTable[flipTable[zeichen]] = zeichen;
});

Diese drei Zeilen sparen die halbe Tabelle. Object.keys() liefert eine Liste aller Namen im Objekt, forEach() geht sie einzeln durch. Für jeden Buchstaben wird sein gedrehtes Gegenstück nachgeschlagen und als neuer Eintrag mit vertauschten Rollen ergänzt: Aus dem Eintrag a → ɐ entsteht zusätzlich ɐ → a. Praktisch ist das, weil ein bereits gedrehter Text so weitgehend wieder zurückgedreht wird — kopiert einmal das Ergebnis zurück ins obere Feld und probiert es aus.

Eine kleine Kuriosität steckt noch im Original: Der Buchstabe r steht zweimal in der Tabelle, einmal ganz oben und einmal in der letzten Zeile. In einem Objekt darf jeder Name nur einmal vorkommen — gibt man ihn doppelt an, gewinnt der letzte Eintrag. Deshalb wird aus dem r ein n, und zusammen mit der Gegenrichtungs-Schleife vertreten sich r, n und u reihum. Beim Zurückdrehen kommen deshalb genau diese drei Buchstaben durcheinander — alle anderen finden zurück in ihre ursprüngliche Form.

for (let i = letztes; i >= 0; i--) {
  const zeichen = text.charAt(i);
  const gedreht = flipTable[zeichen];
  ergebnis[letztes - i] = gedreht !== undefined ? gedreht : zeichen;
}

Hier passiert die eigentliche Arbeit. Die Schleife zählt rückwärts: Sie beginnt beim letzten Zeichen und läuft bis zum ersten. Damit ist die Umkehrung des Textes schon erledigt — das letzte Zeichen landet an Position 0 der Ergebnisliste, das vorletzte an Position 1 und so weiter. flipTable[zeichen] schlägt das gedrehte Gegenstück nach. Steht dazu nichts in der Tabelle, liefert JavaScript den Wert undefined, und der Vergleich gedreht !== undefined sorgt dafür, dass in diesem Fall das ursprüngliche Zeichen übernommen wird. Am Ende macht join("") aus der Liste wieder eine einzige Zeichenkette.

function flip() {
  gedreht.value = flipString(original.value.toLowerCase());
}

original.addEventListener("input", flip);

flip() verbindet Formular und Funktion: Es holt den Inhalt des oberen Feldes, schreibt ihn mit toLowerCase() klein — die Tabelle kennt nur Kleinbuchstaben — und legt das Ergebnis ins untere Feld. Das input-Ereignis löst bei jeder Änderung aus, also bei jedem Tastendruck und auch beim Einfügen mit der Maus. Deshalb wandert der Text schon beim Tippen mit.

Zum Anpassen: Die Tabelle lässt sich beliebig erweitern. Für das l steht im Original eine auskommentierte Zeile — nehmt die beiden Schrägstriche davor weg, und schon wird auch das l gedreht. Ebenso könnt ihr Umlaute oder Ziffern ergänzen, etwa "6": "9". Und wer eine Version ohne Umkehrung möchte, ersetzt die rückwärts laufende Schleife durch eine vorwärts laufende — dann steht jeder Buchstabe kopfüber, aber der Satz bleibt in seiner Reihenfolge.