October 3, 2013

Idea: A Spoiler Tag

I think HTML needs a <spoiler> tag. Compliant browsers would automatically redact anything contained within it.

For further granularity, you could have support for <spoiler kind=”XXX”> where XXX might be “Breaking Bad” or “US Open” or “Cheers Final Episode” or whatever. Then when you visit a page, your browser would note at the top: “Warning: This page contains spoilers for Breaking Bad, US Open, and Cheers Final Episode” with an option to redact some or all of those things.

Your browser could remember your preferences across websites, so if you chose to redact spoilers where kind=”Breaking Bad” on one site, that will be the default behavior on other sites until you turn it off in the spoilers preferences, which keep a running list of spoiler kinds you’ve encountered.


I thought of a similar thing while reading some of the Star Wars expanded universe books. I wanted to go to Wookieepedia to read up on some backstory, but I couldn’t without also seeing spoilers from the book I was reading. It would be cool if every cited statement on Wookieepedia included a page number or at least book. Then you tell it what you’ve read and what you haven’t, and it redacts appropriately.

A fine idea, but incredibly time-sensitive. What may well be worth protecting with such a tag today is probably not worth it in 12 months time. By then, either everyone knows already, or doesn’t care.

Owen, absolutely not. It should be up to me to decide what I care about or don’t care about.
The only time-sensitivity of this idea is that for any individual user, what they consider a spoiler will change once they’ve actually read/watched/listened to whatever piece of media is being spoiled.

But I must say, as someone who *hates* spoilers, I think this is an absolutely incredible idea. It would be extremely cool if this was implemented and actually got used. Particularly on Reddit.

I guess what you’re saying, Owen, is that some things only need to be temporarily redacted? So how about an attribute expiry=”20140101” or something similar? Then it would only redact up to that date?

Use the HTML5 standardized “data-” prefix for your attributes:

<div data-spoiler="Breaking Bad">
Something happened in the last episode.

You can make support universal with a bit of JavaScript.

You can already do this with custom elements. Some browsers are still lacking the requisite API (in particular the Shadow DOM api) and so require a polyfill to get universal support, but all in all it’s no big deal to create such an element right now.

See here for a basic example:


I’m still not quite convinced. If I am consuming some media that’s more than, say, a couple of years old, I don’t think that society has any responsibility to help protect me from spoilers. Jim and this guy may feel differently.
An expiry attribute is probably not the answer, for two reasons: 1) you’re forcing someone to make an intelligent guess as to when the information contained within the tag will be no longer sensitive, which is nearly impossible to do well; and 2) you’re explicitly saying that beyond a certain date, this particular piece of markup will be useless forevermore. If you could convince web servers to delete (or at least, not transmit) the tag after that date rather than just get the browser to ignore the tag, that might be OK. On the other hand, modern HTML is pretty ugly anyway (e.g. the soup on the page that John links to above), so some extra chaff will probably go un-noticed.

Here’s a demo using the Polymer JS lib:

It relies on Google’s Polymer library that provides support for the proposed Web Components spec John Laur mentioned earlier.

The somethingawful.com forums do this. As does the TV Tropes website. I haven’t seen it done outside of these two sites, however.

Great job Michael Ashbridge!

Custom components are one of the foundations of AngularJS (also by Google and also uses Polymer behind the scenes) and so could easily be put into use with this framework. I attended a presentation on AngularJS a few weeks ago and it was a little mind-bending to say the least!

Owen, I don’t think society has a *responsibility* per se, but that it’s a polite thing to do.
My ideal implementation of this would be that when someone writes something, if they include the spoiler tag, that tag will work for everyone who has that particular piece of media set in their browser to avoid spoilers.

It would be up to individuals to set which shows they don’t want spoiled, and to decide for themselves when to turn the spoiler warning off.

This would remove the issue you’re talking about where the tag becomes useless after a certain period.