Document format that mimics intfiction.org spoiler redacting

General Off-Topic Discussion
1

Hi all. I was wondering if anyone could recommend a file format that can provide a spoiler redacting style, similar to what we have at intfiction.org.

The reason is I am creating a document about IF and I want to provide examples from games without spoiling them. The document is currently text and the only option in text is to encode the spoiler in ROT13 and I would rather have a simple mechanism that is built into the file format.

I am thinking Markdown (.MD) right now. Does anyone have any other ideas or suggestions?

Thanks.

1 Like
2

Spoiler-hiding is a question of presentation style. (For HTML documents, like forum pages, it’s CSS and Javascript.) Markdown says nothing about presentation style. You can use Markdown, but you’ll still have to make the decision about the CSS/Javascript that gets used to display it.

The forum uses CSS blur styles:

filter: blur(0.5em);

…together with a bit of Javascript that removes that style on click.

(It’s possible that there’s a way to do this with only CSS; I’m not sure.)

3

A venerable alternative is to display the text in white on a white background, and then ask the user to select or highlight the paragraph to read it. You can do this in a completely static document (CSS only). However, mobile web browsers have different ideas about highlighting so this trick tends not to work on phones.

4

You can use the “hover” attribute to show the text when the mouse pointer is on top of the text without any Javascript involved.

Regarding file formats, LibreOffice allows for hidden text based on a variable, e.g. a checkbox:
https://help.libreoffice.org/7.0/en-US/text/swriter/guide/hidden_text.html

https://help.libreoffice.org/7.0/en-US/text/swriter/guide/conditional_text.html

1 Like
5

This came up for me recently…

Spoilers with CSS only-- no javascript 
.spoiler {
  filter: blur(0.3em);
  transition-property: filter;
  transition-duration: .4s;
}
.spoiler:hover{
  filter: blur(0.18em);
}
.spoiler:focus{
  filter: blur(0em);
  outline: none 
}

In use: <p class="spoiler" tabindex="0">spoiler paragraph</p>

The text gets less blurry on hover and completely sharpens when clicked.

The tabindex is required because there is no onclick pseudo element for CSS and so :focus is used instead.

Also consider the <details> html element for an html only solution.

details, details, details.
2 Likes
6

:focus, right, that’s the CSS modifier I was trying to remember.

Keep in mind that :hover has no meaning on mobile browsers. :focus will work, but not :hover.

7

Good point. The CSS I provided should still work for mobile, though. You’ll go from blurry to sharp in a single tap without the intermediate phase provided by hover.

What I’d love to figure out is how to make an invisiClues class. You’d scrub over the text with the mouse like the marker to reveal the text below, which would eventually fade back again. Certainly it could be done with JavaScript. I don’t know if it could be done with pure CSS, though.

Edit: Well this is pure css. So, maybe?

1 Like
8

Also I believe that the blur filter does absolutely nothing if you’re using a screen-reader, so that’s something else to keep in mind.

2 Likes