Scalable Figures and Captions with CSS and HTML

Even though HTML had its origins in the world of scientific communication, it lacks one of the most common elements found in scientific publications: the captioned figure. Support for images by way of the img element has long been present in HTML, but the combining of an image and a caption into a figure is still only possible through the use of table elements or generic div elements. There was a proposal to add a fig element to HTML 3.0, but unfortunately it was abandoned.

This page presents one way to create captioned figures with HTML and CSS using generic div elements that contain img and p elements corresponding to the figure and the caption respectively. This method is noteworthy because it creates scalable figures that retain their relative proportions when the browser window is narrowed or the font size is changed: a figure that occupied 50% of a wide window will occupy 50% of a narrow window as well. It is based on the approach developed by Bert Bos of the W3C, and it extends Bos’s work by preventing over-scaling and by allowing figures to be centered on a page regardless of their intrinsic width. The relevant CSS is all contained in the head of this page.

I am aware of only two drawbacks to the approach demonstrated here. First, because this method makes use of the max-width property, browsers that do not support max-width (such as Internet Explorer 6) will not scale the figures elegantly in some circumstances. (The figures won’t break, but they may become excessively pixellated.) Second, the ability to scale the figures depends on specifying img dimensions in percentages rather than pixels, and this may increase page rendering times.

Examples

Here is a simple example of a scalable inline image with no caption. The width of the img element is set to be 20% of the width of its parent (this paragraph). Narrow your browser window and watch the image scale. The margins and padding can be adjusted as desired in the CSS. Lorem ipsum dolor sit amet, in diam placerat id sapien mattis, eget ut pretium, consectetuer suspendisse hendrerit suspendisse volutpat lectus. Imperdiet lobortis adipiscing risus eros, corrupti vestibulum accusantium suscipit velit. Nulla augue, purus libero. Nunc pellentesque id a facilisis faucibus scelerisque, viverra wisi faucibus, mollis magna, sed feugiat at sagittis viverra. Bibendum adipiscing, ullamco nulla orci, nonummy ut lacinia.

Here is a third-width figure with a simple caption (as opposed to a legend). The figure is a div unto itself and is floated to the right so that in most browsers it will sit beside this paragraph. If you narrow or expand your browser window the figure should scale along with the textblock. The image has an intrinsic width of 230px, so the max-width property of the figure is set at 230px. In browsers that support max-width this will prevent the image in the figure from over-scaling and becoming pixelated in a very large browser window. If your browser does not support max-width, some pixellation may occur when you open the window very wide. The only solution to this problem is to use an original image file with a larger intrinsic size (which would of course increase download times). Taking full cognizance of organizational learning parameters and principles, highly motivated participants will energize a valued-added outcome. By working through a top-down, bottom-up approach, and partnering defensive reasoning with total quality management and the adoption of a proactive stance, the astute manager can adopt a position at the vanguard. The strategic vision—if indeed there be one—is required to identify exploitation of core competencies because an essential enabler measures the process, not the people.

A very elegant aspect of these scalable figures—for browsers that support max-width—is that when they are used on a page which itself has a max-width (as this one does: 43em) the figures scale along with the user’s preferred font size. When the font size is increased or decreased in the browser, the value of em changes: that changes the width of the textblock, which in turn changes the width of the figures. If you’re using a browser that supports max-width, try reducing your browser’s font setting and see. That’s how web typography is supposed to work!