Does JavaScript have to be used for spoilers?

[Rebeka23]

I use NoScript to speed up websites on an old computer I have, but it makes it impossible to view the content of any spoiler here. Is that something tightly integrated into phpBB or can that be fixed somehow?

[Comfed]

Not an admin, but I believe that spoiler buttons use Javascript, yes.

[Doge Land]

Not an admin, but I believe that spoiler buttons use Javascript, yes.

That wasn't the question. The question was if the spoilers have to be tied to JS as a part of the integrity of the forums.

Now for OP: I'd think so. Spoilers are a pretty major part of the forums, and if the whole forums is written in something dependent on JS, they'd have to rewrite the whole thing.

[[violet]]

JavaScript is required for most kinds of interactivity on the web, yes. It's not possible to implement that feature in a sensible way without it.

[Trotterdam]

It's actually possible with HTML 5, which is recognized by most modern browsers.

Code: Select all

<details><summary>Spoiler</summary><blockquote>You should only see this if you click on the header.</blockquote></details>

Testing suggests that my browser recognizes this even if the document is still incorrectly marked as using an older version of HTML, so it shouldn't cause issues with old forum software.

A more low-tech method used by some websites is to set the text foreground and background colors to the same color, so it's only visible when selected.

Code: Select all

<blockquote style="color:transparent">You should only see this if you select the text.</blockquote>

[Doge Land]

It's actually possible with HTML 5, which is recognized by most modern browsers.

Code: Select all

<details><summary>Spoiler</summary><blockquote>You should only see this if you click on the header.</blockquote></details>

A more low-tech method used by some websites is to set the text foreground and background colors to the same color, so it's only visible when selected.[code]<blockquote style="color:transparent">You should only see this if you select the text.</blockquote>[code]

I know what you're talking about, and it is not the same. Even if the admins did implement that, it'd call for a major design overhaul i.e. it looks bad

[Trotterdam]

I know what you're talking about, and it is not the same. Even if the admins did implement that, it'd call for a major design overhaul i.e. it looks bad

You'd need a little custom CSS to make the "<summary>" part look more like a button. Other than that it'd look identical to the current system.

Maybe not even that. Just using

Code: Select all

<summary><button>Spoiler</button></summary>

or

Code: Select all

<summary><input type="button" value="Spoiler"></summary>

seems to work, which would allow using the already-existing forum code with minimum hassle.

A major difference it that it would fail-open rather than fail-closed on browsers that don't support it, but that's probably a good thing (now, opening spoilers on browsers with JavaScript disabled requires mucking around with "Inspect Element"), and there shouldn't be many of those left^[citation].

[[violet]]

It's actually possible with HTML 5, which is recognized by most modern browsers.

Oh my! I was unaware of that one. I'll check it out. It looks like a great solution.

[[violet]]

A test! Styling may not appear properly due to browser caching, but once it does, it should look very similar.

Traditional spoiler:

This is the secret content of a traditional spoiler.

Proposed replacement spoiler:

Show Spoiler

This is the secret content of a new tag in testing, "spoiler2." DO NOT USE THIS TAG in your posts, because it will stop working once the testing period is over.

Testing line one two

Show Spoiler

Inline contents

three four.

Traditional titled spoiler.

Click Me Too

Testing new titled spoiler.

[Holland DS6]

I don't really use spoilers that much, it almost feels like the suggested spoiler is less obvious that you can click on it, I mean it has that triangle, but you could probably get it with special characters

[Merni]

I don't really use spoilers that much, it almost feels like the suggested spoiler is less obvious that you can click on it, I mean it has that triangle, but you could probably get it with special characters

It is also a button exactly the same as the previous one, just with the triangle inside, so I don't really see the problem.

One problem I do see is the contents of the spoiler seem to appear on the same line as the spoiler button itself. (using an iPad on iPad OS version 13.3.1, will check on desktop and phone later).

