Dynamic resizing of figures and images (supporting traditional typography)

[Robert J. O'Hara]

I'm one of those people who practices what some consider "dull" and
others consider "elegantly conservative" page design. I appreciate
good traditional typography and standards-compliant liquid displays,
and I only reluctantly experiment with two-column layouts from time to
time.

One component of traditional book typography has always been the
figure/caption combination. I haven't been following discussion on
this topic for a year or two, but last time I did the consensus was
that HTML missed the boat by not including a FIGURE element early on,
and that figure/caption combinations are best done either with nested
DIVs or with TABLE/TH markup. I have elected to use TABLE/TH markup
for now. Some may not agree with that, but that's how I'm marking up
figure/caption combinations at present.

But, in good typography the width of a figure should be a fixed
proportion of the page width: full column, half column, third column,
etc. On most liquid web pages, however, if you narrow the window or
change the font size, image dimensions remain rigid (because we all
know it's good practice to include width="" and height="" attributes
on all IMG elements).

For some time I've wanted to be able to design a page so the figures
will automatically resize and retain their column proportions. I
started thinking in the context of this page from W3C, but I haven't
followed it because it uses DIVs rather than tables:

http://www.w3.org/Style/Examples/007/figures.html

Now that summer's here (long holiday weekend in the US) I've decided
to give it a try, and have been surprised at how easily it can be done
(in this initial test at least; famous last words). Many of these
effects depend on the use of the max-width property which not all
browsers support, but I don't think there is serious breakage in the
absence of max-width. Try this page, which is my current experiment:

http://rjohara.net/coins

It's a page about coins and ancient Greek history. The two
right-floated images in the first part of the page (an old engraving
and an ancient gold coin) are set to display at 50% and 33% of the
column width respectively. If you narrow your browser window these
images will shrink and maintain their 50% and 33% proportions. This
should also be the case if you change font size in your browser: set
browser font-size to 75% and the whole column will narrow (assuming
max-width is supported) and the images will also rescale to retain
their 50% and 33% proportions to the column.

For contrast, go farther down the page to the set of coin images. The
first three have been given the rescaling treatment; the remainder
have not and they will readily overflow the browser window if it is
narrowed.

There are probably many ways to accomplish this. My approach uses two
components. For simple images (not part of figure-tables):

img.half {width: 50%; height: auto;}

<img class="half" style="max-width: 310px; max-height: 217px;"
src="coins/miletus-1835.jpg" align="right" alt="" />

And for figure-tables:

table.third {width: 30%; height: auto;}
table.third img {width: 100%; height: auto;}

<table class="figure third">
<tbody><tr><t d>
<img style="max-width: 222px; max-height: 399px;"
src="coins/electrum-stater.png" border="1" alt="[image]" />
</td></tr>[caption omitted for simplicity]</tbody></table>

It is necessary to insert a style="max-width: nnpx; max-height: nnpx;"
attribute for each image so that the image won't grow beyond its
intrinsic size if the viewer makes the window very large. Some people
might not find this objectionable, but image quality does suffer when
scaled above 100%. While this may seem like an extra step, it's no
more effort than inserting standard width and height attributes.

This may be old hat and some people may have been using this technique
for a while now; as I said, I haven't been following CSS techniques
closely for a year or two. I'd welcome any comments on this approach:
potential failures of degradation, etc. I have not yet tested it on
many browsers; I'm using Mac Mozilla 1.6 (on which it works
beautifully) and Mac IE 5.1 (on which down-scaling works fine but
over-scaling doesn't because max-width isn't supported).

Bob O'Hara (http://rjohara.net)

[Brian]

Robert J. O'Hara wrote:

I'm one of those people who practices what some consider "dull" and
others consider "elegantly conservative" page design.
I vote for the latter. But that's probably because I am so often
accused of the former. ;-)
http://rjohara.net/coins

The two right-floated images in the first part of the page (an old
engraving and an ancient gold coin) are set to display at 50% and
33% of the column width respectively. If you narrow your browser
window these images will shrink and maintain their 50% and 33%
proportions.

