Warum sind ASCII-Grafiken falsch ausgerichtet?

ASCII-Grafiken verrutschen meist, weil das Zielprogramm eine proportionale Schrift verwendet, mehrere Leerzeichen zusammenfasst, Tabulatoren anders darstellt oder zu lange Zeilen umbricht. Prüfen Sie zuerst den Darstellungsbereich: Setzen Sie die Grafik in einen mit Begrenzungszeichen markierten Codeblock oder ein pre-Element, wählen Sie eine Monospace-Schrift und ersetzen Sie Tabulatoren durch Leerzeichen. Jede Zeile muss in den schmalsten vorgesehenen Darstellungsbereich passen. Der ASCII-Art-Generator von ClockTools zeigt Spalten-, Zeilen-, Zeichen- und Bytezahlen live an. So können Sie die tatsächliche Ausgabe vor dem Einfügen prüfen.

Welche vier Prüfungen finden die meisten Ausrichtungsfehler?

Verwenden Sie diese Reihenfolge, da jeder Schritt eine ganze Fehlerklasse ausschließt:

1. Schriftart: Bestätigen Sie, dass das Ziel die Grafik in einer Monospace-Schriftart rendert.
2. Leerzeichen: Stellen Sie sicher, dass wiederholte Leerzeichen und Zeilenumbrüche erhalten bleiben.
3. Breite: ermitteln Sie die längste Zeile und vergleichen Sie sie mit dem schmalsten Darstellungsbereich.
4. Zeichen: Suchen Sie nach Tabulatoren, breiten Unicode-Symbolen, Emojis oder Ersatzzeichen, die möglicherweise unerwartete Zellen belegen.

Beginnen Sie nicht damit, einzelne Buchstaben neu zu zeichnen. Wenn jede Zeile nach demselben Punkt driftet, ist die Struktur wahrscheinlich intakt und der Renderer ändert den Abstand.

Warum stört eine proportionale Schriftart das Bild?

ASCII-Grafiken ordnen Zeichen wie Kacheln in einem Raster an. Leerzeichen, Unterstrich, Schrägstrich und ein großes W müssen jeweils dieselbe Zeichenbreite einnehmen, damit senkrechte Linien ausgerichtet bleiben. Eine proportionale Schrift gibt diesen Zeichen unterschiedliche Breiten. Eine Zeile mit schmalen Buchstaben ist dadurch kürzer als eine Zeile mit breiten Buchstaben.

Die generische CSS-Schriftfamilie monospace fordert eine Schrift mit gleicher Zeichenbreite an. Der W3C-Schriftartenleitfaden führt monospace als generische Familie auf; die Definition in CSS 2 beschreibt sie anhand ihrer festen Glyphenbreite.

Wenn Sie die Seite steuern, verwenden Sie ein vorformatiertes Element und einen Monospace-Stack:

<pre class="ascii-art">YOUR ART HERE</pre>

.ascii-art {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  white-space: pre;
  overflow-x: auto;
}

So bleibt die Zeichnung ohne erzwungene Zeilenumbrüche erhalten. Horizontales Scrollen ist oft weniger problematisch als ein zerstörter rechter Rand.

Wie verändern Leerzeichen, Tabulatoren und Umbrüche die Zeilen?

Normales HTML fasst Leerzeichenfolgen zusammen und behandelt Zeilenumbrüche als gewöhnlichen Leerraum. Die CSS-white-space-Eigenschaft steuert Leerzeichen, Zeilenwechsel und automatische Umbrüche. pre bewahrt alle drei Strukturelemente gewöhnlicher ASCII-Grafiken: wiederholte Leerzeichen, ausdrückliche Zeilen und keinen automatischen Umbruch.

Tabs sind keine stabilen Ausrichtungseinheiten. Ein Editor kann vier Spalten verwenden, ein anderer acht, und eine Webkomponente kann eine benutzerdefinierte Tabulatorgröße anwenden. Ersetzen Sie vor der Verteilung jedes Tab durch die vorgesehene Anzahl an Leerzeichen.

Auch nachgestellte Leerzeichen sind anfällig. Manche Editoren entfernen sie beim Speichern; Prüftools können sie verbergen. Bevorzugen Sie eine Gestaltung, deren relevanter rechter Rand nicht von unsichtbaren Leerzeichen am Ende abhängt. Führende und innere Leerzeichen bleiben in einem vorformatierten Container leichter erhalten.

Was hat sich bei einem kontrollierten ClockTools-Test geändert?

