Dessin ASCII décalé : diagnostiquer et réparer
Vérifiez dans cet ordre : police monospace, conservation des espaces, tabulations, largeur disponible, puis caractères Unicode. Modifier les espaces au hasard peut masquer la cause et casser le dessin dans une autre application.
Analyser le texte
Diagnostiquer un dessin décalé
Analyse locale : le texte reste dans votre navigateur. La mesure Unicode compte les points de code, pas les colonnes réellement affichées.
Reconnaître la cause
| Symptôme | Test | Correction |
|---|---|---|
| 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 |
Ne changez qu’un paramètre à la fois. Gardez une copie du texte initial et comparez le même extrait avant et après. Si le dessin fonctionne dans l’aperçu mais pas dans la destination, le problème peut venir du rendu de cette destination, sans modification du fichier.
Exemple 1 : une tabulation ne vaut pas toujours quatre espaces
A B AAAA B
Le texte ci-dessus contient deux vraies tabulations. Avec des taquets de quatre colonnes, B commence aux colonnes 5 et 9 (numérotation à partir de 1). Remplacer chaque tabulation par exactement quatre espaces donnerait les colonnes 6 et 9 : ce n’est pas la même transformation. Le diagnostic utilise des taquets de quatre ; votre éditeur peut en utiliser huit.
Exemple 2 : police et largeur
|iiii| |WWWW|
Ces deux lignes comptent six caractères ASCII chacune. Dans une police proportionnelle, elles n’ont pas nécessairement la même largeur. Dans une police monospace, leurs barres doivent s’aligner. Ensuite, testez une ligne de 40 caractères dans une zone de 30 colonnes : même une bonne police ne peut pas empêcher le manque de place ; il faut réduire le motif ou permettre le défilement.
Sur une page web
pre.ascii {
font-family: monospace;
white-space: pre;
overflow-x: auto;
}La famille monospace impose une famille à chasse fixe. white-space: pre conserve les espaces et évite le repli automatique des lignes. Le défilement garde le bloc dans sa zone. Pour un dessin significatif, ajoutez une description textuelle ; un lecteur d’écran ne reconstitue pas nécessairement l’image à partir de sa ponctuation.
Dernier contrôle
Vérifiez le collage réel sur téléphone et ordinateur. Le diagnostic ne mesure pas les glyphes de votre messagerie et ne garantit pas la largeur des emoji. Utilisez les procédures dédiées à Discord / GitHub.