14 August 2008

Spaces on the web

In the old days we were taught to leave two spaces after a full stop. Unless you're trying to reproduce an old letter in Courier, though, that's a rule you can forget now, especially on the web.

Thought of this when someone asked me about spaces on the web. The basic rule is that web pages don't recognise any more than one spacebar space. The reason is mainly because spaces need to have a flexible size (eg for justified text). I usually find that it is no problem and you should use a table where you simply need to separate things more.


Occasionally, I suppose there will be a desperate need to have more space and a table won't do what you want. In those instances, there are a couple of tricks:

The space gif
Make an image the size you need (or, if you don't know, make one that is 1 pixel wide and 1 pixel high). Save the image as something like space1x1.gif. Then you can put as many as you need next each other to build up an 'invisible' space. Beware, though, as images can move when browser windows are resized but small ones ought to be OK. They need to be aligned correctly or may break text lines where you don't expect! (You can do this simply in Serif DrawPlus, GIMP or similar or may be able to do this in Paint but you must save it as a transparent gif. If you can only make a bmp in Paint then use Irfanview to save as a gif afterwards.)

The text colour cheat
Just type something to fill the space required and change the colour to the background of that part of the page. This is a quick and dirty fix, and will only work if you have a solid colour background, a very tight texture or can be sure that the text is placed over an appropriate part of an image the same colour.
Beware, though, that some people's browsers may change text on web pages to a default colour and show it after all (pretty rare) and if they were to highlight the text by dragging the mouse across the page your text will show (possible) and, of course, printing the page may well include your text, either because white text is printed as black or because the browser is set not to print web page backgrounds thus revealing the fix (common)!

The code for a space is #nbsp but, as I said, browsers seldom seem to recognise two in a row. The moral of the story is, basically, find another way to present information and use a table. It's like Word in many ways - you should never, ever, use more than two spaces in a row in word processing and I can't quickly think of an occasion when, in fact, I would use more than one nowadays.

No comments: