mirror of
https://github.com/frainfreeze/the-monospace-web-pandoc
synced 2025-12-29 18:49:50 -08:00
315 lines
10 KiB
HTML
315 lines
10 KiB
HTML
<!DOCTYPE html>
|
||
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="generator" content="pandoc" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
|
||
<meta name="author" content="Oskar Wickström" />
|
||
<meta name="dcterms.date" content="2024-08-30" />
|
||
<title>The Monospace Web</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="reset.css" />
|
||
<link rel="stylesheet" href="index.css" />
|
||
</head>
|
||
<body>
|
||
<table class="header">
|
||
<tr>
|
||
<td colspan="2" rowspan="2" class="width-auto">
|
||
<h1 class="title">The Monospace Web</h1>
|
||
<span class="subtitle">A minimalist design exploration</span>
|
||
</td>
|
||
<th>Version</th>
|
||
<td class="width-min">v0.1.0</td>
|
||
</tr>
|
||
<tr>
|
||
<th>Updated</th>
|
||
<td class="width-min">2024-08-30</td>
|
||
</tr>
|
||
<tr>
|
||
<th class="width-min">Author</th>
|
||
<td class="width-auto"><cite>Oskar Wickström</cite></td>
|
||
<th class="width-min">License</th>
|
||
<td><a href="https://github.com/owickstrom/the-monospace-web/blob/main/LICENSE.md">MIT</a></td>
|
||
</tr>
|
||
</table>
|
||
<label class="debug-toggle-label"><input type="checkbox" class="debug-toggle" /> Debug mode</label>
|
||
<nav id="TOC" role="doc-toc">
|
||
<h2 id="toc-title">Contents</h2>
|
||
<ul class="incremental">
|
||
<li><a href="#introduction" id="toc-introduction">Introduction</a></li>
|
||
<li><a href="#the-basics" id="toc-the-basics">The Basics</a></li>
|
||
<li><a href="#lists" id="toc-lists">Lists</a></li>
|
||
<li><a href="#tables" id="toc-tables">Tables</a></li>
|
||
<li><a href="#forms" id="toc-forms">Forms</a></li>
|
||
<li><a href="#grids" id="toc-grids">Grids</a></li>
|
||
<li><a href="#ascii-drawings" id="toc-ascii-drawings">ASCII
|
||
Drawings</a></li>
|
||
<li><a href="#media" id="toc-media">Media</a></li>
|
||
<li><a href="#discussion" id="toc-discussion">Discussion</a></li>
|
||
</ul>
|
||
</nav>
|
||
<h2 id="introduction">Introduction</h2>
|
||
<p>Monospace fonts are dear to many of us. Some find them more readable,
|
||
consistent, and beautiful, than their proportional alternatives. Maybe
|
||
we’re just brainwashed from spending years in terminals? Or are we
|
||
hopelessly nostalgic? I’m not sure. But I like them, and that’s why I
|
||
started experimenting with all-monospace Web.</p>
|
||
<p>On this page, I use a monospace grid to align text and draw diagrams.
|
||
It’s generated from a simple Markdown document (using Pandoc), and the
|
||
CSS and a tiny bit of Javascript renders it on the grid. The page is
|
||
responsive, shrinking in character-sized steps. Standard elements should
|
||
<em>just work</em>, at least that’s the goal. It’s semantic HTML,
|
||
rendered as if we were back in the 70s.</p>
|
||
<p>I don’t take this too seriously. It’s a technical and creative
|
||
challenge and I like the aestethic. If you’d like to use it, feel free
|
||
to fork or copy the bits you need, respecting the license. I might
|
||
update it over time with improvements and support for more standard
|
||
elements.</p>
|
||
<h2 id="the-basics">The Basics</h2>
|
||
<p>This document uses a few extra classes here and there, but mostly
|
||
it’s just markup. This, for instance, is a regular paragraph.</p>
|
||
<p>Look at this horizontal break:</p>
|
||
<hr>
|
||
<p>Lovely.</p>
|
||
<h2 id="lists">Lists</h2>
|
||
<p>This is a plain old bulleted list:</p>
|
||
<ul class="incremental">
|
||
<li>Banana</li>
|
||
<li>Paper boat</li>
|
||
<li>Cucumber</li>
|
||
<li>Rocket</li>
|
||
</ul>
|
||
<p>Ordered lists look pretty much as you’d expect:</p>
|
||
<ol class="incremental" type="1">
|
||
<li>Goals</li>
|
||
<li>Motivations
|
||
<ol class="incremental" type="1">
|
||
<li>Intrinsic</li>
|
||
<li>Extrinsic</li>
|
||
</ol></li>
|
||
<li>Second-order effects</li>
|
||
</ol>
|
||
<p>It’s nice to visualize trees. This is a regular unordered list with a
|
||
<code>tree</code> class:</p>
|
||
<ul class="tree">
|
||
<li>
|
||
<p><strong>/dev/nvme0n1p2</strong></p>
|
||
<ul class="incremental">
|
||
<li>usr
|
||
<ul class="incremental">
|
||
<li>local<br />
|
||
</li>
|
||
<li>share<br />
|
||
</li>
|
||
<li>libexec<br />
|
||
</li>
|
||
<li>include<br />
|
||
</li>
|
||
<li>sbin<br />
|
||
</li>
|
||
<li>src<br />
|
||
</li>
|
||
<li>lib64<br />
|
||
</li>
|
||
<li>lib<br />
|
||
</li>
|
||
<li>bin<br />
|
||
</li>
|
||
<li>games
|
||
<ul class="incremental">
|
||
<li>solitaire</li>
|
||
<li>snake</li>
|
||
<li>tic-tac-toe</li>
|
||
</ul></li>
|
||
<li>media<br />
|
||
</li>
|
||
</ul></li>
|
||
<li>media<br />
|
||
</li>
|
||
<li>run<br />
|
||
</li>
|
||
<li>tmp<br />
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
<h2 id="tables">Tables</h2>
|
||
<p>We can use regular tables that automatically adjust to the monospace
|
||
grid. They’re responsive.</p>
|
||
<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>
|
||
<p>Note that only one column is allowed to grow.</p>
|
||
<h2 id="forms">Forms</h2>
|
||
<p>Here are some buttons:</p>
|
||
<nav>
|
||
<button>
|
||
Reset
|
||
</button>
|
||
<button>
|
||
Save
|
||
</button>
|
||
</nav>
|
||
<p>And inputs:</p>
|
||
<form class="grid">
|
||
<label>First name
|
||
<input type="text" placeholder="Placeholder..." /></label> <label>Last
|
||
name <input type="text" placeholder="Text goes here..." /></label>
|
||
<label>Age <input type="text" value="30" /></label>
|
||
</form>
|
||
<h2 id="grids">Grids</h2>
|
||
<p>Add the <code>grid</code> class to a container to divide up the
|
||
horizontal space evenly for the cells. Not that it maintains the
|
||
monospace, so the total width might not be 100%. Here are six grids with
|
||
increasing cell count:</p>
|
||
<div class="grid">
|
||
<input readonly value="1" />
|
||
</div>
|
||
<div class="grid">
|
||
<input readonly value="1" /><input readonly value="2" />
|
||
</div>
|
||
<div class="grid">
|
||
<input readonly value="1" /><input readonly value="2" /><input readonly value="3" />
|
||
</div>
|
||
<div class="grid">
|
||
<input readonly value="1" /><input readonly value="2" /><input readonly value="3" /><input readonly value="4" />
|
||
</div>
|
||
<div class="grid">
|
||
<input readonly value="1" /><input readonly value="2" /><input readonly value="3" /><input readonly value="4" /><input readonly value="5" />
|
||
</div>
|
||
<div class="grid">
|
||
<input readonly value="1" /><input readonly value="2" /><input readonly value="3" /><input readonly value="4" /><input readonly value="5" /><input readonly value="6" />
|
||
</div>
|
||
<p>If we want one cell to fill the remainder, we set
|
||
<code>flex-grow: 1;</code> for that particular cell.</p>
|
||
<div class="grid">
|
||
<input readonly value="1" /><input readonly value="2" /><input readonly value="3!" style="flex-grow: 1;" /><input readonly value="4" /><input readonly value="5" /><input readonly value="6" />
|
||
</div>
|
||
<h2 id="ascii-drawings">ASCII Drawings</h2>
|
||
<p>We can draw in <code><pre></code> tags using <a
|
||
href="https://en.wikipedia.org/wiki/Box-drawing_characters">box-drawing
|
||
characters</a>:</p>
|
||
<pre><code>╭─────────────────╮
|
||
│ MONOSPACE ROCKS │
|
||
╰─────────────────╯</code></pre>
|
||
<p>To have it stand out a bit more, we can wrap it in a
|
||
<code><figure></code> tag, and why not also add a
|
||
<code><figcaption></code>.</p>
|
||
<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>
|
||
<p>Let’s go wild and draw a chart!</p>
|
||
<figure>
|
||
<pre>
|
||
Things I Have
|
||
|
||
│ ████ Usable
|
||
15 │
|
||
│ ░░░░ Broken
|
||
│
|
||
12 │ ░
|
||
│ ░
|
||
│ ░ ░
|
||
9 │ ░ ░
|
||
│ ░ ░
|
||
│ ░ ░ ░
|
||
6 │ █ ░ ░ ░
|
||
│ █ ░ ░ ░
|
||
│ █ ░ █ ░
|
||
3 │ █ █ █ ░
|
||
│ █ █ █ ░
|
||
│ █ █ █ ░
|
||
0 └───▀─────────▀─────────▀──────────▀─────────────
|
||
Socks Jeans Shirts USB Drives
|
||
</pre>
|
||
</figure>
|
||
<h2 id="media">Media</h2>
|
||
<p>Media objects are supported, like images and video:</p>
|
||
<figure>
|
||
<img src="castle.jpg" alt="A room in an old French castle (2024)" />
|
||
<figcaption aria-hidden="true">A room in an old French castle
|
||
(2024)</figcaption>
|
||
</figure>
|
||
<figure>
|
||
<video
|
||
src="https://upload.wikimedia.org/wikipedia/commons/e/e0/The_Center_of_the_Web_%281914%29.webm"
|
||
controls=""><a
|
||
href="https://upload.wikimedia.org/wikipedia/commons/e/e0/The_Center_of_the_Web_%281914%29.webm">The
|
||
Center of the Web (1914), Wikimedia</a></video>
|
||
<figcaption aria-hidden="true"><a
|
||
href="https://en.wikisource.org/wiki/Page:The_Center_of_the_Web_(1914).webm/11">The
|
||
Center of the Web (1914), Wikimedia</a></figcaption>
|
||
</figure>
|
||
<p>They extend to the width of the page, and add appropriate padding in
|
||
the bottom to maintain the monospace grid.</p>
|
||
<h2 id="discussion">Discussion</h2>
|
||
<p>That’s it for now. I’ve very much enjoyed making this, pushing my CSS
|
||
chops and having a lot of fun with the design. If you like it or even
|
||
decide to use it, please <a href="https://x.com/owickstrom">let me
|
||
know</a>.</p>
|
||
<p>The full source code is here: <a
|
||
href="https://github.com/owickstrom/the-monospace-web">github.com/owickstrom/the-monospace-web</a></p>
|
||
<p>Join the discussion in any of the following threads:</p>
|
||
<ul class="incremental">
|
||
<li>X/Twitter</li>
|
||
<li>Lobsters</li>
|
||
<li>Hacker News</li>
|
||
</ul>
|
||
<div class="debug-grid"></div>
|
||
<script src="index.js"></script>
|
||
</body>
|
||
</html>
|