I've made a comment in the thread about the spoiler markup about this, but I think it deserves a feature-request now - we've been getting a lot of use of the spoiler syntax on gaming.

The spoiler box is great but it could really use some sort of message telling viewers it's a spoiler, otherwise it looks like a badly-formatted answer on first glance - especially for users unfamiliar with SE sites, the kind of users we also cater for and try to draw.

I think having some sort of "SPOILER - hover over this to reveal text" message is important. If this is technically too difficult, maybe just add it as a small-font red message just above the block.

Mockup time!

mockup 1

mockup 2

  • (Still +1, as I like it!) – Arjan Nov 16 '11 at 21:40
  • 2
    @Arjan although my suggested solution does solve the problem in the question you linked, I wouldn't say it's the same - my problem is not that it looks the same as empty block quotes, but that it isn't clear on first glance that you need to hover to see the text. – Oak Nov 16 '11 at 21:50
  • I don't think the other question is really about empty block quotes either (nobody uses empty block quotes). Also, the text of that other question is quite clear to me. – Arjan Nov 16 '11 at 21:54
  • As an aside: note that the mobile site does this already. – Arjan Nov 16 '11 at 22:04
  • This question captures the issue much better than the other, especially in the question title. – Ben Brocka Nov 16 '11 at 22:28
  • 2
    True, @Ben, and it does get attention. But it would also get attention for the duplicate, if closed as such. (Too bad that one is status declined; maybe that's a good reason to leave this open...) – Arjan Nov 16 '11 at 22:34
  • 2
    I have a problem with this being closed, the other one was considered "not a problem" because no one would make empty block quotes. In reality the problem is the affordance of spoilers! Unless it's officially decided that we don't want spoilers to look like spoilers this isn't a dupe. – Ben Brocka Nov 16 '11 at 22:37
  • @Ben, I disagree. The other was answered (and rejected) by Jeff as such, but the question clearly states "I suppose the author should include something that says 'Spoilers below:', but it would be nice if there was some other indication of what it was." (That aside, I'm happy that this post created some attention for the feature request again!) – Arjan Nov 16 '11 at 23:21

+1 For drawing more attention to the highly upvoted comments you referred to by making this feature request.

I think the reason for this being not yet implemented would be:

  • The spoiler indicator as text will mess up the blockquote block when all text is selected,
  • The spoiler indicator as background image will mess up the style with custom browser settings.

As for the first point, the most acceptable solution I came up with is:

<blockquote class="spoiler">
    <ins>Hover to reveal spoiler</ins>

.spoiler {position: relative}
.spoiler ins {position: absolute; right: 0; bottom: 0; color: #666; text-decoration: none}    
.spoiler p {color: #eee}
.spoiler:hover ins {display: none}
.spoiler:hover p {color: #000}

Any drawbacks with this implementation?

See this example fiddle for more possible solutions.

  • Nice. I wonder if the mobile site uses the same pre-cooked (cached) HTML as the regular site does. If it does, then this might be troublesome. But in that case the mobile implementation should work just fine on the regular site as well. – Arjan Nov 16 '11 at 22:22
  • Well, actually, I'd argue that even if that implementation were instated, it's actually poor HTML, semantics-wise. "Hover to reveal spoiler" isn't at all a part of the page's content, it's an indication of function - it would be much better off as a pseudo-element. (Granted, this would reduce browser support, and I don't know what kind of support SE sites have) – Nightfirecat Nov 16 '11 at 23:56
  • @Nightfirecat Sure, semantically incorrect. Hence the ins tag to give at least sóme meaning for its presence. As for browser support, see which-browsers-are-officially-supported. – NGLN Nov 17 '11 at 0:16
  • @NGLN: Adding the <ins> tag just furthers the incorrectness, semantically. A span would be better suited, because (to my knowledge) there is no HTML tag that fits this role correctly. – Nightfirecat Nov 17 '11 at 0:25

If you want this, you can just add it to your answer:

SPOILER - hover over this to reveal text:


Where else would you put it?

I disagree that it's always needed; this feature is rarely used.

  • 9
    The spoilerbox feature is used rather a lot on SciFi.SE and other sites about cultural rather than technical topics. Not that I'm arguing that this feature request is really important, just that the spoiler markup gets used. – dmckee --- ex-moderator kitten Nov 16 '11 at 20:04
  • 2
    This would yield a double indicator text on the mobile site (where the hovering part is even wrong). – Arjan Nov 16 '11 at 22:32
  • @Arjan - Oops, didn't know that it did that on the mobile version. – Kevin Vermeer Nov 17 '11 at 0:13

Not the answer you're looking for? Browse other questions tagged .