Misaligned ASCII art: diagnose and fix it
Check in this order: monospace font, preserved spaces, tabs, available width, then Unicode characters. Randomly changing spaces can hide the cause and break the drawing in another app.
Analyse the text
Check a misaligned design
Local analysis: your text stays in your browser. Unicode width counts code points, not actual display columns.
Identify the cause
| Symptom | Test | Fix |
|---|---|---|
| Colonnes irrégulières / uneven columns | iiii / WWWW | Monospace |
| Décalage après tabulation / shift after tab | HT / U+0009 | Espaces / spaces |
| Fin de ligne rabattue / wrapped end | Largeur / width | Motif plus court / shorter design |
| Un symbole décale la suite / one symbol shifts the rest | Unicode | ASCII ou contrôle visuel / visual check |
Change one parameter at a time. Keep a copy of the original text and compare the same excerpt before and after. If the drawing works in the preview but not at its destination, destination rendering may be the issue even when the file is unchanged.
Example 1: a tab is not always four spaces
A B AAAA B
The text above contains two actual tabs. With four-column tab stops, B starts in columns 5 and 9 (counting from 1). Replacing each tab with exactly four spaces would give columns 6 and 9: that is not the same transformation. The diagnostic uses four-column stops; your editor may use eight.
Example 2: font and width
|iiii| |WWWW|
Each line contains six ASCII characters. In a proportional font they need not have equal width. With a monospace font, their bars should align. Next, try a 40-character line in a 30-column area: even the correct font cannot create missing space; shorten the design or allow scrolling.
On a web page
pre.ascii {
font-family: monospace;
white-space: pre;
overflow-x: auto;
}The monospace generic family selects fixed-width type. white-space: pre preserves spaces and prevents automatic line wrapping. Scrolling keeps the block inside its area. Add a text description for a meaningful drawing; a screen reader may not reconstruct the image from punctuation.
Final check
Check the actual paste on phone and desktop. The diagnostic does not measure your messaging app’s glyphs or guarantee emoji width. Follow the dedicated instructions for Discord / GitHub.