Tested on Netscape 7.1/Mac OSX. (My own Win2k pc died last week; I'm
housesitting for professors who use a Mac.) Your page works quite
nicely here. Note that it may be the high quality monitor/Mac that I'm
using. I wonder if my laptop PC would have shown the resized images
without butchering them.

--
Brian (remove ".invalid" to email me)

[Michael Rozdoba]

Brian wrote:

Robert J. O'Hara wrote:

I'm one of those people who practices what some consider "dull" and
others consider "elegantly conservative" page design.

I vote for the latter. But that's probably because I am so often
accused of the former. ;-)

http://rjohara.net/coins

The two right-floated images in the first part of the page (an old
engraving and an ancient gold coin) are set to display at 50% and
33% of the column width respectively. If you narrow your browser
window these images will shrink and maintain their 50% and 33%
proportions.

Tested on Netscape 7.1/Mac OSX. (My own Win2k pc died last week; I'm
housesitting for professors who use a Mac.) Your page works quite
nicely here. Note that it may be the high quality monitor/Mac that I'm
using. I wonder if my laptop PC would have shown the resized images
without butchering them.

Firefox 0.8 & IE 6 here. Again, very clean & clear.

I've read so often that one shouldn't let browsers rescale images as
they make a pig's ear of it, that I expected a terrible mess, however I
was very surprised & pleased with the results.

I'll certainly consider using this approach now myself.

On a related issue, I've not given much thought to it, for the above
reasons, but I have occasionally wondered, can one easily make images
rescale sensibly, in accord with user changes to font size?

I've played with the above page a little in Firefox & with the browser
window at full screen, Ctrl +/Ctrl - changes to font size naturally
alter the column width, so the overall scale changes, altering the image
size. This seems to work rather well.

Just checked in IE 5 & it works well too. Anyone with a clue (ie not
me), know what determines how well images are scaled? The browser, the
OS or the graphics card/drivers? I'm guessing maybe all three. Certainly
seems okay for these few images under XP, various browsers & with an
Nvidia MX440.

--
Michael
m r o z a t u k g a t e w a y d o t n e t

[Mikko Rantalainen]

Michael Rozdoba / 2004-05-30 20:16:

Robert J. O'Hara wrote:

http://rjohara.net/coins

The two right-floated images in the first part of the page (an old
engraving and an ancient gold coin) are set to display at 50% and
33% of the column width respectively. If you narrow your browser
window these images will shrink and maintain their 50% and 33%
proportion s.

Firefox 0.8 & IE 6 here. Again, very clean & clear.

I've read so often that one shouldn't let browsers rescale images as
they make a pig's ear of it, that I expected a terrible mess, however I
was very surprised & pleased with the results.

It depends on the images one uses. See below...
I've played with the above page a little in Firefox & with the browser
window at full screen, Ctrl +/Ctrl - changes to font size naturally
alter the column width, so the overall scale changes, altering the image
size. This seems to work rather well.

Just checked in IE 5 & it works well too. Anyone with a clue (ie not
me), know what determines how well images are scaled? The browser, the
OS or the graphics card/drivers? I'm guessing maybe all three. Certainly
seems okay for these few images under XP, various browsers & with an
Nvidia MX440.

Well, it depends. In the end, it's obviously up to the browser how
to deal with the images -- as not all browsers display them at all
so if the browser doesn't want to co-operate, there's nothing the
operating system or graphics card device driver could do.

Most win32 browsers probably load the whole picture to the graphics
API and ask the graphics driver to render it in some size. The
graphics driver might then drop down and play dead, in which case
the fallback software-only MS implementation kicks in and probably
uses "nearest neighbor" algorithm. The software implementation
results to pretty bad downscaling. For exact implementation details
you would have to ask your graphics adapter developer and Microsoft
but I wouldn't hold my breath while waiting for the answer.