Edit: OK, it looks like it's pretty inconsistent. On Android (v 10, Nokia 4.2) I got:
With DuckDuckGo browser v 5.65.0 it works entirely correctly, puts the contents on the next line, also with the arrow inside the button.
With Firefox v Daylight 80.1.3 it shows the content on the same line as the button and the triangle is also missing inside the button.

On Windows 10 (v 1909 build 18363.1082):
With Firefox (v 78.0.1) it's the same as Firefox on mobile (ie. no arrow and the content appears on the same line as the button)
With Internet Explorer 11: The spoiler is permanently open and cannot be closed. The content appearsappearance similar to Firefox.

[Trotterdam]

Proposed replacement spoiler:

Show Spoiler

This is the secret content of a new tag in testing, "spoiler2." DO NOT USE THIS TAG in your posts, because it will stop working once the testing period is over.

You need to enclose the spoilered text in <div> so it doesn't open on the same line as the button, but otherwise it works great.

It is also a button exactly the same as the previous one, just with the triangle inside, so I don't really see the problem.

I don't even see the triangle. I do see them on unstyled <details><summary> examples, so I guess the forum CSS overrode it somehow.

Not a problem, I'd think, considering the old spoiler buttons didn't have triangles and nobody ever complained about that.

On inspection it seems to be the "display:inline-block" part confusing the browser somehow. Remove it makes the triangle reappear, but also makes the button as wide as the page rather than being shrunken to fit the text.

If you really want the triangle (or cross-browser consistency), you could fix this easily enough by applying the button CSS to a separate tag placed inside the <summary>, rather than the <summary> itself, and then leave the <summary> with the browser default style (mine appears to use "display:list-item"). This should also fix the "spoilered text appears on same line" problem without needing the <div>. The triangle would appear outside the button though.

With Internet Explorer 11: The spoiler is permanently open and cannot be closed. The content appearsappearance similar to Firefox.

Who still uses Internet Explorer? Even Microsoft has phased it out in favor of Microsoft Edge.

[Merni]

With Internet Explorer 11: The spoiler is permanently open and cannot be closed. The content appearsappearance similar to Firefox.

Who still uses Internet Explorer? Even Microsoft has phased it out in favor of Microsoft Edge.

2.6 - 5.3% of desktop browser users, apparently. Certainly I know of a few people who still use it on Win XP or 7. But I agree supporting it shouldn't be a priority, I just tested it out because I had it.

I also agree regarding the triangle - it isn't necessary, but it appearing on some browsers and not others is weird and should ideally be fixed. The bigger issue is the inconsistent placement of the content, though.

[Trotterdam]

I also agree regarding the triangle - it isn't necessary, but it appearing on some browsers and not others is weird and should ideally be fixed.

I've done some tests. The only way I can find that put the arrow inside the button while also sizing the button to the label was to mark the <summary> with "float:left" (and then put the spoilered text in a "<div>" with "clear:left" or "clear:both"), which seems a bit inelegant.

Putting the arrow outside the button is easier.

The bigger issue is the inconsistent placement of the content, though.

That's very easy to fix.

[Comfed]

A test! Styling may not appear properly due to browser caching, but once it does, it should look very similar.

Traditional spoiler:

This is the secret content of a traditional spoiler.

Proposed replacement spoiler:

Show Spoiler

This is the secret content of a new tag in testing, "spoiler2." DO NOT USE THIS TAG in your posts, because it will stop working once the testing period is over.

That looks... not the best, and it takes up more space than a traditional spoiler, which is problematic for people who have lots of content in their sigs and use the spoiler tag to get around the rules. But, I’m not an admin, that’s just my opinion. But I would like to see what it looks like in sigs.

[The Unified Missourtama States]

A test! Styling may not appear properly due to browser caching, but once it does, it should look very similar.

Traditional spoiler:

This is the secret content of a traditional spoiler.

Proposed replacement spoiler:

Show Spoiler

