🖌️ 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!

Drawing of Horton the elephant

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:

Love that album soooo much. It’s a classic! Looking forward to everything else you do.

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:

This is fun. =)

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 ❤️

Likes

Photo of Joe JenettPhoto of Josemar LohnPhoto of Marty McGuire

Comments

You can leave a comment here via webmention! Note that I moderate webmentions manually, so it may take a few days to appear.

↩️ REPLY from Kicks Condor on
  • 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

Aha - since you’ve got Webmentions up, let’s do this!

Hey Jacob! I’m familiar with your website - I covered your linkroll in Directory Uprising.

It’s really comforting to see you interested in projects like directories and whostyles that aren’t necessarily protocols - which the Indieweb can get very focused on. Whostyles are definitely a tough one to turn into a protocol - since CSS evolves over time and it’s tough to know how to restrict the styling. (But it’s also important bc perhaps you don’t want to load a bunch of whostyles that blow up your site.)

Your introduction of all: revert is exciting - didn’t know about that!

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.

So this is exactly what I do as well - just manually create the whostyles and apply them once I get into a longer dialogue with someone. This gives me (and hopefully you now) plenty of time to mess with whostyles in the field.

Over years of reimagining ourselves online, it would be very complex to create styles that properly support everything we’ve written.

This is another thing I think about as well - and I guess I was going to take it on a case-by-case basis. If h0p3 has a new style, I might make a new ‘h0p3_2’ style for him - or might just update the old stuff if it makes sense.

Ok - as far as your proposals, they look good! My original plan was pretty shaky - so am glad to see improvements. Just feeling a lot of gratitude that you took the time and have energy to put into it.

I guess, as a bit of additional response, I should also mention that I’ve thought about doing this as a JSON format rather than as CSS.

Here’s a look at the JSON format we’ve been using for Multiverse box styles.

{
    "header": {
        "color": "#6B1173FF",
        "back": "#B6B5A8A5"
    },
    "main": {
        "fill": {
            "type": "Solid",
            "color": "#FAE9FF00",
            "back": "#FFFFFFF2",
            "direction": "vertical"
        },
        "border": {
            "color": "#000000",
            "style": "none",
            "radius": 0
        },
        "shadow": {
            "type": "None",
            "color": "#B6B5A8A5",
            "style": "plain"
        },
        "highlight": {
            "type": "None",
            "style": "plain"
        },
        "text": {
            "font": {
                "family": "Roboto"
            },
            "fill": {
                "type": "Solid",
                "color": "#6B1173FF"
            }
        }
    },
    "title": {
        "fill": {
            "type": "Solid",
            "color": "#FAFAFA00"
        },
        "border": {
            "color": "#2DC0A6FF",
            "style": "dotted_1px",
            "radius": 0
        },
        "shadow": {
            "type": "None",
            "style": "plain"
        },
        "highlight": {
            "type": "None",
            "style": "plain"
        },
        "text": {
            "font": {
                "family": "Red Rose"
            },
            "fill": {
                "type": "Solid",
                "color": "#17C27FFF"
            }
        }
    }
}

For fonts, we could keep an expanded list of font names that are supported - or at least a kind of registry - just like browsers already understand Verdana, Arial, Courier, etc.

So perhaps this paired with a font registry format would do the trick. I don’t have a strong preference tho - and am just throwing this out there.



➡️ REPLY from Jacob Hall on

Hey Kicks, thanks for the thoughtful reply. It's so rewarding to have a working demonstration of whostyles right out the gate like this. Maybe this reply will display on your site using my whostyle? 🤞

If h0p3 has a new style, I might make a new ‘h0p3_2’ style for him - or might just update the old stuff if it makes sense.

Yes!!1! I'm thinking of adding a table to my database with the hash of each whostyle I receive, and having my webmention endpoint compare incoming whostyles against those hashes to determine if it is unique or not. Critically, the class name of the whostyled element won't differ between versions of the same h-card's whostyles. This will allow my site to automatically assign every post the correct whostyle class for the author, and then load in the appropriate whostylesheet for that post.

I guess, as a bit of additional response, I should also mention that I’ve thought about doing this as a JSON format rather than as CSS.

I'm fascinated by JSON as a storage format for CSS, and it isn't something I've thought about before. My knee-jerk reaction is that it'll have to be converted to CSS somehow, and it might be easier to have our front-facing whostyles in pure CSS. That said, if JSON would allow us to do more with our styles, I'm all-elephant-ears. Whatever we decide on, I'm hopeful we can both walk away from this conversation with interoperable whostyles

Multiverse

I would very much like to interact with Multiverse users via webmention, whostyles and all.

✌️❤️🐐



↩️ REPLY from Maya on

h/t kicks condor

Okay I'm like one of the probably-fewer-than-ten people in the world with a defined whostyle, so obviously I'm psyched by this.

Having a list of people (defined by h-cards) and an offline tool to traverse their sites, grab the whostyles, sanitize the CSS, rescope the selectors, and repackage for your own site seems like a totally valid approach to me. That way the sanitizing could improve over time without having to respec inter-site dynamic inclusion.

If you wanted to be properly agnostic about it, I'm sure you could make something like a Jekyll plugin to handle specifying the origin of the blockquote and kicking off finding the h-card and doing the style pull for that within a static build.





↩️ REPLY from Josemar Lohn on

I’m trying to indiewebify my entire site. Still a work in progress, but now I have full support to webmentions and, I hope to send whostyles. I think I made everything all right. Next step is to support receiving whostyles too.

Kicks Condor and Sphigmus, I can’t say how much I loved it!

Maya, I think we are almost ten now.