WEB a
- Inspiration for monospace webpage aesthetic:
-
https://www.rfc-editor.org/rfc/rfc1034.html
RFCs are nostalgic and info dense; hard line-wrapped at 80ch. Sometimes contain cool diagrams -
https://stonegray.ca/
Uses :before and :after CSS elements to decorate elements like[ tag ]
. Also includes<--
as a navigation icon -
https://kary.us/nota/
The cleanest box drawing I've seen. Unicode heavy. Custom font -
https://plaintextsports.com/
Plaintext UI. Cool formatting ideas, thin centered content column, fetches data too. See also game graphs like this one. Probs unfriendly to screen readers -
https://computer.rip/
True plaintext content. Uses 4ch blockquote margins and bold and>>>
for formatting -
https://berkeleygraphics.com/typefaces/berkeley-mono/#doc-tab-1
Attractive box drawing mockups -
https://mcj.sourceforge.net/fig-format.html
Help text example with elements like parenthesized enumerations(3.4)
and double asterisks**
and tab-style column alignment. But not mobile friendly, just baked whitespace at 80ch like RFCs -
https://wttr.in/
Unicode and ascii that work together; good use of color and graphics; plaintext and curl and other data support (not just html); uses source code pro font -
https://garden.bradwoods.io/
Monospaced font mixed with minimal box borders. Uses svg instead of┗━
for inline file tree. Lots of divs though -
https://xeiaso.net/blog
Blockquote in footer achieves a vertical line of>
's with CSS :after, content">\A>\A>\A..."
, white-space pre, and absolute positioning -
https://fabiensanglard.net/
Plaintext content. Minimal styling with bold / underline. Uses dejavu sans mono and floated inline graphics -
https://7guis.bradwoods.io/
Vanilla, structured html -
https://cmpxchg8b.com/#articles
Boring html in a good way, and heavy on dashed borders. Pale bg color for inline code -
https://hoverbear.org/blog/rust-state-machine-pattern/
Full-width code blocks break out of content column (gain a few chars of max width on mobile) -
https://what.happens.when.computer/
I like the navbar:/ index ^ archive # tags @ about
-
https://www.rfc-editor.org/rfc/rfc1034.html
- Honorable mentions, ie. other cool site designs I've since come across:
one, two, three, four, five, six, seven, eight, nine, ten, eleven, twelve, thirteen, fourteen, fifteen, sixteen, seventeen, eighteen - Some victims of broken box-drawing characters, at least when viewed on certain devices (scroll down the pages until you see box borders like ┌──┐):
one,
two,
three
Apparently my phone's system monospace font doesn't support box drawing characters very well (Android, Roboto Mono). And apparently this is not just a mobile thing (Debian, Bitstream Vera Mono).
This website uses a font that includes box drawing characters so that the browser doesn't have to fallback to the system font. I doubt that these system fonts will fix their box drawing characters any time soon -
Website domains can have emoji / unicode in them.
Punycode is the algorithm that converts the unicode to ascii, since domains are supposed to be in ascii.
Eg. https://💩.la becomes https://xn--ls8h.la
CREATIONS, ART, AND OTHER FUN a
-
A figlet font made of unicode block chars: clockchars.flf
██████ ██████ ██████ ██████ ████████ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██████ ██████ ██ ██████ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██████ ██████ ██ ██ ██ ██ ██
Companion clock script:tput civis; watch -t -n1 "date '+%-I:%M %p'|figlet -f clockchars"
#!/bin/sh tput civis # hide cursor d1="date '+%-I" # time fmt; %-I means no zero-pad d2=":%M %p'" # mins, extra space, and AM/PM f="figlet -f clockchars" # standard figlet call w="watch -t -n1" # echo result of, updating per sec $w "$d1$d2 | $f" # glued together
See also someone's 3x3 block figlet font and scripts. -
A figlet serif font inspired by the drop caps on mononoki's landing page: mononokaps.flf
___ _____ _____ _____ _______ _______ _____ ____ ____ ______ ______ ___ ___ ____ ___ ___ ___ ___ ____ ______ ____ _____ ____ ________ ____ ___ ____ ___ ___ ___ ___ ___ __ ___ ___ _____ /\\ || \ // \| || `\ || \| || \| // \| || || || || || / || |\\ /|| |\\ | / `\ || \\ / `\ || \\ // \| |/ || \| || | \\ / \\ \\ / \\ / \\ / / // /__\\ ||__/ || || || ||__ ||__ || ___ ||____|| || || || /\ || | \\ / || | \\ | || || ||__// || || ||_// \\__ || || | \\ / \\ \\ / \\' \\/ // / \\ || \\ || || || || || || || || || || || ||' \\ || | \\/ || | \\| || || || || // ||\\ `\ || || | \\ / \\ / \\/ /\\ || // _/_ _\\_ _||__// \\__/ _||__// _||__/| _||_ \\__/| _||_ _||_ __||__ \_// _||_ \\_ _||__/| _|_ ' _||_ _|_ \| \___// _||_ \___/\\ _||_\\_ |\__// _||_ \\___/ \/ \/ \ _/ \\_ _||_ //__/|
- A terminal recording ported to a CSS animation, sorta like asciinema but without JS: clark's readme
- A venn diagram using hexagons, proportioned for holding text, since circles are hard:
_________________ / \ / \ / _________\_______ / / \ \ / / \ \ \ / / \ \ / / \ \ / / \ \ \ / / \______\__________/ / \ / \ / \_________________/
Note that the ideal hexagon aspect ratio depends on the font aspect ratio. These are 27x11 hexagons. With a wider font like Source Code Pro, 30x13 hexagons look better. - A landing page mockup / wireframe:
┌──────────────────────────────┐ ┌───────────────────────────────────────────────────────────────────┐ │ logo TRY IT! │ │ logo TRY IT! │ │──────────────────────────────│ │ │ │ = │ │───────────────────────────────────────────────────────────────────│ │ │ │ Features (Pricing) About │ │ 4 POINT + WIND │ │ │ │ │ │ │ │ The fastest Florida │ │ ┌───────────┐ │ │ insurance report software │ │ 4 POINT + WIND ┌────┐ │ │ │ for home inspectors │ │ │ │ │ │ │ │ │ The fastest Florida insurance │ │───────────┘ │ │ > OPEN APP < │ │ report software for home │ │ vv │ │ ---------- │ │ inspectors └────┘__vv___ │ │ │ │ / vv /__ │ │ │ │ > OPEN APP < / / / │ │ ┌───────────┐ │ │ ---------- / / / │ │ ┌────┐ │ │ │ /_______/ / │ │ │ │ │ │ │ /_______/ │ │ │ │───────────┘ │ └───────────────────────────────────────────────────────────────────┘ │ │ │ vv │ │ └────┘__vv___ │ │ / vv /__ │ │ / / / │ │ / / / │ │ /_______/ / │ │ /_______/ │ │ │ │ │ │ │ └──────────────────────────────┘
- Card games in the terminal, with cool playing card designs: csol
- Ascii art techniques and examples (video), from the creator of Stone Story RPG. Some highlights:
- made a custom font to get his preferred aspect ratio of 16:29, as well as achieving pixel perfection at different font sizes
- extended ascii with characters like latin accent ´ to complement backtick `, and likewise upside down exclamation mark ¡ to complement !
- developed anti-aliasing tricks to deal with angled and curved lines
- used dithering
- Some ASCII / ANSI art collections: one, two, three sorta, four
- Live shader-like coding but with an ASCII renderer: link
- Collaborative ASCII art, like r/place but over SSH: archived
- Snake, 2048, and freecell games over SSH, with color and global highscores:
ssh play@ascii.town
TERMINAL EMULATORS a
- 80 cols x 25 rows: the most common terminal screen size, dating back to teletypes and punch cards
- About legacy font aspect ratios, from CRT days: https://16colo.rs/ansiflags.php
- More on aspect ratios: Block chars (█) look best with wider fonts that have an aspect ratio close to 1:2. Eg. the super-skinny Iosevka font with ratio 1:4 will have super skinny distorted ANSI output.
-
There's thin and thick versions of each box drawing char:
┌───┬───┐ ┏━━━┳━━━┓ │ │ │ ┃ ┃ ┃ ├───┼───┤ ┣━━━╋━━━┫ │ │ │ ┃ ┃ ┃ └───┴───┘ ┗━━━┻━━━┛ light heavy
They're sprinkled throughout U+2500 to U+257F. This could be hidden depending on the terminal emulator or font, though. Some terminal emulators override the box drawing chars in order to make things pixel perfect and consistent (see discussion in Windows Terminal repo). tput cols; tput lines
: print terminal screen sizetput cvvis
ortput civis
: show or hide cursor (very visible versus invisible). See alsotput cnorm
- A list of ANSI codes / escape sequences, with explanations: gist. See also
man console_codes
- Web tool for creating ANSI codes based on desired stylings: link
- Fast image and video conversion to terminal ANSI code output: batimg
UNICODE a
- About the pains of creating text systems: Text rendering hates you, and Text editing hates you too
- String gotchas when working with non-ascii (examples from source 1, source 2):
-
"🤦🏼♂️".length == 7
Naive string length functions do not measure the number of glyphs rendered to the screen.
Example: 🤦🏼♂️ is composed of a facepalm emoji, a skin color, a zero width joiner, a male symbol, and a variation selector. This is 7 bytes when encoded with UTF-8 -
"caña" != "caña"
Different codepoints can render to the same glyph.
Example: U+00F1 is the single latin character "ñ", but "n" + combining tilde (U+006E, U+0303) looks like the same thing -
"ciao".upper() != "CIAO"
Case sensitivity is not a universal concept across languages.
Example: in the Turkish locale, the uppercase of "i" is "İ", a capital I with a dot above it. See also this data about case folding
In summary: string length, iterating over characters, indexing characters, case insensitivity, alphabetical sorting, and reversing strings should all be handled by a unicode library that can parse by grapheme cluster, unless you know you'll only have ascii input. Only a few programming languages encourage this (Swift, Rust, Elixir).
-
- Further reading: SO rant about Unicode in Perl, 2023 summary of Unicode for developers, Unicode affecting file names in the wild, dark corners of Unicode (2015), breaking Latin-1 assumptions
MISCELLANEOUS a
- Some interesting characters / glyphs / codepoints:
- U+1242B: 𒐫, which is just really big
- U+FDFD: ﷽, which renders very different between my Windows, Android, and iPad
- U+1F438: 🐸, the only emoji the the animals-amphibian category, which is the only category with one emoji (source)
- Five U+25EF joined with U+200D: ◯◯◯◯◯, which Whatsapp rendered as the olympic rings symbol for one month in 2016 (source)
- U+FFFF: , reserved as a sort of null codepoint
-
Vim tip: (normal mode)
ga
Shows the codepoint of the character under the cursor. See alsog8
.- Example: with cursor over ✓,
ga
echoes<✓> 10003, Hex 2713, Octal 23423
- Example: with cursor over ✓,
-
Vim tip: (insert mode)
<C-v>u
/<C-v>U
Input a 4-char / 8-char hex codepoint.- Example:
i<C-v>u2713
will insert a check mark character ✓
- Example:
- Windows tip:
Win + .
opens an emoji picker - Apparently
ffmpeg
can encode/decode to colored teletype output with ANSI sequences? Need to test this - Similarly,
GIMP
can convert an image to ascii art. Need to test this too - A small perk of monospace: clicking on skinny characters like "." or "l" is easier with a fixed-width font than a variable-width font
- Search installed fonts on Linux:
fc-match
- The most legible default figlet fonts, in my opinion: small, cybermedium, mini, ogre, rectangles, roman, script, shadow, smscript, smshadow, smslant, standard, starwars
- More cool figlet fonts, beyond defaults, yet not lavish toilet fonts either: this repo
- Browse installed figlet fonts:
showfigfonts | less
. See alsochkfont
- A website that sells unicode arrow merch: unicodearrows.com
updated Nov 2023