INSERT and the IMG ALIGN values

We want to finish the INSERT spec as soon as possible. One major issue is which alignment options to include. At first sight it seems reasonable to use the set proposed by Netscape: (see Netscape extensions to HTML 2.0).

Here is the relevant excerpt:

ALIGN=left|right|top|texttop|middle|absmiddle|baseline|bottom|absbottom>

The additions to your ALIGN options needs a lot of explanation. First, the values "left" and "right". Images with those alignments are an entirely new floating image type. A ALIGN=left image will float down and over to the left margin (into the next available space there), and subsequent text will wrap around the right hand side of that image. Likewise for ALIGN=right the image aligns with the right margin, and the text wraps around the left.

The rest of the align options are my way of trying to correct for the horrible errors I made when first implementing the IMG tag, without destroying the look of existing documents. ALIGN=top does just what it always did, which is align itself with the top of the tallest item in the line. ALIGN=texttop does what many people thought top should do which is align itself with the top of the tallest text in the line this is usually but not always the same as ALIGN=top). ALIGN=middle does just what it always did, it aligns the baseline of the current line with the middle of the image. ALIGN=absmiddle does what middle should have done which is align the middle of the current line with the middle of the image. ALIGN=baseline aligns the bottom of the image with the baseline of the current line. ALIGN=bottom does just what it always did (which is identical to ALIGN=baseline but baseline is a better name). ALIGN=absbottom does what bottom should have done which is align the bottom of the image with the bottom of the current line.

The rendering produced by Netscape 2.0b3 is sensitive to what has occurred on the current text line prior to the current IMG element which includes the align attribute. For instance ALIGN=TOP produces different results depending on whether or not a large image has been placed before the current image.

The wording as used in the HTML 2.0 spec RFC1866 is:

ALIGN - alignment of the image with respect to the text baseline.

• `TOP' specifies that the top of the image aligns with the tallest item on the line containing the image.
• `MIDDLE' specifies that the center of the image aligns with the baseline of the line containing the image.
• `BOTTOM' specifies that the bottom of the image aligns with the baseline of the line containing the image.

This definition of TOP requires the browser to wait until the end of the line before it knows what the "tallest" item is. In other words, when you reach the end of the line you go back and set the vertical offsets relative to the baseline for all images with align=top. This may alter the ascent and descent of the line. If ALIGN=ABSBOTTOM were defined to place the bottom on the image at the same vertical position of the lowest object on the line, then this too would have to be deferred until the end of the line.

ALIGN=TOP, ALIGN=ABSMIDDLE and ALIGN=ABSBOTTOM have the potential to interact in setting the ascent and descent of the line. Keeping these images to the end of the line allows the constraints to solved in a reasonably simple manner. Netscape avoids all these problems by positioning images on the fly without regard to what happens later on in the same line.

Arena also uses a quick work around. It defines ALIGN=TOP in terms of the top of the text for the current font. Both Arena and Netscape fail to conform to the HTML 2.0 definition though. Netscape also fails to conform to its own specification.

I believe that designers are still missing the ability to align the center of images with the center of the text as defined by the midpoint between the baseline and the x-height. Defining this as ALIGN=TEXTMIDDLE would be a major step forward in my opinion. In general, using the current font as the basis for alignment makes sense, and the current INSERT draft defines ALIGN=TEXTTOP, TEXTMIDDLE and TEXTBOTTOM in terms of the current font.

OK, enough with the talk, and on with the testing. The following table shows how the position of a small dark blue graphic is effected by the various Netscape alignment options, and how this interacts with a large graphic placed before or after the small graphic. The table after that shows the same thing using large text in place of the large graphic. The examples will work best if your browser supports tables and the font tag.

Currently, I believe that Internet Explore, Netscape and Arena all do different things. The question is what should the INSERT spec say ???

Please reply to Dave Raggett at html-erb@w3.org

The following table shows the effects of large text before/after the IMG element.