javascript - "greeked" text in html - Stack Overflow

admin管理员组

文章数量:1432378

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.

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.

• javascript
• html
• css

Share Improve this question Follow edited Feb 8, 2017 at 14:49 CommunityBot 111 silver badge asked Dec 16, 2013 at 23:36 jpatiagajpatiaga 35233 silver badges1010 bronze badges 5

• 2 Not sure if each letter has equal width, but u can write script to create greekText from orig text by regex (to *) perhaps, and insert display:none in DOM. Then some trigger to greek() and ungreek(). Cool assignment :) – EricG Commented Dec 16, 2013 at 23:40
• Could the letters be blurred instead of squares? – scrblnrd3 Commented Dec 16, 2013 at 23:41
• If you want to preserve the text length and positioning, you could write a script that wraps each letter in a span and set the color and the background-color of the span to the same colour. – kei Commented Dec 16, 2013 at 23:44
• you could regex replace with the ■ character. (medium square) - string.replace(/(.)/g, "■"); – Bryan Elliott Commented Dec 16, 2013 at 23:45
• One question: how do you display the texts in those divs (with <p>, ´<span>, 'plain' text)? – display-name-is-missing Commented Dec 18, 2013 at 3:55

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 7

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 pletely inaccessible to the user before they are allowed to see it, you won't get around a server-sided solution.

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.

Using jquery would make this easier, so here's my jQuery solution that will greek the text onmouseout. Not exactly what you want, but it will be very similar

$('#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');
});

you could regex replace every character in each text container with the ■ character. (medium square) -

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

本文标签： javascriptquotgreekedquot text in htmlStack Overflow