Culture and style

Ever get the urge to style a good document?

No? Just me, then.

Well, the urge came over me recently so I started styling this single-page site:

A Few Notes On The Culture by Iain M Banks

I’ve followed this document across multiple locations over the years. It started life as a newsgroup post on rec.arts.sf.written in 1994. Ken McLeod published it there on Iain M Banks’s behalf.

The post complements the epic series of space opera books that Iain M Banks set in the anarcho-utopian society of The Culture. It’s a fascinating piece of world building, as well as an insight into the author’s mind.

I first became aware of it many few years later, after a copy had been posted to the web. That URL died, but Adrian Hon kept a copy on his site. Lots of copies keep stuff safe, so after contemplating linkrot, I made a copy on this site too.

But I recently thought that maybe it deserved a bit of art direction, so I rolled up my sleeves and started messing around, designing in the browser and following happy little accidents.

The finished result is still fairly sparse. It’s still entirely text, except for a background image that shows up if your screen is wide enough. That image of a planet originally started as an infra-red snapshot of Jupiter by the James Webb Space Telescope that I worked over until it was unrecognisable.

The text itself is the main focus of the design though. I knew I wanted to play around with a variable font. Mona Sans from Github was one of the first ones I tried and I found it instantly suitable. I had a lot of fun playing with different weights and widths.

After a bit of messing around, I realised that the heading styles were reminding me of some later reissues of The Culture novels, so I leant into that, deliberately styling the byline to resemble the treatment of the author’s name on those book covers.

There isn’t all that much CSS. I’ve embedded it in the head of the HTML rather than linking to a separate style sheet, so feel free to view source and poke around in there. You’ll see that I’m making liberal use of custom properties, the clamp function, and logical properties.

Originally I had a light mode and dark mode but I found that the dark mode was much more effective so I ditched the lighter option.

I did make sure to include some judicious styles for print, so if you fancy reading on paper, it should print out nicely.

Oh, and of course it’s a progressive web app that works offline.

I didn’t want to mess with the original document other than making some typographic tweaks to punctuation, but I wanted to break up the single wall of text. I wasn’t about to start using pull quotes on the web so in the end I decided to introduce some headings that weren’t in the original document:

  1. Government
  2. Economics
  3. Technology
  4. Philosophy
  5. Lifestyle
  6. Travel
  7. Habitat
  8. Legal System
  9. Politics
  10. Identity
  11. Nomenclature
  12. Cosmology

If your browser viewport is tall enough, the heading for the current section you’re reading will remain sticky as you scroll. No JavaScript required.

I’m pretty pleased with how this little project turned out. It was certainly fun to experiment with fluid type and a nice variable font.

I can add this to my little collection of single-page websites I’ve whittled over the years:

Have you published a response to this? :


Kevin Marks

@adactio can you explain “By Goîdel out of Chaos” in that? Should it be ”By Gödel out of Chaos” or “By Goídel out of Chaos” ? The former makes more sense to me, but I may be missing a reference

# Posted by Kevin Marks on Monday, January 23rd, 2023 at 1:59pm

Kevin Marks

@adactio 0x94 in Win1252 is ” and in Mac Roman is î, so I suspect that is the encoding transform that happened at some point before utf8 conversion.

# Posted by Kevin Marks on Monday, January 23rd, 2023 at 2:12pm

Jonathan Korman

❝ A Few Notes On The Culture by Iain M Banks [⋯] I recently thought that maybe it deserved a bit of art direction, so I rolled up my sleeves and started messing around, designing in the browser and following happy little accidents. ❞

Jeremy Felt

A was standing at his little Skip Hop table, scribbling on a pad of paper with a purple crayon. I took over and drew a face with eyes, ears, nose, mouth, and a few scraggly hairs.

He pointed at the nose, then at my nose and said “noh”. He pointed at the eyes, then at my eyes and laughed.

And he pointed at my ears and then over to the ears of a stuffed elephant across the room.

Little troll!

As I was helping A up into the chair in his room so that we could read books before bed, I saw a grain of cooked rice on my pants, left over from dinner cleanup. There was no garbage nearby.

So I ate it.

Occam’s razor, indeed.

I hadn’t thought about Vieuphoria in at least 15 years. Last week we were browsing Smashing Pumpkins videos and Michelle told me about a clip of super young Billy she had seen and then all of a sudden Vieuphoria popped into my head and we started watching it for a few minutes.

There’s a good chance I watched the VHS a dozen times back in the day. It’s a documentary that I probably still have memorized and now I’m looking forward to watching it again.

And of course that sparked a nostalgia mode—I really hadn’t thought of my 1997-2003 era Pumpkins obsession in a while—and I ended up browsing old shows on SPLRA. Bootlegs were very common back in the early aughts, but it’s nuts how available everything is now. It was fun listening to bits of Zwan shows from our crazed-fan road trip through Missouri in 2002.

