Question

I have a little website where I would like to obfuscate some text to protected spoiling of users that accidentally read it untimely.

Much like the keywords on imdb were, where you have to rollover to reveal them.

I thought it would be a nice and interactive way to reveal the text if its marked.

Example:

How does a programmer express
h(is)|(er) love? Zl srryvatf sbe lbh
ner uneqpbqrq.

Now you would drag mark the obfuscated text much like you would get ready to copy it to your clipboard, and it should reveal.

Is there a way to do this? My current problem is a way to determine the current selection in javascript.

Answer 1

There is one tricky way I can think of with only CSS:

Use the same color text as the background color! Then when users highlight, the text is revealed. You would need to outline or draw attention to the part that they need to highlight to make it obvious.

Another way:

Stuff the rot13 into a readonly text input, and attach a select event with an AJAX call that decodes it. Will only work for smaller bits of spoiler text that fit in the input. You could try this with a textarea but it doesn’t accept the readonly attribute (maybe doesn’t matter).

There are many many other ways to do this (hide/show divs for example), but these are the closest/simplest ways I could think that match your requirement of selecting text to trigger the spoiler.

EDIT: With the background color solution, you would not want to encode the text, just make it “invisible” until it’s highlighted. It’s actually a pretty cheesy solution, and there are many others that are better, but the good part is that it is css only. Honestly I think forcing a complete highlight will be a pain for your users, just store the rot13 value in one place, the real value in another (hidden span maybe), and use js to swap them out on click or something. No need to actually process the decoding separately. You could probably do this with CSS alone and some smart :hover or :focus selectors.

EDIT2: For some reason it didn’t occur to me that you can do rot13 decoding with javascript alone, I’m coming from the php world so now I feel pretty foolish. Sorry I didn’t answer your question better, but hopefully some of this is useful. GL!