JavaScripts › Texteffekte

Brailleschrift

Übersetzt eingetippten Text in das Punktmuster der Brailleschrift — als Punktbild zum Ansehen und als fertigen HTML-Schnipsel.

Dieses Script von unserem User Vollautomatisch übersetzt normalen Text in die Brailleschrift — jene Punktschrift, mit der blinde und sehbehinderte Menschen lesen. Weil sich Punkte schlecht in eine Textzeile schreiben lassen, malt das Script sie mit zwei gewöhnlichen Zeichen nach: o steht für einen erhabenen, fühlbaren Punkt, . für eine leere Stelle.

Tippt oben einen Text ein und klickt auf „Übersetzen“. Darunter erscheint das Punktbild in drei Zeilen — jeder Buchstabe belegt zwei Spalten nebeneinander. Im letzten Feld liegt dieselbe Ausgabe noch einmal als fertiger HTML-Schnipsel, eingepackt in ein <pre>-Element; den könnt ihr direkt in eine eigene Seite kopieren, dort bleibt die Ausrichtung der Punkte erhalten. „Felder leeren“ setzt alles zurück. Vorbelegt ist „Schule 24“ — daran seht ihr gleich zwei Besonderheiten, die gleich erklärt werden.

Ein Braille-Zeichen besteht aus sechs Punkten, angeordnet wie die Sechs auf einem Würfel: zwei Spalten mit je drei Punkten. Damit sind 64 Kombinationen möglich. Louis Braille, selbst seit einem Unfall in der Kindheit blind, hat das System in den 1820er-Jahren in Frankreich entwickelt; es ist bis heute weltweit in Gebrauch. Die deutsche Vollschrift kürzt häufige Buchstabenpaare zu je einem Zeichen ab — au, äu, eu, ei, ie, ch, sch und st. Genau deshalb wird aus „Schule“ hier kein s-c-h, sondern ein einziges Zeichen für „sch“.

Zahlen haben in der Brailleschrift keine eigenen Zeichen. Stattdessen steht vor ihnen das Zahlzeichen (die Punkte 3, 4, 5 und 6), danach bedeuten die Buchstaben a bis i die Ziffern 1 bis 9 und j die 0. Aus der 24 werden im Punktbild also vier Zeichen: Zahlzeichen, b, Zahlzeichen, d.

Ehrlich bleiben sollte man beim Einsatzzweck: Ein Punktbild aus o und . ist eine Spielerei und keine Hilfe für blinde Besucher — die lesen eure Seite mit einem Screenreader oder einer Braillezeile vor, und dafür braucht es kein Braille-Bild, sondern sauberes HTML mit Überschriften und Alternativtexten. Als Anschauungsmaterial, für ein Referat oder eine Schulseite ist das Script dagegen genau richtig. Wer Lust auf ein weiteres Zeichensystem hat: Der Morsecode liegt im selben Fach.

Texteffekte Baujahr 2007 läuft in deinem Browser

Die Ausgabefelder brechen die Zeilen nicht um, damit das Punktbild zusammenbleibt — bei langen Texten wird darin waagerecht gescrollt.

Eingesandt von Vollautomatisch

So funktioniert das Script

Das Script arbeitet in vier Etappen: Es fasst zuerst die Buchstabenpaare der Vollschrift zusammen, schlägt dann für jedes Zeichen das Punktmuster nach, malt aus diesen Mustern drei Textzeilen und schreibt sie in die beiden Ausgabefelder. Der ganze Code steckt in einer sofort ausgeführten Funktion, damit die Tabellen keine Namen auf der Seite belegen.

const alphabet = "abcdefghijklmnopqrstuvwxyz!?.:,;()-#~{}§$%&/=*+ ";
const buchstaben = [
  "100000", "110000", "100100", …
];

Das ist das Herz des Scripts: zwei Listen, die an derselben Stelle zusammengehören. Steht ein Zeichen an Position 0 im alphabet (das a), dann gehört ihm das Muster an Position 0 in buchstaben — "100000". Die sechs Ziffern beschreiben die sechs Punkte: die ersten drei die linke Spalte (Punkte 1 bis 3), die letzten drei die rechte Spalte (Punkte 4 bis 6). Eine 1 heißt „Punkt gesetzt“, eine 0 heißt „leer“. Beim a ist also nur der oberste linke Punkt fühlbar.

