How to Format Spoilers

As a film critic and a UI programmer, I’ve long thought about the perfect way to format spoilers. (A spoiler is some part of a movie review that gives away a secret or a surprise.)

In print, critics give a written warning to readers that there are spoilers ahead. But on the web, we have more options — we can format the spoiler text differently to give a visual cue, or we can force the readers to do something to reveal the spoiler such as rolling over, clicking, or selecting hidden text.

However, just because we can do something on the web doesn’t mean that we should. Make the formatting too gimmicky and it distracts from the text. Make the formatting too subtle and it just looks like a mistake.

I’ve never been a big fan of the way the Internet Movie Database handles spoilers. Check out their page on The Sixth Sense and look down at the “Plot Keywords” section. You’ll notice a graphic that reads “Spoiler alert! Rollover or vote to view plot keywords!”

IMDB covers spoilers with graphical text

I think completely covering the text is overkill. For some movies, plot keywords really are spoilers, but much of the time they aren’t. Plus, the graphical text looks different from the rest of the surrounding text, which makes the page look more haphazard. In short, it wasn’t good enough for me, so I decided to stick with the conventions of print, and just use my words to warn readers about spoilers.

But I changed my mind when I saw what Bryant Frazer did on Deep Focus. His review of Enter the Void has a section labeled “spoiler territory.” I like it because you can still read it without using your mouse. I like that it’s easy to spot where the spoilers are without having to skim the text. I like that it’s not too gimmicky — it’s just a box with a gray background — and the focus remains on the review and not the interface. So I decided to borrow his idea.

The UI programmer in me had a few things I wanted to change. On Deep Focus, the words “spoiler territory” are part of the text of the article. I wanted the formatting to be entirely CSS. To that end, I used the :after pseudo-tag to label my spoilers section like so:

.spoilers:after {content: "Spoilers ahead"; position: absolute; top: 0; left: 0; ... }

I also thought the words “Spoilers ahead” should be more prominent than the spoiler text, lest a casual reader miss the warning. On Deep Focus, the small red words are less prominent than the spoiler text.

Finally, I thought that if someone wanted to read the entire review, spoilers be damned, it should be easy to remove the formatting and format the text the same way as the rest of the review.

After some tinkering, I came up with a simple rollover effect that changed the default grayed-out view of the spoiler text to a plain view of the text. Because I didn’t want the text to “jump” as you moved your mouse, I decided to keep the margins of the spoiler text when changing between states.

You can see an example of the new Movie Habit spoiler text on Robert Denerstein’s review of Conviction.

Now, to add a spoiler section to a review, I need only wrap the spoiler text in

<div class="spoilers">...</div>

No JavaScript, no server code, just plain CSS and one HTML tag. Perfect.

The only reason I might eventually add a little JavaScript would be to allow mobile-device readers such as iPads to click (or tap) to change the state, since they don’t have a “hover” state.

… And in case you want to steal my idea, here’s the CSS I used:

.spoilers {background-color: #D1D2D4; padding: 1em 1em 0 ; position: relative;}
.spoilers * {opacity: 0.25; }
.spoilers:after {content: "Spoilers ahead"; display: block; opacity: 1; color: #000; font-weight: bold; position: absolute; top: 0; left: 0;}
.spoilers:hover, .spoiled {background-color: inherit; }
.spoilers:hover *, .spoiled * {opacity: 1;}
.spoilers:hover:after, .spoiled:after {opacity: .25; }
This entry was posted in CSS, Information Architecture, UI programming, Web programming and tagged . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s