ARTASCIIcreate with characters
Practical guide · reproducible examples

Embed ASCII art in HTML without distorting it

Place the drawing in a pre element, escape reserved characters and preserve spacing with a monospace font. Add a description when the drawing conveys information.

Example 1: a fish ready to embed

<figure>
  <pre class="ascii" role="img" aria-label="Small fish">&gt;&lt;&gt;</pre>
  <figcaption>A fish drawn with three characters.</figcaption>
</figure>
<style>
.ascii {
  font-family: monospace;
  white-space: pre;
  max-width: 100%;
  overflow-x: auto;
}
</style>

Download this code

The browser should show ><> and a caption. Source entities become visible angle brackets; they should not appear literally as &gt; in the output. Test the fragment in a draft page before adding it to a template.

Example 2: insert dynamic text

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

First create a <pre id="art"></pre> element. textContent inserts text without treating it as HTML. With innerHTML, angle brackets and ampersands can change the result and uncontrolled input can become markup. Keep the drawing as text data, not HTML structure.

Preserve lines on mobile

The HTML standard for pre defines preformatted text. The CSS above keeps lines intact and allows scrolling if they are too wide. Do not replace white-space: pre with pre-wrap for a drawing that needs aligned columns. A narrower drawing is often more readable than a dramatically smaller font.

Description and copying code

The img role describes this fish as a text-based image. It suits a drawing, not a program example whose characters the reader needs to inspect. W3C technique H86 addresses text alternatives for ASCII art. For a copyable collection, retain a copy button or separate TXT file: the image role does not replace that function.

Check before publishing

Check rendered text, keyboard scrolling, the description and 200% zoom. These fragments do not constitute a full accessibility validation of your site. Rendering also depends on CSS inherited from your template.

Accessibility guide · Fix alignment

To apply a brand colour to the ASCII block’s CSS color and background-color properties, the HEX, RGB and HSL converter on Code Couleur helps translate between notations. Conversion alone does not check contrast: test the foreground/background pair afterwards. Resource in French.

Keep creating