I was just thinking about a way to hide all text from a website to put focus on the elements that are there when no content is present.
Does anyone know of a tool, CSS hack or bookmarklet that can achieve this? I have played around with some font replacement bookmarklet, but I'd rather have everything disappear completely.
This is what I like to call reverse wireframes. It's very useful to see how your site has evolved over time OR to take a preexisting website and deconstruct it and pick it apart.
The tool I use is: Wirify and can be used on most any page buy just clicking the bookmarklet.
Just drag the below code to your bookmark bar and click it to turn the page into a wireframe.
javascript:(function(){wf_bookmarklet={ver:'1.5',ka:86400000,to:7000};if(typeof%20wfInit=='undefined'){var%20s=document.body.appendChild(document.createElement('script')).src=(document.location.protocol=='https:'?'https:':'http:')+'//www.wirify.com/client/wirify.min.js?'+parseInt(new%20Date().getTime()/wf_bookmarklet.ka);window.setTimeout(function(){if(typeof%20wfInit=='undefined'){alert('Wirify%20is%20still%20processing%20or%20temporarily%20unavailable,%20please%20try%20again%20in%20a%20moment\n\nVisit%20%20twitter.com/wirify%20%20and%20%20www.wirify.com/blog%20%20for%20latest%20announcements');}},wf_bookmarklet.to);}else{wfInit();}})();
Here is a bookmarklet that will make all the text transparent:
javascript:(function(){var tag=document.createElement("style");tag.type="text/css";document.getElementsByTagName("head")[0].appendChild(tag);tag[(typeof document.body.style.WebkitAppearance=="string")?"innerText":"innerHTML"]='* { color:transparent!important; }'})();
To get this to work, add a new bookmark and copy this code for the URL. It will change the text to transparent, preserving the width and height of the text elements.
Note: It will not always cover 100% of the text since the color attribute could be marked with !important inline with the elements or in classes, nor will it effect images that contain text.
If it's for internal viewing only, it's a very simple 1 line code change in CSS.
If it's going external on a hidden url, or to external clients, it's still a 1 line code change in CSS, but there are caveats. The main one being browser support. As long as you view it in Chrome or FF, or a recent IE version (9+), you'll be safe.
Firstly, download Blokk Font from http://blokkfont.com/
If it's internal If you know how to do it yourself, set the font-family to the newly downloaded blokk font. As you have it on your own machine, it will work no problem in any browser you look at it. Read more about font-family here : http://www.w3schools.com/cssref/pr_font_font-family.asp
However, rather than set it on single elements (p, ul, li etc) set it on body, and it will apply to all text, rather than just single items.
If it's external Use an attribute of CSS3 called @font-face. It basically 'sends' the font along with your page. There's an issue around using that with copyrights and distributing this freely. I'll let you look into all that, but will definitely do what you are looking for. Check out : http://www.font-face.com/ for more details. As I previously mentioned, this only works with recent browser versions.
The bonus with using a purely CSS solution is it will work with JS off if you are also designing a non-JS experience.
Bit of a geeky tech answer, but then I used to be a techy geek!
Hope this helps.
---- EDIT ----
Reading your question again, I'm not sure what I've suggested is what you are after. Your actual question asks for all the text to be removed completely, but your image looks like you are after the Blokk font method as I've outlined above.
If you want to completely get rid of your text so you can design, I would advise against it. Might be a controversial comment, but if you don't know what your content is, how long it is going to be, it might be quite dangerous/costly coming up with a design that won't fit the content. It's easy to line items up in Axure or photoshop or your tool of choice, but then when the real content comes is, it always poses more problems.
For me, both need to go hand in hand. Content and design.
Although you mention you'd "rather have the text disappear," your attached picture shows something quite different.
Assuming you want the blocks like the picture, you can use ExitText: a bookmarklet I created that turns text into scribbles.
For example, ExitText will convert regular text into something like this:
I wrote about the creation of the ExitText bookmarklet on my blog and found that dynamically converting text into square blocks looked much worse than expected, and the scribbles gave a much higher quality result.
Additionally, I found that this technique is good for uncovering text that has been embedded inside images -- a big no-no for accessibility and translations.
