ARTASCIIcréateur en caractères
Guide pratique · exemples reproductibles

Intégrer un dessin ASCII en HTML sans le déformer

Placez le dessin dans un élément pre, échappez les caractères réservés et préservez les espaces avec une police monospace. Ajoutez une description si le dessin transmet une information.

Exemple 1 : un poisson prêt à intégrer

<figure>
  <pre class="ascii" role="img" aria-label="Petit poisson">&gt;&lt;&gt;</pre>
  <figcaption>Un poisson dessiné avec trois caractères.</figcaption>
</figure>
<style>
.ascii {
  font-family: monospace;
  white-space: pre;
  max-width: 100%;
  overflow-x: auto;
}
</style>

Télécharger ce code

Le navigateur doit afficher ><> et une légende. Les entités dans le code source redeviennent des chevrons visibles ; elles ne doivent pas apparaître littéralement comme &gt; dans le rendu. Testez le fragment dans une page de brouillon avant de l’intégrer à un gabarit.

Exemple 2 : insérer un texte dynamique

const drawing = "><> & <><";
document.querySelector("#art").textContent = drawing;

Créez d’abord un élément <pre id="art"></pre>. textContent insère du texte sans le traiter comme du HTML. Avec innerHTML, les chevrons et les esperluettes peuvent modifier le résultat et une saisie non maîtrisée peut devenir du balisage. Le dessin doit rester une donnée textuelle, pas une structure HTML.

Préserver les lignes sur mobile

Le standard HTML pour pre définit le texte préformaté. Le CSS ci-dessus garde les lignes entières et propose un défilement si elles sont trop larges. Ne remplacez pas white-space: pre par pre-wrap pour un dessin qui exige des colonnes alignées. Réduire la largeur du dessin est souvent plus lisible que réduire fortement sa police.

Description et copie du code

Le rôle img décrit ici le poisson comme une image textuelle. Il convient à un dessin, pas à un exemple de programme dont le lecteur doit parcourir les caractères. La technique W3C H86 traite des alternatives aux dessins ASCII. Pour une collection destinée à être copiée, gardez un bouton de copie ou un TXT séparé : le rôle image ne remplace pas cette fonction.

Contrôle avant publication

Vérifiez le texte rendu, le défilement au clavier, la description et le rendu à 200 % de zoom. Ces fragments ne constituent pas une validation complète de l’accessibilité de votre site. Le rendu dépend aussi du CSS hérité de votre gabarit.

Guide accessibilité · Réparer l’alignement

Pour reprendre une couleur de votre charte dans les propriétés CSS color et background-color du bloc ASCII, le convertisseur HEX, RVB et HSL de Code Couleur permet de passer d’une notation à l’autre. La conversion ne vérifie pas à elle seule le contraste : contrôlez ensuite la paire texte/fond.

Pour continuer