Pourquoi l'art ASCII est-il mal aligné ?

L'art ASCII se désaligne généralement parce que la destination utilise une police proportionnelle, fusionne les espaces consécutifs, développe les tabulations différemment ou renvoie une ligne à la ligne avant la fin du dessin. Corrigez d'abord le conteneur : utilisez un bloc de code délimité ou un élément pre, choisissez une police à chasse fixe, remplacez les tabulations par des espaces et veillez à ce que chaque ligne tienne dans la largeur minimale de la destination. Le générateur d'art ASCII ClockTools affiche en direct le nombre de colonnes, de lignes, de caractères et d'octets pour vous permettre de tester le résultat avant de le coller.

Quelles sont les quatre vérifications qui détectent la plupart des problèmes d'alignement ?

Suivez cet ordre : chaque étape permet d'écarter une catégorie entière de problèmes :

1. Police : confirmez que la destination affiche l'illustration dans une police à espacement fixe.
2. Espaces : confirmez que les espaces répétés et les sauts de ligne sont conservés.
3. Largeur : repérez la ligne la plus longue et comparez-la au conteneur d'affichage le plus étroit.
4. Caractères : recherchez les tabulations, les symboles Unicode larges, les emoji ou les glyphes de substitution susceptibles d'occuper un nombre inattendu de cellules.

Ne commencez pas par redessiner les lettres une par une. Si toutes les lignes se décalent à partir du même point, la structure est probablement intacte et c'est le moteur de rendu qui modifie l'espacement.

Pourquoi une police proportionnelle désorganise-t-elle le dessin ?

L'art ASCII traite les caractères comme les cases d'une grille. Un espace, un trait de soulignement, une barre oblique et un W majuscule doivent tous occuper la même largeur de cellule pour que les motifs verticaux restent alignés. Une police proportionnelle attribue volontairement des largeurs différentes : une ligne de lettres étroites n'occupe donc plus la même largeur qu'une ligne de lettres larges.

La famille générique CSS monospace demande au navigateur une police dont tous les caractères ont la même largeur. Le guide des polices du W3C classe monospace parmi les familles génériques, tandis que la définition CSS 2 décrit une police à chasse fixe par la largeur constante de ses glyphes.

Lorsque vous contrôlez la page, utilisez un élément préformaté et une pile de polices à chasse fixe :

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

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

Le dessin est ainsi préservé sans retour automatique à la ligne. Un défilement horizontal est souvent moins gênant qu'un bord droit désorganisé.

Comment les espaces, les tabulations et le retour à la ligne modifient-ils les lignes ?

Le HTML ordinaire fusionne les espaces consécutifs et traite les sauts de ligne comme des espaces dans le flux du texte. La propriété CSS white-space détermine si les espaces et les sauts de ligne sont conservés et si le texte peut revenir à la ligne. pre préserve les trois éléments structurels de l'art ASCII ordinaire : les espaces répétés, les lignes explicites et l'absence de retour automatique à la ligne.

Les tabulations ne sont pas des unités d'alignement stables. Un éditeur peut leur attribuer quatre colonnes, un autre huit, et un composant web peut appliquer une taille de tabulation personnalisée. Avant de diffuser le dessin, remplacez chaque tabulation par le nombre d'espaces voulu.

Les espaces de fin de ligne sont eux aussi fragiles. Certains éditeurs les suppriment à l'enregistrement et les outils de révision peuvent les masquer. Privilégiez un dessin dont le bord droit ne dépend pas d'espaces invisibles en fin de ligne. Les espaces de début et de milieu de ligne sont plus faciles à conserver dans un conteneur préformaté.

Qu'est-ce qui a changé dans un test ClockTools contrôlé ?

Lors d'un test en direct le 2026-09-01, le texte ALIGN a été saisi avec la police Standard FIGlet. Avec un alignement à gauche, le générateur indiquait 31 colonnes, 6 lignes, 159 caractères et 159 octets. Le résultat visible était :

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

Le passage à une largeur cible de 40 colonnes et à un alignement centré a ajouté des espaces au début des lignes. Les valeurs indiquées sont passées à 65 colonnes et 380 caractères alors que la forme des lettres n'avait pas changé. C'est le point essentiel : l'alignement peut ajouter de véritables espaces. Une bannière qui semble centrée dans le générateur peut donc devenir trop large pour sa destination.

L'outil distingue aussi la couleur de l'aperçu du texte brut et propose des exportations textuelles TXT, Markdown, ANSI et HTML, ainsi que le format PNG. Cette séparation empêche un réglage décoratif de l'aperçu de modifier les caractères copiés à votre insu.

Comment coller de l'art ASCII dans Markdown ou HTML ?

Sur GitHub, placez le texte dans un bloc de code délimité. La documentation de GitHub présente les délimiteurs à trois accents graves et recommande de les entourer de lignes vides. Ajoutez l'indication text si vous ne souhaitez pas qu'un outil de coloration syntaxique colore la ponctuation.

```text
YOUR ASCII ART
```

Dans un README, conservez le nom du projet sous forme de titre ordinaire avant le dessin. Les lecteurs d'écran peuvent énoncer chaque signe de ponctuation : une bannière décorative ne doit donc pas être le seul endroit où figurent les informations essentielles.

En HTML, utilisez pre au lieu d'une succession d'espaces insécables. Testez l'affichage étroit. Vous pouvez utiliser l'éditeur HTML en temps réel pour comparer white-space: pre, pre-wrap et le flux normal sans modifier une page de production.

Quand les caractères Unicode créent-ils un problème de largeur ?

Les caractères ASCII au sens strict sont étroits, mais beaucoup de créations modernes d'« art ASCII » utilisent des caractères de tracé, des blocs d'ombrage, des emoji ou d'autres symboles Unicode. Le rapport Unicode East Asian Width explique que les caractères peuvent être étroits ou larges dans les contextes de mise en page, et que les caractères ambigus peuvent dépendre de l'environnement.

La substitution de police ajoute une autre variable. Si la police à chasse fixe choisie ne contient pas un symbole, le navigateur peut l'emprunter à une autre police dont les métriques diffèrent. Testez le dessin dans le terminal, l'application de discussion ou le navigateur où il sera affiché.

Pour une compatibilité maximale, choisissez une gamme de caractères ASCII simples, comme @%#*+=-:., et évitez les emoji. N'utilisez des blocs Unicode que si vous savez que la destination les affiche de manière cohérente.

Quel format d'exportation utiliser lorsque le texte ne reste pas aligné ?

Choisissez le format pour la destination, pas pour l'aperçu du générateur :

Avant l'exportation, collez le texte brut dans le Bloc-notes en ligne pour repérer les tabulations accidentelles, puis comparez les versions avant et après avec le Vérificateur de différences de texte. Une comparaison caractère par caractère révèle les espaces supprimés qu'un simple examen visuel peut manquer.

Si la destination n'accepte pas les polices à chasse fixe, supprime les délimiteurs de code ou impose un retour à la ligne aux longues lignes, ne la considérez plus comme un support textuel fiable. Exportez un PNG, conservez une légende en texte ordinaire pour l'accessibilité et gardez le texte original séparément pour les modifications futures.

Questions fréquemment posées