Greek text in html

Question

Is there a way to “Greek” HTML text to hide it with css and / or javascript, as shown here:

All columns have plain text. Columns 2, 3 and 4 have “Greek” text. Clicking on them displays plain text, and the "Greeks" show the first column. I need the characters to be replaced in some way with squares, as shown in the figure, or a similar symbol. Thus, they are hidden, but the length of the text, words, paragraphs, everything is preserved.

Answer 1

Maybe you can do it in css. The Blokk font is free and includes a web font that you can download via @ font-face. Then you can change the font with the added (or deleted) active class or with javascript to any desired animation.

Answer 2

You can use your own font, where each character is a square. You can then switch between readable font and custom font by changing the CSS style. The disadvantage would be that the user could copy the text and paste it into a text editor to make it visible.

- . javascript, HTML. .onload , unicode ■ (codepoint 0x25a0). .innerHTML div , .

, . , , , .

Answer 3

jquery , jQuery, onmouseout. , ,

$('#div').on('mouseover',function(){
     $(this).css('color','transparent');
     $(this).css('text-shadow','0 0 5px rgba(0,0,0,0.5)');
}).on('mouseout',function(){
     $(this).css('color','black');
     $(this).css('text-shadow','none');
});

Answer 4

■. ( ) -

string.replace(/(.)/g, "■");