Saying that, I'd recommend defining image sizes in percentages and
ems. If some user agent renders the scaled images badly, then
perhaps the user should fire that agent and hire a better one :D

--
Mikko

[Michael Rozdoba]

Mikko Rantalainen wrote:

Most win32 browsers probably load the whole picture to the graphics API
and ask the graphics driver to render it in some size.
I imagined that must be happening, as the results were good & consistent
cross browser.
The graphics
driver might then drop down and play dead, in which case the fallback
software-only MS implementation kicks in and probably uses "nearest
neighbor" algorithm. The software implementation results to pretty bad
downscaling.
That's how I remembered it.
For exact implementation details you would have to ask your
graphics adapter developer and Microsoft but I wouldn't hold my breath
while waiting for the answer.
:)
Saying that, I'd recommend defining image sizes in percentages and ems.
If some user agent renders the scaled images badly, then perhaps the
user should fire that agent and hire a better one :D

When it's appropriate I probably will from now on, though I'd like to
find out how PDAs, & other low spec devices which are nevertheless able
to handle images to some extent, cope with the scaling.

--
Michael
m r o z a t u k g a t e w a y d o t n e t

[Robert J. O'Hara]

Brian wrote in message news:<40******@ news-1.oit.umass.edu >...

Robert J. O'Hara wrote:

http://rjohara.net/coins

The two right-floated images in the first part of the page (an old
engraving and an ancient gold coin) are set to display at 50% and
33% of the column width respectively. If you narrow your browser
window these images will shrink and maintain their 50% and 33%
proportions.

Tested on Netscape 7.1/Mac OSX. (My own Win2k pc died last week; I'm
housesitting for professors who use a Mac.) Your page works quite
nicely here. Note that it may be the high quality monitor/Mac that I'm
using. I wonder if my laptop PC would have shown the resized images
without butchering them.

Many thanks to Brian and all the others who checked on this page. It
does seem to work very well on "modern" browsers - when max-width is
supported it is rather elegant. I just tried it on Wintel IE6, alas,
and on a large monitor the up-scaled images aren't that pretty. It
does downscale reasonably well and maintains the proper image-to-page
ratios, but if the natural pixel dimensions of the image are small and
max-width isn't supported (as it isn't in IE) then the browser scales
up to graininess. I suppose one solution to this would be to make sure
all images really are fairly large in native size, but that certainly
defeats the parallel goal of having lightweight pages. Can anyone see
a way around this, apart from getting everyone to switch to Mozilla or
something equivalent? (Maybe there is a CSS hack that works around IE6
as well as the earlier versions?)

Bob O'Hara (http://rjohara.net)

[Robert J. O'Hara]

This is a followup to my initial attempt to style images and
text-figures in a way that would preserve their page proportions,
thereby making more elegant typography possible.

In the first message in the thread I linked to my experimental page,
which is still functioning as described: http://rjohara.net/coins/ On
a modern browser such as Mozilla the dynamic resizing works perfectly,
and as you narrow the page or shrink the text all the figures maintain
their proportions. A weakness is that on browsers which do not support
max-width (such as the common IE6), when you widen the window the
images overscale and become grainy. My question now concerns how to
work around that problem.

Here is a new page, where the included image is purposely large so
that a widened window is not likely to cause it to over-scale:

http://www.collegiateway.org/reading/bolles-1894/

With modern browsers such as Moz this works beautifully (try shrinking
the text or narrowing the window and watch the figure rescale and
maintain its proportions with the page). I'm using a Mac and so have
trouble testing this on a PC, but with IE6 under Mac VirtualPC, the
image does not correctly rescale and displays at its native (large)
size. I thought the solution would be to add a redundant width="33%"
attribute to the table, or maybe the table body, or even the td, but
none of these things seem to have any effect: the figure is always
oversized. Is my syntax incorrect somehow, or are % widths on tables
not supported? Can anyone tell me a work-around that will get this to
size correctly in Wintel IE?

Bob O'Hara (http://rjohara.net)