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.