Proper spoiler tag

Started by Simon, September 20, 2012, 06:32:58 AM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

Simon

Hi,

marking text as invisible, unless selected with the mouse, is currently done by [quote][color=#dee7ef]bla bla bla[/color][/quote]. Drawbacks of this method:
  • There is no obvious incline why either color="#dee7ef", color="dee7ef", color=#dee7ef, color=dee7ef should be right (only the third one works), people must rote-learn this.
  • People also have to learn by rote the hex number in the first place.
  • Always generates a new paragraph and a box, even for just a single word.
  • Depends on the global choice of layout colors (though this is unlikely to change).
  • Such workarounds are always physical markup, not logical markup.
I therefore wish for an explicit spoiler tag, [spoiler][/spoiler] or something. It should be applicable to inline text. The easiest method might be to make the background the same color as the text (set both to black).

-- Simon

Proxima

Always generates a new paragraph and a box, even for just a single word.

You can use the color tag on its own: [color=#ffffff ]text[/color] for white or [color=#afc6db ]text[/color] for light blue.
Ceci n'est pas une message <-- Like this.

Simon

I believe post background colors aren't universal when people select a different number of posts per page, but I haven't tested.

geoo and I use a custom stylesheet that colors the post backgrounds lighter than usual for legibility, which I value over inlined spoilers. >_> I didn't alter the layout of quote boxes, so the existing spoiler method still works.

Another drawback is that you have to explicitly tell people that there exists hidden text in the post, otherwise they won't highlight it.

You'd also have to remember the exact color number and tag syntax, although it allows inlining.

-- Simon

ccexplore

I've seen someone here done it this way, which would allow for inlining, as well as stylesheet and theme (eg. background color) independence.  Like this (highlight to read):

Code: [Select]
Like this
(I don't know for sure what the numbers in the "glow" tag actually mean, I just set them to the biggest values allowed.  And you do need matching "color" tag even for black text, as apparently the default text color inside a black glow tag is slightly off-black http://www.lemmingsforums.com/Smileys/lemmings/huh.gif" alt="???" title="Huh?" class="smiley" />.)
The color=#dee7ef way has just become habit for me though by now, so that's why I did what I did. http://www.lemmingsforums.com/Smileys/lemmings/winktounge.gif" alt=";P" title="Wink-Tongue" class="smiley" />

[edit: forget it, only works on old browsers, more in a separate post]

Simon

The example looks like the attachment for me (Firefox 3.5)... in the CSS, I didn't touch anything for the related tags, I just increased the overall font size.

Even if there were an existing workaround with physical markup, a logical markup would really help.

-- Simon

Clam

I believe post background colors aren't universal when people select a different number of posts per page, but I haven't tested.

I did a quick test: even-numbered posts are blue and odd-numbered white, independent of posts per page setting.

There's yet another issue with the method, that I've seen on this forum - deleting a post early in the thread flips the background colours of all subsequent posts.

I get the same result as Simon using the "glow" tag, except on Internet Explorer where it actually works. I don't plan to switch back to IE just for that http://www.lemmingsforums.com/Smileys/lemmings/wink.gif" alt=";)" title="Wink" class="smiley" />

ccexplore

Darn, even on IE9 apparently it doesn't work unless you turn on "compatibility mode" (which I guess I've left on for such a while I've forgotten all about it).  In fact without compatibility mode, the glow and shadow tags just don't seem to work at all in IE9 (outside of compatibility mode)!  I'm guessing that probably isn't the "right" behavior either, maybe they'll finally get it right in IE10. http://www.lemmingsforums.com/Smileys/lemmings/undecided.gif" alt=":-\" title="Undecided" class="smiley" />

(Hmm, wonder now how some of those gold results look in my "undamaged level" post......)

In older browsers (maybe just IE) where it worked, the glow got so thick that it basically becomes the background, and that's how it works to conceal when the text color matches.  Without this behavior I don't have a good workaround at the moment.

Definitely having dedicated tag for spoilers would be great, but with the admins hardly ever around these days, I'm not holding my breath for that.