the-monospace-web-pandoc/index.md

title, author, date

title	author	date
The Monotyper Manifesto	John Doe	August 2024

Abstract

In this design, the use of monospace fonts and a monochrome color palette is deliberate to enhance clarity and legibility, especially in environments where precision and readability are paramount. Monospace fonts, where each character occupies the same horizontal space, ensure uniformity and predictability in text alignment, making them ideal for coding interfaces, technical documentation, and tabular data displays.

The consistent spacing prevents text from becoming jumbled or misaligned, which can be critical when differentiating between similar-looking characters, such as '1' and 'l' or '0' and 'O'. This uniformity contributes to an overall sense of order and structure within the design, aiding users in quickly scanning and understanding the information presented.

The Basics

I mean, look at this lovely horizontal break:

---

Or a plain old bulleted list:

• Banana
• Paper boat
• Cucumber
• Rocket

Trees

It's nice to visualize trees. This is a regular unordered list with a tree class:

• /dev/nvme0n1p2

  • usr
    • local
    • share
    • libexec
    • include
    • sbin
    • src
    • lib64
    • lib
    • bin
    • games
      • gamemode-simulate-game
      • gamemoderun
      • gamemodelist
    • media
  • media
  • run
  • tmp

Tables

We can use regular tables that automatically adjust to the monospace grid. They're responsive.

Name	Dimensions	Position
Boboli Obelisk	1.41m × 1.41m × 4.87m	43°45'50.78"N 11°15'3.34"E
Pyramid of Khafre	215.25m × 215.25m × 136.4m	29°58'34"N 31°07'51"E

Note that only one column is allowed to grow.

ASCII Drawings

We can draw in <pre> tags using box-drawing characters:

╭─────────────────╮
│ MONOSPACE ROCKS │
╰─────────────────╯

To have it stand out a bit more, we can wrap it in a <figure> tag, and why not also add a <figcaption>.

┌───────┐ ┌───────┐ ┌───────┐
│Actor 1│ │Actor 2│ │Actor 3│
└───┬───┘ └───┬───┘ └───┬───┘
    │         │         │    
    │         │  msg 1  │    
    │         │────────►│    
    │         │         │    
    │  msg 2  │         │    
    │────────►│         │    
┌───┴───┐ ┌───┴───┐ ┌───┴───┐
│Actor 1│ │Actor 2│ │Actor 3│
└───────┘ └───────┘ └───────┘

Example: Message passing.

Let's go wild and draw a chart!

                  Things I have.
                                              ████ Usable
    │
15  │                                         ░░░░ Broken
    │
    │
12  │             ░            
    │             ░            
    │   ░         ░              
 9  │   ░         ░              
    │   ░         ░              
    │   ░         ░                    ░
 6  │   █         ░         ░          ░
    │   █         ░         ░          ░
    │   █         ░         █          ░
 3  │   █         █         █          ░
    │   █         █         █          ░
    │   █         █         █          ░
 0  └───▀─────────▀─────────▀──────────▀─────────────
      Socks     Jeans     Shirts   USB Drives