Logo for "Nota Bene / non-blog" goes here. NB main page

Along with navigation links.

Wide Illustrations in Normal Text

The Problem

30 May 2008

A particular forum I visit, using I.P.Board software, has an annoying issue with posts that contain wide images. The message that contains the image will be widened to that size. Only that message is affected, not the entire page, so that is some mitigation. But the paragraphs of that message will be perhaps too wide to read comfortably or worse, require you to scroll the window back and forth to read at all!

Clearly, it could be better. At the very least, the illustration only should scroll, and the paragraphs surrounding should match the chosen window size with liquid flowing text.

This first figure illustrates the most basic way to do this. This paragraph, like the rest of the main article, will flow to match the window size and font size chosen at the client end. But if you make your window narrower that 1200 pixels, you will see that the illistration will scroll horizontally.

a wide picture

Actually, an even simpler thing is to simply write:

<DIV style="width:100%">
<IMG src="Hero-comparison.jpg" alt="a wide picture">
</DIV>

But that makes the entire page scroll horizontally. Even so, it does not make you scroll to read the text! To put the scroll bar on the illustration individually, use the following code:

<DIV style="width:100%; overflow:auto">
<IMG src="Hero-comparison.jpg" alt="a wide picture">
</DIV>

The wide illustration is wrapped by a <DIV> that is pegged at the proper width, so the stuff inside it won't make your paragraphs too wide. Meanwhile, the contents of the <DIV> will itself scroll if it doesn't fit. The value of auto means to provide some platform-appropreate scrolling mechanism, if and when needed. An alternative value of scroll means that scroll bars will always be present, even if not needed. In this case, it would cause a needless vertical scroll bar to show, and the horizontal scroll bar would not vanish when you make the window wider.

Better coding would be to leave the explicit style attribute out and have that in the style sheet rules. This will be more so once we start getting fancier. But the point is, that's not at all difficult, is it?

<DIV class="wide">
<IMG src="Hero-comparison.jpg" alt="a wide picture">
</DIV>
a wide picture

Looks the same? Well, try clicking on it. The special effects require Javascript. With scripting disabled, you get the basic behavior seen in the earlier examples. This kind of graceful fallback is also necessary, as not everyone will have scripting available or enabled. It is currently not working in IE6 (sometimes?) but works in Firefox and should work in any standards-complient browser.

The Javascript simply changes the class of the IMG element to "widefit" when it is clicked on. Or, if it is already of that class, it is removed to put it back the way it was. The click event is added to all DIV elements that are of class wide when the page is loaded. The event handler sees if an IMG (inside such a DIV) is what was actually clicked on, and adds or removes the class attribute.

Meanwhile, the CSS contains a style:

IMG.widefit {
	width: 100%;
	}

And this will cause the image to be resized to fit its parent, the DIV that is already the proper width of the paragraphs.

Of course, you could get much fancier, without having to update the HTML page. The installed scripts and auto-generated content based on the basic HTML content could provide zoom controls, context menu, and various viewing options. Putting the script in its own file means that improvements to one place will affect the entire site, without having to change all the content HTML files.