They’ve even transcribed the stage banter!

Okay, now we’re here. Smashing Pumpkins lines:

I waited 14 hours, 10pm to 12pm, outside the Canopy Club in Urbana, IL for tickets to the February 27, 2000 show. None of my friends went with, there was concrete, and it was at least sparsely rainy and chilly.

I waited something like 6 (???) hours outside the Canopy Club on the day of that show. It was worth it because we ended up front and center for the entire thing and James returned my metal horns.

It did mean we missed out Billy taking everyone to IHOP that was waiting outside the record store early in the morning.

I drove up to Chicago from Champaign in my friend’s car and waited something like 6 or 8 hours outside of the Metro for I forget what show, but probably this one, and was literally the next person in line when it sold out.

I waited 10 or 12 hours in the United Center parking lot for tickets to their last shows. I got tickets to the United Center show, but I was too late for the actual last show.

The reason? I changed my brakes earlier that day and somehow didn’t tighten the lug nuts all the way, so turned around when the car started making horrible noises 15 minutes into the drive from Batavia on I-88. I probably would have been a couple hours earlier if I hadn’t dealt with that nonsense.

The strangest part about all of this is that I don’t remember at all if there were restroom opportunities. And the three longest waits, I was in line by myself even though I was buying tickets for a friend as well. Frank, how could you!

I do remember these teaching me that I could sit through anything.

We didn’t have smartphones then, what did we do!?!?

Unrelated, related: I’m pretty sure I saw Spoon in 1998 in Champaign-Urbana, maybe at the U of I student union? But all I really have is a memory of a concert flier.

I’m not writing for a particular audience. The reader in mind is me. If someone else would write these books I could go play golf.

Cormac McCarthy, in a rare response to questions—for two high school AP Language students, nonetheless, via Warren Ellis.

“The reader in mind is me”: I dig it.

Hemingway said to write for two people, yourself and for who you love. Vonnegut said to please just one.

I like Jeremy Keith’s treatment of Ian M. Banks’s 1984 piece, A Few Notes on the Culture, as an example of how licensing your work to allow adaptation can lead to interesting experimentation.

I have a couple long pieces saved as drafts that I’ve referenced over the years. One, which was not explicitly licensed as free and will remain as a draft, inspired the open lab structure we followed at WSU.

The other is George Orwell’s Politics and the English Language, which I very much enjoy, but also think would be fun to remix one day through style and annotation—checks calendar—in 19 years?

Hey, it’s Friday.

# Posted by Jeremy Felt on Saturday, January 28th, 2023 at 12:59am


# Shared by Andrew Woods on Sunday, January 22nd, 2023 at 4:29pm

# Shared by Ben O'Matic on Sunday, January 22nd, 2023 at 5:28pm

# Shared by John Kellden on Monday, January 23rd, 2023 at 10:34am

# Shared by Maxim Leyzerovich on Monday, January 23rd, 2023 at 3:58pm


# Liked by Andrew Woods on Sunday, January 22nd, 2023 at 4:29pm

# Liked by Pete Lambert on Sunday, January 22nd, 2023 at 4:29pm

# Liked by Simon on Sunday, January 22nd, 2023 at 4:58pm

# Liked by Ben O'Matic on Sunday, January 22nd, 2023 at 5:28pm

# Liked by Ben Ward on Sunday, January 22nd, 2023 at 9:01pm

# Liked by Rasmus Kaj on Sunday, January 22nd, 2023 at 9:27pm

# Liked by Alan Dalton on Monday, January 23rd, 2023 at 1:40am

# Liked by Maxim Leyzerovich on Monday, January 23rd, 2023 at 3:58pm

# Liked by Nick Doty on Tuesday, January 24th, 2023 at 5:00am

# Liked by Pirijan on Wednesday, January 25th, 2023 at 10:50am

Previously on this day

10 years ago I wrote Twitter permissions

Don’t be sheeple, tweeple!

14 years ago I wrote Machine-tagging Huffduffer

Hacking Amazon’s API.

15 years ago I wrote Broken

The default behaviour of Internet Explorer’s new version switching is very, very wrong.

18 years ago I wrote Yub nub!

I’m sure I’ve mentioned before that Jamie, head-honcho at Message, has a brother who is a famous act-ohr.

20 years ago I wrote A gallery of travellery

As I prepare for my next ‘plane trip, I thought I’d share these pictures of an airplane journey.

20 years ago I wrote Northwards

Jessica and I are headed to Seattle.

21 years ago I wrote Sheer tastlessness

This banner ad is shocking for two reasons.