Spoilery

Watching the previews for Google Wave, I find myself excited about the new features. There were several things that I had wanted the ability to do, but never pursued them because I was just used to the limitations of the tools.

The extensions are interesting and it got me wondering if there would be one for spoilers. My impression is that spoilers on the web have been handled inconsistently. It would be nice to have a cross-browser and accessible solution.

Simple

Stating "SPOILER ALERT" or something similar preceding the spoiler. Works on the understanding that a user reads top-to-bottom and will see the warning before the spoiler itself and stop reading if they wish to do so.

Variations include using excessive carriage returns as a means to make the warning more visible and/or prevent the spoiler from appearing on the screen with the warning. Large bold text and punctuation design may be used to make the warning more apparent.

In the wild: Wikipedia used to employ this by declaring a warning at the top of the article.

Multiple

Place the spoiler on a separate web page and provide a link to it. Works on the understanding that those who are interested will proceed through the link and those who do not will avoid it.

In the wild: Livejournal's lj-cuts were used as a means of placing spoilers out of sight. Blogs may feature a "Read More" link to reveal the full blog post with spoilers.

Highlight

By selecting black colored text in an element with a black background a spoiler is made visible, assuming that the browser handles selected text with readable colors.

Hover

By mousing over a region that contains a spoiler it is rendered visible. Can be readily achieved in modern browsers with the :hover pseudo-class. Variations also include using the alt or title attribute for spoilers.

Pop-up

Clicking a link opens a pop-up window to the spoiler. Wide adoption of pop-up blocking pretty much killed this technique.

Click

Clicking a button or link toggles the display of the spoiler. Probably the most effective approach if it is built with consideration for those that do not use mice.

In the wild: I've seen this in the Jay is Games comments - where it hides walkthroughs - and Giant in the Playground forums - where it hides not only text but images as well. It's also apparently currently used on the simple version of Wikipedia.

View Source

This struck me at the last moment but it would be possible to put a spoiler in an HTML comment. Probably the most outlandish alternative there is.