Make HTML content not react on search (Ctrl+F)

Question

In my web app I have a layer with a static HTML content that displays a text.

When I do a search on a page (ctrl+F) and type some text that is contained in the layer

Answer 1

It's tricky but you could write the text of your layer as the CSS content property of a layer pseudoelement. In this way the search functionality is not able to detect the text, and the text itself can't be highlighted.

e.g.

Html

<div id="layer" data-text="this text won't be found"></div>

Css

#layer:before {
   content: attr(data-text); 
}

---

Also the image solution is fine but this would require an extra request and the text couldn't be zoomable everywhere using default browser functionality. Other solution requiring Flash (or also Silverlight or Java Applets) should be avoided, especially due to the lackness of the player plugin for some platforms.

Example fiddle (with CSS attr()) : http://jsfiddle.net/EbTNd/