mirror of
https://github.com/frainfreeze/the-monospace-web-pandoc
synced 2025-12-30 02:59:50 -08:00
141 lines
4.4 KiB
Markdown
141 lines
4.4 KiB
Markdown
---
|
|
title: The Monotyper Manifesto
|
|
author: John Doe
|
|
date: 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:
|
|
|
|
<hr>
|
|
|
|
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:
|
|
|
|
<ul class="tree">
|
|
<li>
|
|
|
|
**/dev/nvme0n1p2**
|
|
|
|
* usr
|
|
* local
|
|
* share
|
|
* libexec
|
|
* include
|
|
* sbin
|
|
* src
|
|
* lib64
|
|
* lib
|
|
* bin
|
|
* games
|
|
* gamemode-simulate-game
|
|
* gamemoderun
|
|
* gamemodelist
|
|
* media
|
|
* media
|
|
* run
|
|
* tmp
|
|
</li>
|
|
</ul>
|
|
|
|
## Tables
|
|
|
|
We can use regular tables that automatically adjust to the monospace grid.
|
|
They're responsive.
|
|
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th class="width-min">Name</th>
|
|
<th class="width-auto">Dimensions</th>
|
|
<th class="width-min">Position</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Boboli Obelisk</td>
|
|
<td>1.41m × 1.41m × 4.87m</td>
|
|
<td>43°45'50.78"N 11°15'3.34"E</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Pyramid of Khafre</td>
|
|
<td>215.25m × 215.25m × 136.4m</td>
|
|
<td>29°58'34"N 31°07'51"E</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
Note that only one column is allowed to grow.
|
|
|
|
## ASCII Drawings
|
|
|
|
We can draw in `<pre>` tags using [box-drawing characters](https://en.wikipedia.org/wiki/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>`.
|
|
|
|
<figure>
|
|
<pre>
|
|
┌───────┐ ┌───────┐ ┌───────┐
|
|
│Actor 1│ │Actor 2│ │Actor 3│
|
|
└───┬───┘ └───┬───┘ └───┬───┘
|
|
│ │ │
|
|
│ │ msg 1 │
|
|
│ │────────►│
|
|
│ │ │
|
|
│ msg 2 │ │
|
|
│────────►│ │
|
|
┌───┴───┐ ┌───┴───┐ ┌───┴───┐
|
|
│Actor 1│ │Actor 2│ │Actor 3│
|
|
└───────┘ └───────┘ └───────┘</pre>
|
|
<figcaption>Example: Message passing.</figcaption>
|
|
</figure>
|
|
|
|
Let's go wild and draw a chart!
|
|
|
|
<figure><pre>
|
|
Things I have.
|
|
████ Usable
|
|
│
|
|
15 │ ░░░░ Broken
|
|
│
|
|
│
|
|
12 │ ░
|
|
│ ░
|
|
│ ░ ░
|
|
9 │ ░ ░
|
|
│ ░ ░
|
|
│ ░ ░ ░
|
|
6 │ █ ░ ░ ░
|
|
│ █ ░ ░ ░
|
|
│ █ ░ █ ░
|
|
3 │ █ █ █ ░
|
|
│ █ █ █ ░
|
|
│ █ █ █ ░
|
|
0 └───▀─────────▀─────────▀──────────▀─────────────
|
|
Socks Jeans Shirts USB Drives
|
|
</pre></figure>
|