Scytale Cryptography in CSS

The scytale (or rail-fence cipher) is an ancient method of encrypting text using a wooden rod and a strip of leather. It isn’t at all secure but it does still prevent a casual observer from reading your text and it is easy to implement.

I’m always interested in unexpected/weird things you can do with vanilla HTML/CSS and I found a simple way to implement a “scytale-like” cipher with no javascript.

You can see a demo on my website.

When you open the demo you see a “random” jumble of letters but if you hover over the text it suddenly becomes readable! You can look at the source to confirm that no javascript is being used. Can you figure out how it was done?

Now is this useful? Maybe if you wanted to hide some information from a spider/bot and didn’t want to encode the information in an image. It also makes it really annoying for a casual user to copy/paste your content.