CSS and image captions

7 Comments

Warning: CSS and browser neepery. People uninterested in web design may find the following extremely boring, not to mention incomprehensible.

You'd think that the new generation of web standards (CSS, XHTML, etc) would make it easy to create an image with a caption and have the main body of text wrap around both; but it turns out that there's no standard way to do that (until XHTML 2, anyway), and a great deal of disagreement over which of various quasi-hack approaches is best.

SimpleBits provides a page on image floating; it's presented as a quiz, asking which of three approaches is best, but there are over 70 comments from readers putting forth various opinions and arguments for those opinions. If you have a little CSS background and a little patience, it makes fascinating reading; I kept agreeing with various contradictory arguments.

The W3C provides a CSS tips & tricks page that advocates one of the three approaches (though they oddly leave off the closing /p tags; I'm not sure what's up with that), and gives some interesting related ideas.

But it turns out that some of the approaches suggested on the abovelinked two pages don't work in IE5/Mac; in fact, even the best options on IE5/Mac don't look nearly as good as most of the options look in most other browsers. I eventually had to go with the <br /> approach, my least favorite of the three, just to make it even vaguely decent-looking in IE5/Mac.

And then, on a whim, I tried viewing the page in the latest version of iCab, and discovered that iCab has serious problems dealing with floats in CSS. Yikes.

Further poking around online led me to this very valuable resource: the MacEdition Guide to CSS2 Support in Mac-only Browsers. I suspect (and hope) there's something similar for Windows browsers, but I'll look for that another time. (If any of you happen to know of such an item, please point me to it.)

It's remarkable, and kind of unfortunate, just how different all the different browsers (on all platforms) are. And nearly every time a new browser version attempts to be more standards-compliant, it adds a few new bugs even as it gets rid of old ones. Designers jump through an astonishing array of hoops to try to get things to look good in as many browsers as possible, but sometimes there's little you can do to make things actually look good.

I've long known that there's no hope of making CSS look really good in NS4.x/Mac, but I only recently learned that a lot of simple CSS actually crashes NS4/Mac. Designers have to go through even more convolutions to hide CSS code from that browser so it won't crash, which makes the resulting pages look even worse than I expected in NS4. Very unfortunate.

I used to use NS4/Mac exclusively, but when the number and frequency of crashes became intolerable, I switched to IE5/Mac. And right around the time I really started to hate that browser, Safari came along. These days I use Safari for everything other than testing. I even use the Safari Debug menu to fool certain sites into thinking that Safari is NS6; some sites stupidly refuse to allow you to view them in anything other than NS6, even though they work just fine in Safari if it pretends to be NS6.

7 Responses to “CSS and image captions”

  1. Jay Lake

    Two questions…

    What percentage of users are using anything other than AOL or a recent version of IE any more?

    Where’s the debug menu in Safari?

    Jay

    reply

  2. Jed

    The percentage of users using a given browser depends enormously on who your audience is. As far as I can tell, somewhere between 75% and 85% of the SH audience uses IE; another 10%-15% use some version of NS or Mozilla; Safari around 3%-5%; Opera around 1%-2%. Re AOL: I have the vague idea that older AOL used a customized version of IE, newer AOL uses a customized version of NS, and in the future AOL is likely to use IE again, but I’m not real clear on that. Other browsers, including iCab and lynx, are almost certainly somewhere down below 1% of our traffic, but I have several friends who use each of those, so even if that audience is extremely small I like to keep them in mind when designing pages.

    More generally, one of SH‘s design goals from the very start has been to be readable in any browser. Not always an achievable goal, but I think it’s a good one to strive for.

    Other sites have other audiences. The BrowserNews site provides stats from various sources that suggest that in various places IE accounts for anywhere from 65% to 95% of traffic. Note that anywhere from 0.4% to 13% of the browsers from a given source are “unidentified,” which probably means the less-common browsers are being undercounted (though it probably also includes a lot of webcrawler bots). At a hit-counter comparison page, it appears that IE is only about 55% of the traffic. At thecounter.com, it’s 95%. I can’t find any stats for Slashdot, but I assume the percentages there are heavily skewed away from IE (relative to the stats for the rest of the web, I mean; IE may still be over 50%). Likewise, I assume that the stats for macosxhints.com are skewed significantly away from IE.

    It should also be noted that since Safari is capable of pretending to be various other browsers, it’s likely to be at least mildly undercounted. But relatively few people know that it can pretend to be other browsers, and most of them don’t keep it in that mode because they want to be counted as Safari users.

    Which brings us to the Debug menu. To enable it, quit Safari, then start Terminal and type the following command in a Terminal window:

    defaults write com.apple.Safari IncludeDebugMenu 1

    Then start Safari again.

    For more info, see the macosxhints article about it.

    reply

  3. Amy

    This is a very ignorant question, but why can’t you make a new image consisting of the image and the caption below it?

    I can think of three reasons: you want people who translate the page to be able to read the caption, you want the caption to be searchable, you want people who don’t view graphics to still be able to read the caption. I don’t have a sense of how big a concern any of those would be.

    reply

  4. Jed

    That’s actually a very good question, Amy. I would say the answer depends on your audience and your needs.

    In general it’s not a good idea to include text in an image if the text would work just as well as plain text, primarily because of various contexts in which people can’t easily view images, such as blind people using screen readers, people using text-only browsers, and people using slow connections (dialup, cell phones, etc). However, much of the web still uses graphical versions of text in fancy fonts for buttons and headings, and there are techniques you can use to make such items more usable for people not viewing images. (Using the alt attribute for an image is a good start, but the rules for when to include alt text aren’t as straightforward or intuitive as one might assume.)

    Translation and searching are also reasons to avoid putting text into images. Translation is a big deal in some contexts (like tech writing). In most contexts, searching can be addressed with alt text—though obviously not for individual visitors who want to search the text of the page in their browser without viewing source.

    There are other issues, too. For example, many people want or need to change the font size at which text is displayed in a given web page; they can’t do that if you incorporate the text into an image. The more control you give the site visitor over display, the better. For that matter, if you use certain approaches to the caption issue, you may be able to do things like changing all images sitewide to having the caption above the image rather than below, by changing a few lines of CSS in a single CSS file. Also, incorporating the text into the image means you can’t easily correct the text later if, for example, you find a typo in it.

    Taking a step back from specifics, I’d say the real underlying issue in all of this is a philosophical one. The promise of CSS and XHTML is that they allow creators of web pages to separate content from presentation; the more you can do that, the better your content can be adapted to a variety of presentations. Building text into an image combines content and presentation, and thus makes the content less adaptable. It may well be a tradeoff that a designer is willing to make in the hope of better visuals and easier layout, but it’s a tradeoff the designer should think carefully about before embarking on.

    (And there are other options, too; for example, it’s easy enough to create a little table and display the image in one table row and the caption below it. But that mixes content and presentation even more; part of the point of using CSS is to reduce reliance on tables for layout.)

    reply

  5. Vardibidian

    The more control you give the site visitor over display, the better.

    I’ve always thought this, as well, but I find that surprisingly few sites appear to agree with me. And on the occasions I’ve worked with people on putting together a web page, the people I’ve worked with have always wanted to exert a lot of control over the display, to the point where I stopped making suggestions about what things look like for people who use different font settings and whatnot.

    Redintegro Iraq,
    -V.

    reply

  6. Kenny Smith

    Dude… NOTHING looks good in IE5/Mac. 🙂 IE blows… it’s all about Safari. 🙂

    reply

  7. PUSHPA

    100%

    reply

Join the Conversation