Scratch – Random webding

Posted: 14 June 2026

Continuing my incremental NetNewsWire theme build. Version 14 (Scratch – XKCD restored) fixed a bug that removed images from image only posts. This version adds a little delight to NetNewsWire’s system message view.

This page left intentionally blank

When no feed is selected or multiple articles are selected in NetNewsWire, the article pane displays a single line of text: “No selection” or “Multiple selection”.

This is rendered with a single <h3> with a class of systemMessage. No theme template is not touched for this view — this HTML cannot be customised:

<body>
	<h3 class="systemMessage">No selection</h3>
</body>

Disappointing perhaps, I had some exciting ideas for making use of this space. Not to despair though, the other file in our theme stylesheet.css is inserted in the <head> (omitted above).

With CSS available we’re out of excuses (have you seen https://a.singlediv.com!?).

SF Pro is 34,465 glyph tease

Call me unambitious, but I was looking for something a little less time consuming than one of Lyn’s incredible illustrations. Initially my thought was something somewhat typographic. Perhaps a decorative glyph or symbol. So I started by looking at the fonts I’m already using in Font Book.

SF Pro boasts a huge library of symbols! I’m not sure how it works exactly, but these symbols do not appear to be mapped to unicode code points. So even though I’m on a Apple device with the font I can’t use them in a WebView.

I want an icon with the system message. Emoji are the wrong vibe.

Good old Webdings to the rescue

Venerable Webdings have been around since Internet Explorer 4.0. In the era of dial-up internet, a bunch of pictures that visitors already had on their machine was a valuable feature.

Unlike SF Symbols, since being folded into Unicode, Webdings are universally* available. Specifying Webdings is as easy as font-family:Webdings; in CSS.

* Update: obviously I failed to test this on iOS, where it turns out Webdings is not an available font. For NetNewsWire this is not a problem on the small screen of an iPhone, where the empty article state goes unseen. But on iPad, which now features the dreaded empty unicode box, this is no good at all. I’ll figure something out and fix it in version 16.

I just need to choose one. Or do I?…

Freedom from choice

I liked the idea, perhaps because the empty state is otherwise unchanging, of including an element that changes between views. My hope of doing this with JavaScript were dashed before I remembered new Webkit supports CSS random(). No JavaScript necessary.

A random Webding! People will apply their own significance to the symbols they roll.

Turns out I did need to choose one and random content is tricker than I expected.

A reminder that updating Safari doesn’t update Webviews

I have Safari 26.4 installed on my machine, but random() does nothing in the NetNewsWire article pane on my machine. What gives? As the heading says, the WebView used in apps such as NetNewsWire uses webkit like Safari does – but not the same Safari.

The reason random() isn’t working for me is I remain a Sequoia hold-out. Pretty sure I need to ‘upgrade’ to Tahoe first. Bummer. At least if I upgrade now, post 2026 WWDC, I have can feel assured Golden Gate is an improvement (especially for Webkit).

For Sequoia at least, I chose the enigmatic levitating business man, and tested the randomness in Safari for now.

CSS random doesn’t do strings

Imagine my surprise when I discovered strings, like those you might place in a pseudo content property, are not an acceptable type in random(). A workaround I haven’t tried is to use randomly generated custom property in a bunch of @container style queries. Mostly because a “bunch” in this case is over 200!

Instead I’m calling on a method almost as old as Webdings, a sprite sheet. Inserting all the symbols and clipping them so only one is visible at a time. To make this work I needed to have them wrap to one ding per line. Webdings is a variable with font. Then using random() to apply a negative margin to reveal one of the set.

The relevant CSS:

.systemMessage {
	--ding-size: 3rlh;
	--ding: random(0,221,1);
	text-align: center;
	display: grid;
	grid-template-rows: var(--ding-size) auto;
	justify-items: center;
	overflow: clip;
	
	&::before {
		content: "";
		font-family: Webdings;
		font-synthesis: none;
		font-size: var(--ding-size);
		line-height: var(--ding-size);
		margin-block-start: calc(var(--ding) * var(--ding-size) * -1);
		inline-size: min-content;
		word-break: break-all;
		overflow: clip;
	}
}

In Sequoia, when random() doesn’t work, you get the first in the list:



Install

To enable a quick switch between different versions of this theme I’ve generated a zip of each version – incorporating the version number in the name:

Get the latest (or previous*) versions on the Scratch project page.

* If you’re using NetNewsWire on iPad, perhaps stick with version 14 for now.