Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

Test

share|improve this question
2  
there's wirify.com but it doesn't only hide texts. it shows the webpage as a wireframe. –  L. Möller Nov 7 '13 at 12:12
1  
Are you looking for greeked text (as your illustration) or a completely empty site with just static elements present? –  Andrew Leach Nov 7 '13 at 14:11
    
There is also BLOKK font and REDACTED font, though I don't know if there are web versions available (which could then be forced into the CSS via JS). –  Erics Nov 7 '13 at 14:42
    
Out of curiosity, what is the objective for doing this? Content is usually the key thing. –  DA01 Nov 7 '13 at 21:47
    
Would * { font-size:0; } work ? As long as no elements relied on font size to swell them –  ColinSharpe Nov 12 '13 at 23:51
add comment

4 Answers

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

Before and after using wirify

share|improve this answer
add comment

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.

share|improve this answer
    
Here's a quick way of creating a bookmarklet if you need to: benalman.com/code/test/jquery-run-code-bookmarklet –  ChrisK Nov 7 '13 at 13:51
2  
This bookmarklet makes all the text transparent, which means it disappears. It doesn't do greeking. That said, it might be just what is required; the question isn't clear. –  Andrew Leach Nov 7 '13 at 14:10
1  
@AndrewLeach - "I've played around with some text replacement bookmarklet, but I'd rather have everything disappear completely." That says to me that making the text transparent would be exactly what the OP wants. –  Shauna Nov 7 '13 at 14:39
add comment

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.

share|improve this answer
add comment

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:

enter image description here

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.

ExitText on GitHub

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.