JavaScripts › Verschiedenes

Zeichentabelle

Zeigt mehrere tausend druckbare Zeichen aus verschiedenen Schriftsystemen in einer Tabelle — mit Unicode-Nummer als Tooltip.

Dieses Script baut eine Tabelle mit mehreren tausend Zeichen auf: von den vertrauten Buchstaben, Ziffern und Satzzeichen über die europäischen Umlaute und Akzente bis zu Griechisch, Kyrillisch, Hebräisch, Arabisch, Devanagari, Tamil, Thai und Georgisch. Ihr könnt euch daraus jedes Zeichen mit der Maus markieren und in eigene Texte kopieren.

Es sind bewusst nicht alle Zeichen enthalten. Viele Bereiche der Zeichentabelle bestehen aus Steuerzeichen, die man nicht sehen kann, und aus Lücken, die gar nicht belegt sind. Das Script beschränkt sich deshalb auf sieben Abschnitte, in denen überwiegend druckbare Zeichen liegen. Je nach Rechner und installierten Schriften dauert der Aufbau einen Augenblick — und einzelne Zeichen erscheinen als leeres Kästchen, wenn eurem System die passende Schriftart dafür fehlt.

Fahrt ihr mit der Maus über ein Zeichen, zeigt euch ein kleiner Hinweis seine Unicode-Nummer, etwa U+00E9 · 233. Unicode ist das Verzeichnis, in dem jedes Schriftzeichen der Welt eine feste Nummer bekommt — genau diese Nummer braucht ihr, wenn ihr ein Zeichen im HTML-Quelltext als é schreiben wollt, statt es einzufügen.

Wenn ihr Anzahl und Bereich der Zeichen selbst festlegen möchtet, schaut auf unser Script Zeichentabelle generieren. Wer umgekehrt Zahlen zwischen Zahlensystemen umrechnen will, findet das bei Zahlen übersetzen.

Verschiedenes Baujahr 2007 läuft in deinem Browser

Markiert ein Zeichen mit der Maus und kopiert es mit Strg + C. Der Tooltip nennt die Unicode-Nummer.

So funktioniert das Script

Das Script hat drei Aufgaben: Es sammelt die gewünschten Zeichennummern ein, verwandelt jede Nummer in das zugehörige Zeichen und setzt daraus Zeile für Zeile eine Tabelle zusammen. Alles steckt in einer sofort ausgeführten Funktion, damit die Namen nicht mit anderen Scripts der Seite kollidieren.

const BEREICHE = [
  [33, 127],
  [161, 1992],
  [2305, 2816]
];

Hier stehen die Abschnitte, die gezeigt werden sollen — jeweils als Paar aus erster und letzter Nummer. Jedes Schriftzeichen hat im Unicode-Verzeichnis eine feste Nummer: 33 ist das Ausrufezeichen, 65 das große A, 233 das é, 945 das griechische Alpha. Die Bereiche unter 33 fehlen mit Absicht, dort liegen unsichtbare Steuerzeichen. Wollt ihr andere Abschnitte zeigen, ändert ihr genau diese Liste — mehr ist nicht nötig.

for (let b = 0; b < BEREICHE.length; b++) {
  for (let code = BEREICHE[b][0]; code <= BEREICHE[b][1]; code++) {
    codes.push(code);
  }
}

Zwei ineinander verschachtelte Schleifen: Die äußere geht die Bereiche durch, die innere zählt innerhalb eines Bereichs von der ersten bis zur letzten Nummer. Jede Nummer wird mit push() hinten an die Liste codes angehängt. Am Ende steht dort eine lange Reihe von mehreren tausend Zahlen — die Reihenfolge der späteren Tabellenzellen.

html += '<td title="' + unicodeName(codes[i]) + '">' +
  schuetzen(String.fromCharCode(codes[i])) + "</td>";

String.fromCharCode() ist die eigentliche Übersetzung: Sie macht aus der Nummer 233 das Zeichen é. Die Funktion schuetzen() davor ist wichtiger, als sie aussieht — drei der Zeichen im Bereich 33 bis 127 sind nämlich &, < und >, also genau die Zeichen, mit denen HTML seine eigenen Tags schreibt. Ungeschützt eingesetzt würden sie den Rest der Tabelle zerlegen. schuetzen() ersetzt sie deshalb durch ihre Ersatzschreibweisen &amp;, &lt; und &gt;, die der Browser wieder als normales Zeichen anzeigt.

if (i % SPALTEN === 0) { html += "<tr>"; }
…
if (i % SPALTEN === SPALTEN - 1) { html += "</tr>"; }

So entstehen die Zeilen. Das Prozentzeichen % bedeutet in JavaScript nicht Prozentrechnung, sondern „Rest der Division“: i % 16 ergibt für die Zellen 0, 16, 32 … jeweils 0 — dort beginnt eine neue Tabellenzeile — und für die Zellen 15, 31, 47 … jeweils 15, dort wird sie geschlossen. Wollt ihr die Tabelle schmaler oder breiter, ändert ihr nur den Wert von SPALTEN.

document.getElementById("zt-tabelle").innerHTML = html;

Erst ganz zum Schluss wandert die fertige Textkette in einem Rutsch in die Seite. Mehrere tausend Zellen einzeln ins Dokument zu schreiben wäre spürbar langsamer — und das document.write des Originals würde auf einer fertig geladenen Seite sogar deren gesamten Inhalt überschreiben.

Zum Anpassen: Über die Liste BEREICHE stellt ihr ein, welche Schriftsysteme erscheinen — beispielsweise zeigt [913, 1023] nur das griechische Alphabet, [1024, 1279] nur das kyrillische. Der Tooltip lässt sich in unicodeName() umformulieren, etwa wenn ihr statt U+00E9 lieber gleich die HTML-Schreibweise &#233; anzeigen wollt.

Script für die eigene Homepage

Kopiert euch den kompletten Code und fügt ihn an der Stelle eurer Seite ein, an der das Script erscheinen soll. Er läuft ohne weitere Dateien und ohne fremde Server.

Mehr aus der Kategorie Verschiedenes