"greeked" text in html

Question

Is there any way to "greek" HTML text, to obscure it using css and/or javascript, as shown in here:

All the columns have normal text. The 2nd, 3rd and 4th columns have "greeked" text. Clicking on them shows normal text, and "greeks" the first column. What I need is that the characters somehow get replaced by squares, as shown in the picture, or a similar symbol. This way, they are hidden, but the text length, the words, paragraphs, everything is preserved.

Answer 1

You could use a custom font where every character is a square. Then you can switch out between a readable font and the custom font by changing the CSS style. The drawback would be that the user could copy the text and paste it in a text-editor to make it visible.

Another option would be to substitute the content strings itself. Store the content of each column in javascript, not in HTML. In the .onload handler you generate an obfuscated version of each string where every non-whitespace character is replaced with the unicode character ■ (codepoint 0x25a0). Then you assign to the .innerHTML of each div either the obfuscated or the unobfuscated version.

This option would still allow cheating by looking at the sourcecode, though. When you want the text to be completely inaccessible to the user before they are allowed to see it, you won't get around a server-sided solution.

Answer 2

You might be able to do this in css. Blokk font is free and includes a web-font you can load via @font-face. You could then swap the font with an added (or removed) active class, or with javascript on whichever animation you want.