Die krummen Zeichen im Alphabet sind Platzhalter: Weil „sch“ in der Brailleschrift ein einziges Zeichen ist, im JavaScript-String aber drei Stellen belegen würde, steht dafür stellvertretend ein +. Genauso vertritt * das „ch“, ~ das „st“ und % das „ä“.

text = text.replaceAll("sch", "+");
text = text.replaceAll("ch", "*");
text = text.replaceAll("st", "~");

replaceAll() ersetzt jedes Vorkommen einer Zeichenfolge im Text. Auf die Reihenfolge kommt es an: „sch“ muss vor „ch“ drankommen, sonst würde aus „Schule“ erst „S*ule“ und die Kürzung für „sch“ käme nie zum Zug. Aus demselben Grund steht „äu“ vor „ä“.

const buchstabe = text.charAt(i);
const istZiffer = buchstabe >= "0" && buchstabe <= "9";

if (alphabet.indexOf(buchstabe) < 0 && !istZiffer) {
  continue;
}

Die Schleife geht den Text Zeichen für Zeichen durch. charAt(i) holt das Zeichen an Position i. Ob es eine Ziffer ist, verrät ein Vergleich: Zeichen werden alphabetisch verglichen, und alles zwischen "0" und "9" ist eine Ziffer. Kennt das Script ein Zeichen weder als Buchstaben noch als Ziffer, springt continue sofort zum nächsten Schleifendurchlauf — das Zeichen fällt einfach weg.

ausgabe[nummer] = buchstaben[buchstaben.length - 1];
nummer++;
if (buchstabe === "0") {
  ausgabe[nummer] = "010110";
} else {
  ausgabe[nummer] = buchstaben[Number(buchstabe) - 1];
}

So entsteht eine Zahl. Zuerst wird das Zahlzeichen angehängt — es ist der letzte Eintrag der Tabelle, deshalb buchstaben.length - 1. Danach folgt die Ziffer als Buchstabe: Number("2") - 1 ergibt 1, und an Position 1 steht das b. Die 0 ist der Sonderfall, sie wird als j geschrieben, dessen Muster hier direkt eingetragen ist.

const links = ausgabe[j].charAt(i);
const rechts = ausgabe[j].charAt(i + 3);
brailleCode += links === "0" ? brailleZeichenLeer : brailleZeichenVoll;
brailleCode += rechts === "0" ? brailleZeichenLeer : brailleZeichenVoll;

Jetzt wird gemalt. Weil Text zeilenweise geschrieben wird, ein Braille-Zeichen aber drei Zeilen hoch ist, laufen zwei Schleifen ineinander: die äußere über die drei Zeilen (i), die innere über alle Zeichen des Textes (j). In Zeile i braucht man vom Muster den linken Punkt an Stelle i und den rechten an Stelle i + 3. Das Fragezeichen dazwischen ist der bedingte Operator: Bedingung ? dann : sonst — eine Kurzform für ein kleines if, die direkt einen Wert liefert.

document.getElementById("br-html").value = "<pre>" + htmlCode + "</pre>";

Für die HTML-Version wird das Punktbild noch in ein <pre>-Element gelegt. Dieses Element zeigt Text in einer Monospace-Schrift an und behält Leerzeichen und Zeilenumbrüche bei — beides ist nötig, damit die Punktspalten sauber untereinander stehen. In einem normalen Absatz würde das Bild sofort zerfallen.

Zum Anpassen: Am meisten Wirkung haben die beiden Zeichen ganz oben. Setzt für brailleZeichenVoll etwa "●" und für brailleZeichenLeer ein "·" ein, dann sieht die Ausgabe deutlich mehr nach echter Punktschrift aus. Wer es noch eine Stufe echter mag: Für Braille gibt es in Unicode einen eigenen Zeichenblock (ab U+2800), in dem jede der 64 Punktkombinationen ein fertiges Schriftzeichen ist — daraus ließe sich das Punktbild statt aus o und . zusammensetzen.

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 Texteffekte