30

Spoilers are usually not quotes. But currently spoilers (after clicking) look exactly like blockquotes. So the reader has to memorize which paragraphs he clicked (spoilers), and which were already visible (quotes). Such memorization is distracting and the need for it can be avoided.

Compare:

It is revealed that Harry is a wizard.

vs

You're a wizard, Harry.

A different hue with same lightness would be not so colorblind-friendly, but would be a great start. Maybe additionally a big symbolic quotation mark like on other websites would be appropriate.

Edit: This improvement should be implemented directly on the SE website. It shouldn't be reserved to users who have the time, tech skills, and access rights to install userstyles.

In the wake of this improvement, it could also be made clearer that spoilers are clickable and not only hoverable.

  • 1
    It would be cool if we could set personal rendering preferences in our profiles. For example, I usually don't care about spoilers spoiling stuff, so it'd be cool if I could just set a rendering option that suppressed the hiding. – Nat Nov 12 at 0:11
  • This isn't much of an issue on the mobile site or apps. – Sonic the Reinstate Monica-hog Nov 12 at 0:11
  • This is something that can be done via user styles, and IMO this should be done by user styles. – muru Nov 12 at 2:25
  • 1
    @Nat I have a CSS-based solution for that as well in my answer. – Glorfindel Nov 12 at 6:05
  • 2
    Huh, today I learned that I can click on a spoiler and it stays visible. Up till now I was always hovering over them. – Kyralessa Nov 13 at 10:17
10

The spoiler feels very 1998. It reminds me of the <marquee> tag, but I like it.

I think the current spoiler-guard

If you saw this text before you knew this was supposed to be hidden I haven't done my job.

isn't clear what it is. At first it just looks like the poster made a mistake and left a blank box.

 

The spoiler shouldn't reveal what is under it on flyover. It should require a click.

It should be clearer that it hides some information from the UI at a first glance. Gray can would work well against black text. Stripes help indicate it is a type of "scratchable screen" -

spoiler guard

Don't look now, but CSS 3 supports candy stripes

<style>
.spoiler {
  background:repeating-linear-gradient(
  135deg,
  #fff,
  #fff 15px,
  #eee 15px,
  #eee 20px
  );
}
</style>
<p class="spoiler">
    some spoiler text
</p>
  • 2
    For what it's worth, on mobile it says "click to show spoiler" and you have to press the quote box. On the desktop version of mobile it's just a blank box though whose text is invisible until you tap it – Medix2 Nov 13 at 7:01
  • 1
    @Medix2 or flyover – bobobobo Nov 13 at 7:14
  • 2
    Re "The spoiler feels very 1998": And blinking ads? – Peter Mortensen Nov 13 at 13:57
  • 1
    @PeterMortensen 1999 – bobobobo Nov 13 at 15:11
6

As @muru notes in the comments, this can be done by user styles; small snippets of CSS which can be added to a webpage with an extension like Stylus. The first block below adds a quotation mark to blockquotes; the second one changes the background of a spoiler block to the 'scratchable screen surface' from @bobobobo's answer.

blockquote:not([class=""]):not(.spoiler) > p::before {
    content: "“";
    font-weight: bold;
    padding-right: 10px;
}

blockquote[class=""], blockquote.spoiler {
    background:repeating-linear-gradient(
        135deg,
        #fff,
        #fff 15px,
        #eee 15px,
        #eee 20px
    );
    border-left: 2px solid #bbb;
}

Results (after I clicked on the spoiler in your question):

enter image description here

Probably somebody with more CSS skills / better ideas than me can make something nicer. In particular, I'd like the quotation marks to become larger without increasing the height of single-line blockquotes (which is what happens if you add e.g. font-size: 2em).

The main trick here is that a blockquote element for a quote has no class attribute at all, while a spoiler has class="spoiler" before clicking and class="" after; that's the only CSS-accessible way to distinguish them.

There are other browser extensions which can do CSS enhancements; I'd avoid Stylish for reasons mentioned here.


If you need a CSS-based solution to disable spoilers altogether, as mentioned by @Nat in the comments, you'd need something like this:

.spoiler:not(:hover) > * {
    opacity: 1;
}
.spoiler:not(:hover) {
    color: inherit;
}
  • This improvement should be implemented directly on the SE website. It shouldn't be reserved to users who have the time, tech skills, and access rights to install userstyles. I guess your suggestions are meant as a draft for an SE-wide change. – root Nov 14 at 14:24
  • 1
    Many improvements to the network have started out as userscripts/userstyles. – Glorfindel Nov 14 at 14:25

You must log in to answer this question.

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