1

Can you think of a way to replace all characters of a paragraph/string with another text or unicode chars using css? My point is to show this text as "obfuscated"/hidden.

Let's say I have a paragraph, I would like every character to be replaced with a unicode char like this: http://www.fileformat.info/info/unicode/char/2588/index.htm. This is one way but I couldn't implemented without javascript. Another way I thought is using SVGs, but I am not able to think of a more specific way.

Right now, we use Blokk font and it works great, but I want to do it without having to do an extra call for one more font.

I know this is mostly a theoretical question, so I don't expect you to provide me the exact answer with code. I would rather know if someone has an idea that I could work on.

Naele
  • 510
  • 2
  • 10
  • Possible duplicate of [How can I replace text with CSS?](http://stackoverflow.com/questions/7896402/how-can-i-replace-text-with-css) – jmargolisvt Jan 18 '17 at 16:46
  • I've already tried that. If I use a pseudo element, it doesn't replace my text, it just adds new text in the beginning/end of the paragraph. So, in that way I'm replacing all the paragraphs with the same text, no matter how long they are. I don't want that. – Naele Jan 18 '17 at 16:51
  • This... is not a question? "Yes, I can think of one" but that doesn't help you in any way and [isn't a good question/answer pair for Stackoverflow](/help/on-topic). If you have a question about a specific idea you already had, and that idea requires programming, and your attempt at doing so didn't work out, then that's a thing to ask about on SO. – Mike 'Pomax' Kamermans Jan 18 '17 at 23:26
  • Create you own obfuscated font – Kevin Brown Jan 19 '17 at 17:41

1 Answers1

0

You could use background-color and set it to the same color as the text itself. This doesn't actually change the content, but may give the results you are looking for.

For example:

.hidden {
  background-color: #000;
}
.hidden:hover {
  background-color: transparent;
}
<p>
Here is some <span class="hidden">hidden</span> text.
</p>
Dryden Long
  • 10,072
  • 2
  • 35
  • 47
  • This is the first solution I thought but for larger texts that a word, the result is a black square and it's very ugly.. I could use that for words or single line paragraphs and find a more generic solution (like using pseudo elements) for larger paragraphs. – Naele Jan 18 '17 at 16:53