Notes on monospace, fonts, ascii, unicode

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
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 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
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" != "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

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 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 Nov 2023