New Method for Image Annotation

Displaying a portfolio of images with annotation can be difficult. It's easy to manage the availability and size of thumbnails. And we have a means of collecting annotation (Katie Cooper's work). But if we have lots of images and some have lots of annotation while others have very little annotation, then their display is awkward. If you use a table, then the arrangement is dictated by the image with the most annotation (since tables are rectalinear). We'd like to display images with all their annotation and packed in a manner that uses the least amount of screen or page width. We'd also like our solution to look good in all browsers, including Mac and older Netscape. Our attempts thus far are evident in The Mel Dyck Photo Gallery.

Here's an example of what might be included in annotation.

Subject (Persons)
Comment (brief)
Photographer
Copyright owner (if not photographer)
Text (may be quite long)

Here a new idea about how to display images with annotation in an attractive and space efficient manner. This idea is inspired by "watermark" written by Jonathan Manktelow.

Suppose we create a canvas placing the thumbnail image in the upper left corner.
Suppose we have the canvas extend below the image sufficiently to place "Subject" and "Photographer".
If we have "Comment", "Copyright owner" and/or "Text", let's extend the canvas to the right sufficiently for all this info.
The first task is to determine the amount of vertical space that will be needed below the image given font size, characters of text, and characters lost due to wrapping.
Next we must determine the extra width needed on the right to handle info to be wrapped there.
Then we have the canvas size and have only to place the elements.

The elements are these.

Image name (fully qualified path)
Text to be placed below.
Text to be placed on the right.
Other (font sizes, etc; should be handled as defaults that can be overridden if desired).

Images annotated in this manner should run on all browsers and should be displayed in a manner that will waste the least possible amount of screen or paper space. HTML code will be our "packed" example, except, of course, they will be spread out more to allow text to be displayed (with the least possible amount of wasted space).