Styling the ‘alt’ attribute of images

Why on earth would anybody want to style the alternative text that is used when images cannot be displayed ? Isn’t that text meant for visually-impaired users (who couldn’t possibly care less about the text’s style) or for text-only browsers like Links ?!? Well, not quite. If you sometimes have to suffer through the creation of HTML newsletters, you know that most of the time images are not displayed by default by email clients. In this scenario, the viewer is left with the alternative text in a default font and color. Wouldn’t it be nice if we could change the default styling of alternative text to match the design of our HTML newsletter ?

Unexpectedly (at least for me) this can be done. The key is to style the img tag as if it was text. To show to what extent this is possible, I conducted a little experiment. I sent myself an HTML message that would test various CSS properties and opened it in my beloved Thunderbird 3.1 and in someone else’s much less beloved Outlook 2007.

Here are the results :

Thunderbird 3.1 (on Mac OS X) Outlook 2007 (on WinXP)
background-color Yes  No
color Yes  No
font-family Yes  No
font-size Yes  No
font-stretch No  No
font-style Yes  No
font-variant No  No
font-weight Yes  No
letter-spacing No  No
line-height No  No
opacity  Yes  No
padding No  No
text-align No  No
text-decoration No  No
text-indent No  No
text-transform No  No
word-spacing No  No

As you can see, Thunderbird 3.1 does support some of the most interesting options such as color, font, size, etc. Outlook 2007, on the other end, does not support any. This makes me think that the HTML5 team might want to consider providing guidelines in their next proposal to software makers as to how (or if) alternative text should be displayed.

If you so wish, you can take a look at a screenshot of the results in Thunderbird 3.1 (on Mac OS). If you have time, send yourself the test HTML message and let me know your findings in your favorite email client.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.