Mastodon

Drop #787 (2026-10-19): Monday Morning Grab Bag

Nordwand Mono; Pele; For Funsies: Safety Sign Generator

The wee lads were up this weekend to celebrate communal birthdays, so the Bonus Drop becomes today’s normal one with a mix of typography, diagram rendering tooling, and something to take your mind off of gestures wildly.


Nordwand Mono

Nordwand Mono is an OFL 1.1 monospace coding font with a neo-grotesk skeleton, and the designer cites Univers, SF Mono, Alpes Mono, and Ubuntu Mono as influences. It ships seven static weights, 100 through 700, each with an upright and an italic. I built Regular, Italic, Thin, and Bold from source, read the tables with fontTools, and ran test strings through HarfBuzz 14.4.

It does what it says on the tin: the metrics are true monospace and every spacing glyph sits on a 600-unit advance in a 1,000-unit em, and post.isFixedPitch is set. The x-height is 540 against a 710 cap height, so the lowercase reads tall and dense.

For those who required meaningful glyph disambiguation, the zero carries a dot, uppercase I has top and bottom bars, lowercase l and i have feet, and the 1 has a base bar. Character variants add a slashed zero (cv01) and alternate l, f, and m (cv03, cv11, cv12). The italic is a 9.4° shear, but ten lowercase letters get separately drawn italic forms: a, e, f, i, k, v, w, x, y, and z.

Ligatures are minimal (I have a loose memory that some readers are very anti-ligature). Only -> and => substitute (which means I’m removing it from the Zed font default right after this post goes live), as 1,200-unit double-width glyphs. This also means --> becomes a hyphen plus an arrow, thus long ASCII arrows in comments look broken. ss02 duplicates the same two arrows.

DO NOT USE IT AS A TERMINAL FONT. Glyph coverage stops at the coding-set: all of ASCII, 78 of 96 Latin-1 characters, 13 from Latin Extended-A, and 104 Cyrillic codepoints. It has no box drawing, block elements, Braille, or powerline glyphs. tmux borders, TUI progress bars, and spinners fall back to another font whose advance widths need not match 600 units, which means box borders will almost certainly misalign in all contexts.

The section header is this Zed session using Nordwand Mono. If you do use it, put it in an editor for Latin-1 or Cyrillic code, where the dense shapes and default disambiguation pay off (I do like the cut of it’s jib as I’ve been typing this). The OFL permits patches, so a patched build can add the missing terminal glyphs.


Pele

Pele (GH) is a JavaScript library that renders Mermaid diagram source to SVG. It’s raison d’etre is that the Obsidian team felt compelled to build it to enable rendering of diagrams inside the editor that make it easier to match the active theme.

NOTE: You don’t need to be an Obsidian user to take advantage of this library!

I added Mermaid diagram support to my self-hosted cgit a few weeks ago and it only took about ~30m of hacking to get Pele substituted in for it. The diagram in the section header is a PNG of the one in the aforelinked goja repo.

You get tons more than just improved styling. The project’s own comparison table puts the gzip bundle at 230 kB against 1.6 MB for Mermaid.js and lists render times of 0.05–0.3 ms against 6–82 ms. I’m especially fond of Pele having zero direct dependencies against the 23 that are required for the de-facto standard. All these values track with a quickly done local benchmark.

Since I swapped it in, I’ll guide those of you who will try to do the same right to the render() function. It, as one might expect, invokes the main renderer via a synchronous call and returns an object with an svg string. In a browser context, the mount() function renders into an element, reads fonts from CSS, and lays the diagram out again to fit the container width (folks who use the OG Mermaid will painfully know that it scales a wide diagram down on a narrow screen instead). If bundle size matters, pele/core lets you register only the diagram types you use, and pele/lazy exposes renderAsync() to load types on demand.

Pages with no build step can pull it from jsDelivr and convert every pre.mermaid block in two lines:

<script src="https://cdn.jsdelivr.net/npm/pele@1/dist/pele.global.js"></script>
<script>
for (const el of document.querySelectorAll('pre.mermaid')) pele.mount(el, el.textContent);
</script>

Theming is plain CSS. Variables such as --pele-bg, --pele-fg, --pele-line, --pele-accent, and --pele-font set the palette and type, and charts use --pele-series-1 through --pele-series-8. Color changes apply without a second render, so a light/dark switch is a stylesheet change and nothing else.

Pele targets Mermaid 12.1.0 syntax and claims coverage of every built-in diagram type (I have not tested this, but you can verify their claims without an installation via their playground). The parsers run against Mermaid’s own parser specs plus some differential fuzzing. For untrusted input, the library escapes diagram text, filters links and styles, and caps source and output size. You should absolutely read the Security page before you feed it user-submitted diagrams.


For Funsies: Safety Sign Generator

Zippy535 generates industrial safety signs: a DANGER, WARNING, CAUTION, or NOTICE signal word, a symbol, and your text, exported as an image.

Damon Burke wrote the original and hosted it on his personal site at the ERAU Observatory. A site rebuild deleted it in early 2025. @s0 tracked Burke down through web archives, got the source with his blessing, and put the tool back online. The 2026.01 release adds a new layout, unique IDs in output filenames, and path fixes. The code carries a CC-BY-NC-4.0 license, and the page says the source release is still in progress. Bug reports go to @s0@cathode.church on the fediverse.

The page also has a short primer on sign wording. It covers how to pick the signal word from severity and probability, headline style with no articles or forms of “to be,” active voice, and sentence case instead of all caps.


FIN

Remember, you can follow and interact with the full text of The Daily Drop’s free posts on:

  • Mastodon via @dailydrop.hrbrmstr.dev@dailydrop.hrbrmstr.dev
  • Bluesky via <https://bsky.app/profile/dailydrop.hrbrmstr.dev.web.brid.gy>

☮️

Leave a Reply

Discover more from hrbrmstr's Daily Drop

Subscribe now to keep reading and get access to the full archive.

Continue reading