This is the secret content of a new tag in testing, "spoiler2." DO NOT USE THIS TAG in your posts, because it will stop working once the testing period is over.

I mean if it works it works! I do agree with others in that the styling doesn't fit with the rest of the site, but yay! all praise due.

[Doge Land]

A test! Styling may not appear properly due to browser caching, but once it does, it should look very similar.

Traditional spoiler:

This is the secret content of a traditional spoiler.

Proposed replacement spoiler:

Show Spoiler

This is the secret content of a new tag in testing, "spoiler2." DO NOT USE THIS TAG in your posts, because it will stop working once the testing period is over.

That actually looks interesting. I think that could work.

Cross-browser support would be needed though, because as said here:

On Windows 10 (v 1909 build 18363.1082):
With Firefox (v 78.0.1) it's the same as Firefox on mobile (ie. no arrow and the content appears on the same line as the button)

[Gandoor]

A test! Styling may not appear properly due to browser caching, but once it does, it should look very similar.

Traditional spoiler:

This is the secret content of a traditional spoiler.

Proposed replacement spoiler:

Show Spoiler

This is the secret content of a new tag in testing, "spoiler2." DO NOT USE THIS TAG in your posts, because it will stop working once the testing period is over.

That looks... not the best, and it takes up more space than a traditional spoiler, which is problematic for people who have lots of content in their sigs and use the spoiler tag to get around the rules. But, I’m not an admin, that’s just my opinion. But I would like to see what it looks like in sigs.

Eh? Maybe it's different on your browser (cause it seems like there are different appearances on different browsers) but on Chrome, it actually takes up less space than the regular spoiler tag.



Like that is actually somewhat smaller than the current tag.

[Leppikania]

That looks... not the best, and it takes up more space than a traditional spoiler, which is problematic for people who have lots of content in their sigs and use the spoiler tag to get around the rules. But, I’m not an admin, that’s just my opinion. But I would like to see what it looks like in sigs.

Eh? Maybe it's different on your browser (cause it seems like there are different appearances on different browsers) but on Chrome, it actually takes up less space than the regular spoiler tag.

-snip-

Like that is actually somewhat smaller than the current tag.

You need to clear your caches. Your browser hasn't seen the updated stylesheet yet.

Also, TIL you can do this in plain HTML.

[Gandoor]

Eh? Maybe it's different on your browser (cause it seems like there are different appearances on different browsers) but on Chrome, it actually takes up less space than the regular spoiler tag.

-snip-

Like that is actually somewhat smaller than the current tag.

You need to clear your caches. Your browser hasn't seen the updated stylesheet yet.

Also, TIL you can do this in plain HTML.

So I did and it's like 0,5 milímetros bigger than the old style.

Wow such a massive difference.

[Almonaster Nuevo]

A test! Styling may not appear properly due to browser caching, but once it does, it should look very similar.

Traditional spoiler:

This is the secret content of a traditional spoiler.

Proposed replacement spoiler:

Show Spoiler

This is the secret content of a new tag in testing, "spoiler2." DO NOT USE THIS TAG in your posts, because it will stop working once the testing period is over.

Fwiw: These look almost identical and work correctly on the latest Firefox/Ubuntu combo.

[Trotterdam]

The difference between those two buttons probably can be fixed with a close audit of the relevant CSS, if that's really something we're interested in.

[[violet]]

A couple of little updates. The main difference is that Firefox will put spoiler text on its own line now.

I don't see any need to force different browsers to make their spoiler buttons look the same; if Chrome wants to add an arrow, that's fine with me.

[[violet]]

Who still uses Internet Explorer?

2.6 - 5.3% of desktop browser users, apparently.

Only 0.8% on NationStates. And a good chunk of those are using IE versions even older than 11, soooo...

[Doge Land]

Haha, just cleared my browser cache. The new spoilers look a lot better, I'm going to be honest.

I like how the letters are sleeker and the triangle looks nice.