Bei einem Live-Test am 2026-09-01 wurde ALIGN in der FIGlet-Schrift Standard eingegeben. Mit linksbündiger Ausrichtung meldete der Generator 31 Spalten, 6 Zeilen, 159 Zeichen und 159 Bytes. Die sichtbare Ausgabe lautete:

     _    _     ___ ____ _   _
    / \  | |   |_ _/ ___| \ | |
   / _ \ | |    | | |  _|  \| |
  / ___ \| |___ | | |_| | |\  |
 /_/   \_\_____|___\____|_| \_|

Bei einem Zielwert von 40 Spalten und zentrierter Ausrichtung wurden führende Leerzeichen Teil des Textes. Die Ausgabe wuchs auf 65 Spalten und 380 Zeichen, obwohl die Buchstabenformen unverändert blieben. Entscheidend ist: Die Ausrichtung kann zusätzliche Leerzeichen erzeugen. Ein Banner, das in der Vorschau mittig steht, kann deshalb für seinen späteren Darstellungsbereich zu breit sein.

Das Tool trennt außerdem die Vorschaufarbe vom Rohtext und bietet textorientierte TXT-, Markdown-, ANSI- und HTML-Exporte sowie PNG. Durch diese Trennung wird verhindert, dass eine dekorative Vorschaueinstellung die von Ihnen kopierten Zeichen stillschweigend ändert.

Wie sollten Sie ASCII-Grafiken in Markdown oder HTML einfügen?

Setzen Sie den Text auf GitHub in einen mit Begrenzungszeichen markierten Codeblock. Die GitHub-Dokumentation zeigt dafür drei Backticks und empfiehlt Leerzeilen vor und nach dem Block. Ergänzen Sie die Kennzeichnung text, wenn keine Syntaxhervorhebung für eine Programmiersprache die Satzzeichen einfärben soll.

```text
YOUR ASCII ART
```

Behalten Sie für eine README-Datei den Projektnamen als normale Überschrift vor der Grafik bei. Bildschirmlesegeräte können jedes Satzzeichen ankündigen, und ein dekoratives Banner sollte nicht die einzige Stelle sein, an der wichtige Formulierungen erscheinen.

Verwenden Sie in HTML pre statt einer Folge geschützter Leerzeichen. Prüfen Sie die schmale Ansicht. Mit dem Echtzeit-HTML-Editor können Sie white-space: pre, pre-wrap und normalen Textfluss vergleichen, ohne eine Produktionsseite zu bearbeiten.

Wann verursachen Unicode-Zeichen ein Breitenproblem?

Reine ASCII-Zeichen sind schmal. Viele moderne „ASCII-Art“-Grafiken verwenden jedoch auch Rahmenzeichen, Schattierungsblöcke, Emojis und andere Unicode-Symbole. Der Unicode-Bericht East Asian Width erklärt, warum Zeichen je nach Darstellung schmal oder breit sein können und wie die Umgebung Zeichen mit uneindeutiger Breite beeinflusst.

Schriftersatz ist eine weitere Einflussgröße. Fehlt der gewählten Monospace-Schrift ein Symbol, kann der Browser es aus einer Schrift mit anderen Metriken übernehmen. Testen Sie im selben Terminal, derselben Chat-App oder demselben Browser, in dem die Grafik später angezeigt wird.

Für größtmögliche Kompatibilität wählen Sie eine einfache ASCII-Zeichenfolge wie @%#*+=-:. und verzichten Sie auf Emojis. Verwenden Sie Unicode-Blöcke nur, wenn Sie wissen, dass das Zielprogramm sie einheitlich darstellt.

Welchen Export sollten Sie verwenden, wenn der Text nicht ausgerichtet bleiben kann?

Wählen Sie das Format für das Ziel, nicht für die Generatorvorschau:

Fügen Sie vor dem Export den Rohtext in das Tool Online-Notizblock ein, um versehentliche Tabulatoren zu finden. Vergleichen Sie außerdem die Vorher- und Nachher-Version mit dem Text-Diff-Checker. Der Vergleich auf Zeichenebene deckt ein gelöschtes Leerzeichen auf, das bei einem visuellen Scan möglicherweise übersehen wird.

Wenn das Zielprogramm keine Monospace-Schrift unterstützt, Codebegrenzungen entfernt oder lange Zeilen umbricht, ist es keine verlässliche Umgebung für Zeichengrafiken. Exportieren Sie stattdessen eine PNG-Datei und ergänzen Sie eine normale Textbeschreibung für die Barrierefreiheit. Bewahren Sie den ursprünglichen Text separat auf, damit Sie ihn später weiterbearbeiten können.