21

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

Improve this question
8
  • (Still +1, as I like it!)
    – Arjan
    Commented Nov 16, 2011 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
    Commented Nov 16, 2011 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
    Commented Nov 16, 2011 at 21:54
  • As an aside: note that the mobile site does this already.
    – Arjan
    Commented Nov 16, 2011 at 22:04
  • This question captures the issue much better than the other, especially in the question title.
    – Zelda
    Commented Nov 16, 2011 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
    Commented Nov 16, 2011 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.
    – Zelda
    Commented Nov 16, 2011 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
    Commented Nov 16, 2011 at 23:21

2 Answers 2

Reset to default
3

+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">
    <p>Content</p>
    <ins>Hover to reveal spoiler</ins>
</blockquote>

.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.

Improve this answer
4
  • 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
    Commented Nov 16, 2011 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
    Commented Nov 16, 2011 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
    Commented Nov 17, 2011 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
    Commented Nov 17, 2011 at 0:25
-4

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

SPOILER - hover over this to reveal text:

Reveal
Text

Where else would you put it?

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

Improve this answer
3
  • 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
    Commented Nov 16, 2011 at 20:04
  • 2
    This would yield a double indicator text on the mobile site (where the hovering part is even wrong).
    – Arjan
    Commented Nov 16, 2011 at 22:32
  • @Arjan - Oops, didn't know that it did that on the mobile version.
    – Kevin Vermeer
    Commented Nov 17, 2011 at 0:13

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