How to display ASCII Art correct across different devices

A couple of days ago I added an ASCII Art diagram to my posting about AI assistants and test driven development but then noticed, it was rendering wrong on android devices.

After searching around for a while I found a good explanation about the underlying problem and the proper solution on stackoverflow.com.

In total, three things are required:

1. Wrap your ASCII Art graphic into the pre HTML tag

   <pre>ASCII Art<pre/>
   

2. Specify a custom font family, line height and white space behavior via (inline) CSS

   <pre style="line-height:1.0; font-family:JetBrainsMono; white-space:pre;">ASCII Art<pre/>
   

3. Make your custom font available via your custom CSS file (web-loaded fonts like those from Google Fonts can cause issues if they lack specific glyphs, leading to substitution with non-monospaced characters, so it is better you host your custom font together with your style definitions and your content)

   @font-face {
   font-family:"JetBrainsMono";
   font-style:bold;
   src:url(../fonts/JetBrainsMono.ttf) format('truetype');
   }
   

I have found a good free and open source mono space font at jetbrains.com, see also github.com/JetBrains/JetBrainsMono.

Here the diagram of the red/green TDD I mentioned above in HTML source code:

<pre style="line-height:1.0; font-family:JetBrainsMono; white-space:pre;">
  ┌────────────────────┐   ┌──────────────────┐   ┌───────────────────────┐
  │ 1. WRITE A LIST    ├───► 2. PICK ONE TEST ├───► 3. WRITE THE TEST     │
  │    OF TEST CASES   │   │    exactly one   │   │    <font color="#FF5500">red</font>                │
  └────────▲───────────┘   └───────▲──────────┘   └──────────┬────────────┘
           │          imrpove      │          loop           │          
  ┌────────┴───────────┐   ┌───────┴──────────┐   ┌──────────▼────────────┐
  │ 5. ADD TO THE LIST ◄───┤ 5. REFACTOR      ◄───┤ 4. MAKE THE TEST PASS │
  │    as you learn    │   │    optionally    │   │    <font color="#00FF00">green</font>              │
  └────────────────────┘   └──────────────────┘   └───────────────────────┘
</pre>

And here the rendered version of the canonical red/green TDD:

  ┌────────────────────┐   ┌──────────────────┐   ┌───────────────────────┐
  │ 1. WRITE A LIST    ├───► 2. PICK ONE TEST ├───► 3. WRITE THE TEST     │
  │    OF TEST CASES   │   │    exactly one   │   │    red                │
  └────────▲───────────┘   └───────▲──────────┘   └──────────┬────────────┘
           │          imrpove      │          loop           │          
  ┌────────┴───────────┐   ┌───────┴──────────┐   ┌──────────▼────────────┐
  │ 5. ADD TO THE LIST ◄───┤ 5. REFACTOR      ◄───┤ 4. MAKE THE TEST PASS │
  │    as you learn    │   │    optionally    │   │    green              │
  └────────────────────┘   └──────────────────┘   └───────────────────────┘