Notes on monospace, fonts, ascii, unicode

WEB a

Inspiration for monospace webpage aesthetic:
- https://stonegray.ca/, before redesign
  Uses :before and :after CSS elements to decorate elements like [ tag ]. Also uses <-- as a navigation element
- https://www.rfc-editor.org/rfc/rfc1034.html
  RFCs are nostalgic and info dense; hard line-wrapped at 80ch. Sometimes contain cool diagrams
- 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
Honorable mentions, ie. other site designs I've found that embrace a unique ASCII/monospace style:
one, two, three, four, five, six, seven, eight, nine, ten, eleven, twelve, thirteen, fourteen, fifteen, sixteen, seventeen, eighteen, nineteen, twenty, twenty-one, twenty-two, twenty-three, twenty-four, twenty-five, twenty-six, twenty-seven, twenty-eight
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

A figlet font for Ander de Flon's 3x3 typeface: 3x3flon.flf

▄▄▄ ▄ ▄ ▄▄▄    ▄▄▄ ▄ ▄ ▄▄▄ ▄▄▄ ▄ ▄    ▄▄  ▄▄▄ ▄▄▄ ▄ ▄ ▄▄▄    ▄▄▄ ▄▄▄ ▄ ▄    ▄▄▄ ▄ ▄ ▄▄▄ ▄▄▄ ▄▄▄ ▄▄     ▄▄▄ ▄ ▄ ▄▄▄ ▄▄▄    ▄▄▄ ▄ ▄ ▄▄▄    ▄    ▄  ▄▄  ▄ ▄    ▄▄  ▄▄▄ ▄▄
 █  █▀█ ██▄    ▀▀█ █▄█ ▄█▄ █▄▄ █▀▄    ███ █   █▄█ ███ █ █    █▀  █▄█ ▄▀▄    ▄▄█ █▄█ █▀█ █▀▀ ██▄ █▄▀    █▄█ ▀▄▀ ██▄ █       █  █▀█ ██▄    █▄▄ █▀█  █▄  █     █▄▀ █▄█ █▄█

See also someone else's 3x3 block figlet font and related scripts.

A figlet serif font inspired by the drop caps on mononoki's landing page: mononokaps.flf

    ___     _____     _____  _____    _______  _______   _____   ____  ____  ______  ______  ___  ___   ____     ___      ___  ___  ___   ____   ______     ____    _____     ____   ________  ____  ___  ____   ___  ___  ___   ___  ___  __  ___  ___  _____  
    /\\      ||  \   //   \|  ||  `\   ||  \|   ||  \|  //   \|   ||    ||     ||      ||     ||  /      ||       |\\    /||    |\\  |   /   `\   ||  \\   /   `\    || \\   //  \|  |/ || \|   ||    |    \\     /    \\   \\    /    \\  /    \\  /    /  //  
   /__\\     ||__/   ||       ||   ||  ||__     ||__    ||   ___  ||____||     ||      ||     || /\      ||       | \\  / ||    | \\ |  ||    ||  ||__//  ||    ||   ||_//   \\__       ||      ||    |     \\   /      \\   \\  /      \\'      \\/       //   
  /    \\    ||  \\  ||       ||   ||  ||       ||      ||   ||   ||    ||     ||      ||     ||' \\     ||       |  \\/  ||    |  \\|  ||    ||  ||      ||    //   ||\\        `\     ||      ||    |      \\ /        \\ / \\/       /\\       ||      //    
_/_    _\\_ _||__//   \\__/  _||__//  _||__/|  _||_      \\__/|  _||_  _||_  __||__  \_//    _||_  \\_  _||__/|  _|_  '  _||_  _|_  \|   \___//  _||_      \___/\\  _||_\\_  |\__//    _||_     \\___/        \/          \/   \      _/  \\_    _||_    //__/|

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. He...
- created a custom font to get his preferred aspect ratio of 16:29, as well as ensuring 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, five,
Live shader-like coding but with an ASCII renderer: link
Collaborative ASCII art, like r/place but over SSH: archived
More collaborative ASCII art and messages: https://www.yourworldoftext.com/
Snake, 2048, and freecell games over SSH, with color and global highscores: ssh play@ascii.town
Tetris over ssh: ssh playnetris.com
Claim a parcel of screen estate and make a square of ascii art: tilde.town cadastre

ASCII Face Maker; here's sample output:

      .-'~~~`-.      
      |·.....·i      
      |·.....·i      
    .~!·.....·!~.    
    `·.._____..·'    
    ))! ~   ~ !((    
   (((~[=]-[=]~)))   
   i)))  .L.  (((i   
  ((((! (/-\) !))))  
   ))))       ((((   
  ((((/`~---~'\))))  
 _i))))-.___.-((((i_ 
'(((((         )))))`

and her creative homepage, and other tools, here: adelfaure.net

Some websites put ASCII art in a /humans.txt file, as an easter egg: for example, netflix, disqus, html5rocks, and adultswim

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. Be careful not to mix the light ones with the heavy ones - especially if your terminal emulator overrides the glyphs. See alacritty's builtin_box_drawing config option, for example. See also the discussion in the Windows Terminal repo.
tput cols; tput lines: print terminal screen size
tput cvvis or tput civis: show or hide cursor (very visible versus invisible). See also tput cnorm
A list of ANSI codes / escape sequences, with explanations: gist. See also man console_codes
The history of escape sequences: video
Web tool for creating ANSI codes based on desired stylings: link
Fast image and video conversion to terminal ANSI code output: batimg
Some cool things to telnet into:
- Watch starwars with telnet towel.blinkenlights.nl, or watch the web port at asciimation.co.nz
- Zoom and pan around a world map with telnet mapscii.me
- Watch a globe move across the screen with tput civis; curl -s http://artscene.textfiles.com/vt100/movglobe.vt | pv -q -L 9600
On creating terminal emulators, and the associated challenges:
- Mitchell Hashimoto mentions some IO throughput optimizations for the Ghostty terminal, among other great devlogs
- Stress tests to evaluate rendering accuracy and performance: fire animation, Sonic ANSI art, UTF-8 torture test, UTF-8 sampler of different languages (which is more of a webpage stress test)
- An overview of weird character widths that terminal eumulators must support

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" != "cañ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
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
An example use case for splitting strings: chunking messages at word boundaries, instead of at a naive byte size limit that potentially splits joined codepoints. Read more at Chunking strings in Elixir: how difficult can it be?, in which the author used bstr
Utility that breaks a string into unicode points: unicoder.glitch.me

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
- U+FE0F: variation selector, and what I call "emoji updater" in my head. Example: \u2764 is 'heavy black heart' ❤, whereas \u2764\ufe0f ❤️ is 'red heart emoji'. This doesn't work on Android, though - maybe they both point to the same glyph in Android's emoji font.
- జ్ఞా : a Telugu symbol made of several codepoints that crashed Apple devices briefly in 2018 (explanation)
- U+A66E: ꙮ, a stylized "O" that only appeared in one 15th-century manuscript when a scribe wanted to add some flair to the spelling for "many-eyed seraphim". It's called the Multiocular O.
Vim tip: (normal mode) ga
Shows the codepoint of the character under the cursor. See also g8.
- Example: with cursor over ✓, ga echoes <✓> 10003, Hex 2713, Octal 23423
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 ✓
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 also chkfont
A website that sells unicode arrow merch: unicodearrows.com

updated March 2024