Alt text styling


alt text styling

It's one of those things that you don't notice until it's pointed out, and once you've heard about it and realised its genius, is easier to do than it seems.

Upon reading about styling the alt text of images last month, I realised that this was indeed a great idea, as it allowed any readers to distinguish images from other plain text in the event they had disabled images from loading or they were broken for some reason. We don't often see this alt text, but they make a great difference for those that do.

From CSS Wizardry, it is amazingly simpler than what it seems.

img{
    font-style:italic;
	color:#888;
}

Interestingly, testing this has made me consider using more fixed values for my images, rather than allowing image height to be set as auto, as it compresses the height of the image to 0px when the image does not load, and also tends to do the same in various versions of Internet Explorer even when the image does load. This is certainly an issue on various levels, but at least it means my readers will more likely than not not be confused by stray image alt text.

I suppose that's a plus.