🖌️ Horton Hears a Whostyle

🖌️ Horton Hears a Whostyle

Published on August 6, 2021

Back in 2018, Kicks Condor, sphygmus, and others came up with "whostyles." The idea is that when a website displays a post reply that was written by someone else, the reply is displayed using the style (i.e. CSS rules) of that person's website. A couple weeks ago, I was chatting with Angelo and Maxwell at a Homebrew Website Club meeting, and we came across this idea. I feel like it would fit right in to our webmention dreams at the IndieWeb, and I thought it would be fun to implement whostyles on my own site. This is my attempt to do so!

Illustration by my talented partner Alyssa

some example whostyles

Importing my own style is redundant, so let's try importing someone else's whostyle: Kicks! This is a reply to Eryk Salvaggio they posted on Twitter a while back. Hopefully they won't mind me re-posting this for demonstration purposes:

If you've visited Kicks' site, you'll immediately recognize that as their post. It's almost creepy to use his styling, as if I summoned him to be with us right now…and that's exactly the point of whostyles! I don't intend to use Kicks' style on my own work, both because doing so would be unoriginal and I like my own style. But if Kicks were to post a reply to something I've written, wouldn't it be awesome if their words were always styled how they would style them, even on my site?

Let's try quoting someone else using their whostyle, this time h0p3. h0p3's style is one of the examples provided in Kicks' demonstration, and is unique to the ones we've tried so far because it has its own font! I'll quote a short remark h0p3 posted in this conversation last year:

Even a brief comment is made much more individual by its style!

making it happen

My implementation of whostyles ended up veering pretty far from Kicks' original vision. I'd love to hear others' thoughts on the matter, and I'd be happy to adjust my own site's whostyle system to better work with yours.

scoping CSS styles

On Kicks' whostyles page, they discuss putting comments in iframes that load their own style sheets. There are good reasons for sandboxing comments like that, as CSS is a powerful tool that could be abused by commenters. But to be honest, iframes feel like too much infrastructure for my site, and I don't want to expect others who want to load my whostyle to feel obligated to use them either. I'd rather use raw CSS — I figure I'll have to moderate it anyways — which aligns with my values to keep things simple. I propose that at the beginning of each whostyle class selector (see below), "all: revert;" is specified to revert all styling for that element to the browser default. This effectively gives the whostyle writer a blank slate: they can inherit the host site's styling if they want, or revert everything and do things their own way.

Kicks' proposed standard uses the CSS class .whostyle to confine someone's styling to the post element. For my own implementation, I plan to edit the CSS class name for each post to reflect the domain of the original poster. I propose that whostyle class names start with whostyle, and then followed with the URL of the person's h-card, with all slashes and periods replaces with hyphens. This makes whostyle classes easy to guess, and unique to the poster. For example, a post of mine would have the class .whostyle-jacobhall-net

style inheritance

If I comment on your site, I can expect that you'll style my post whichever way you like. If I comment on your site with a whostyle, it's reasonable for me to expect that the element my comment appears in on your site will inherit the CSS rules of your site. Managing whostyles this way will make it easy to make minor changes to one's post, for example you could just add a font and allow the parent site to handle the rest.

If you would like to style your comment from scratch, there is a CSS property called all and keyword called revert, that have decent browser coverage. To revert all CSS rules to the client browser's defaults, begin your whostyle with all: revert;

.whostyle-jacobhall-net {
	all: revert;
	/* add styling here */
}

moderating whostyles

My larger plan for this site involves a full comment moderation system, so I already intend to read everything that people send me. Given the scale of my site, and the relative geekiness of whostyles as a concept, I'm not too worried about how many CSS rules I'll have to manually review day-to-day. When my webmention endpoint receives a webmention, it will sniff the source site for a whostyle. If one is detected, it will be downloaded and presented to me as a part of the comment moderation process. I will review the rules within it, making sure that it a) doesn't do anything naughty and b) doesn't completely break my site. Perhaps if this becomes a burden, I'll invest more time writing a script to do the editing for me.

updating whostyles

An I've often heard within the IndieWeb has to do with the historical "look" of one's site, and if it should be maintained in old posts even after a new style has been adopted. I plan to re-theme this site from time to time, and when I do so I will intentionally leave this article with the CSS it was written in, for example. I don't want to force people to support all of their previous comments with their current whostyle! Over years of reimagining ourselves online, it would be very complex to create styles that properly support everything we've written.

If your whostyle is identical to the last one you sent me, my website will automatically use it without the need for moderation. If you update it, my moderation system will have me review the changes and then your new post will have the new style.

my proposal in a nutshell

• whostyles are defined using <link rel="whostyle"> tags in the <head> of a post page
• the class name of a whostyle element is "whostyle" and then the URL of the poster's h-card, with spaces and punctuation replaced with hyphens (e.g. whostyle-jacobhall-net)
• when writing a whostyle, assume that you inherit the CSS rules of the parent website
• whostyles should be stored and linked per-post rather than per-poster

remaining issues

I really, really want to support fonts in whostyles. It feels like the single best way for a writer to style their work, and would breathe a whole lot of life into the comments section. The problem is, font licensing can be messy, and it's hard to know where a web font is coming from! Not only that, but I don't really want to be linking to external resources like Google Fonts from my site. Feel free to add comments to your whostyle with font you want to link, and how I could add it as an asset on my site for your use. If you have ideas for making font linking safer or more convenient, I'd love to hear your thoughts!

final notes

There are so many people in the IndieWeb who are doing cool things right now, and I'm excited to grow an interoperability between my site and those it connects to. Building a more personalized social web requires this sort of innovation!

I've finally flipped the switch so that my website will accept incoming webmentions. My IndieWeb implementations are a work in progress, so much so that you might want to email me a notification of your reply as well 😂 But with a little luck and some more tuning, I'll learn to trust my webmention system, and hopefully use it to conduct more of my interactions Out There. So, send me a webmention, perhaps with a whostyle! It might take me days to properly accept it, but that's the only way for my website to improve. Or just be in touch, and let's chat about how to make our computers talk to each other in cool ways.

TTFN ❤️