stormdamage.org - Art, Webdesign and CSS.

This is something I get asked about from time to time. The aim is to have some text which is there in the code, but is hidden when viewing the page.

You may be wondering why replacing images with text could be useful. The reasons are twofold. The first reason is to improve your site’s SEO (Search Engine Optimisation). Having a <h1> title makes it easier for spiders to correctly categorise your page, and a relevant and well-worded tag can improve the page’s ranking. However, for reasons of aesthetics, it’s often nicer to have an image as the header, perhaps with a unique font, or your company’s logo. Rather than have this potentially comprise your page rankings, it makes sense to use CSS as an easy way of having a nice looking page and good SEO.

The second reason is to enable accessibility, to maximise the amount of users who are able to make full use of your site. Pages which rely entirely on images for headers and menus are hard to navigate in text-only browsers. This may mean those with screenreaders have difficulty accessing your content.

So how do we go about it? Making the text invisible on the background image with ‘display:none’ would be counted as a potentially devious cloaking method by Google and penalised. This is because it attempts to entirely hide page content from the user. Instead there are two ways we can achieve it:

1. This method is the one I’ve seen most commonly used. Rather than hide the text, it places it far off the left hand side of the screen, where it cannot be seen (except by people with really really big monitors!). The title tag is then given the same dimensions as the image which will replace it:

<h1 id=”replace”>The Title Goes Here</h1>

#replace { text-indent: -9000px; background:url(title.gif) no-repeat; width:200px; height:100px; }

I personally am not a big fan of this method, it seems like ‘dirty’ CSS to me, putting a large negative indent on an element. Though it does seem to work in nearly all browsers with the exception of IE 5, though I understand there are some workarounds for this.

2. This next one is my favoured method, and the one I most commonly use. The thinking behind this one is to cover the text with an image inside an absolutely positioned <span>. Both the span and the title tag are given the same dimensions at the image, so they take up the same space on the page :

<h1 id=”replace”>The Title Goes Here<span></span></h1>

#replace { position:relative; margin:0; padding:0; width:200px; height:100px; }
#replace span { position:absolute; top:0; left:0; background:url(title.gif) no-repeat; width:200px; height:100px; }
#replace, #replace span { width:200px; height:100px; }

Because the image gets its absolute positioning from the parent element, when aligned to the top and left, it sits nicely over the text. However, there are a few slight problems with this in older versions of Opera, which can be solved simply by adding a z-index to the span selector above:

#replace span { position:absolute; display:block; top:0; left:0; z-index:1; }

Of course the problem with both of these methods is that you don’t get to use the ‘alt’ or ‘title’ tags on your images (which is good SEO practise), but I think this is outweighed by the benefits of having relevant <h1> tags, which are more significant anyway.

Tags: CSS