Alignment: Graphic Alignment Tags
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Alignment: Graphic Alignment Tags
When we discuss aligning graphics on the page, it's important to first understand that HTML considers a graphic object (the IMG tag) to be part of the text stream. That's right; as far as HTML is concerned, graphics are part of the text (see Figure 1), unless you tell it to do something special. For example, notice how Netscape renders this HTML:
){kind=link}
<HEAD> <TITLE> Graphic Alignment </TITLE> </HEAD> <BODY BGCOLOR=white> <P>This paragraph has a small <IMG SRC="ducky.gif"> graphic in the middle of it. </BODY> </HTML>
Figure 1 A graphic is considered part of a paragraph.
As you can see, the graphic was inserted directly in the paragraph along with the text. This is what is meant by "inline" graphics. The graphic itself is in line with the stream of text in the paragraph.
Notice also that the bottom of the graphic lines up with the baseline of the text. This is typical for most browsers.
IMG ALIGN Attribute
If you want the inline image to align differently (relative to the line of text it is on) you must supply an ALIGN attribute:
ALIGN=BOTTOM Aligns the bottom of the image with the baseline (default).
ALIGN=MIDDLE Aligns the middle of the image with the baseline.
ALIGN=TOP Aligns the top of the image with the top of the tallest object on the line.
Figures 2, 3, and 4 show what each of the inline image-alignment types look like in Netscape Navigator 4.0.
){kind=link}
){kind=link}
){kind=link}
Figure 2 The ALIGN=BOTTOM attribute.
<HEAD> <TITLE> Graphic Alignment </TITLE> </HEAD> <BODY BGCOLOR=white> <P>This paragraph has a small <IMG SRC="ducky.gif" ALIGN=BOTTOM> graphic in the middle of it. </BODY> </HTML> <HEAD>
Figure 3 The ALIGN=MIDDLE attribute.
<TITLE> Graphic Alignment </TITLE> </HEAD> <BODY BGCOLOR=white> <P>This paragraph has a small <IMG SRC="ducky.gif" ALIGN=MIDDLE> graphic in the middle of it. </BODY> </HTML> <HEAD>
Figure 4 The ALIGN=TOP attribute.
<TITLE> Graphic Alignment </TITLE> </HEAD> <BODY BGCOLOR=white> <P>This paragraph has a small <IMG SRC="ducky.gif" ALIGN=TOP> graphic in the middle of it. </BODY> </HTML>
Floating Graphics
You can also align a graphic to one side or the other, and have text wrap around that graphic. This is done with the floating-type ALIGN values: RIGHT and LEFT. Consider this example, which is shown in Figure 5:
){kind=link}
<HTML> <HEAD> <TITLE>Ducks in a Row Company Information</TITLE> </HEAD> <BODY BGCOLOR=WHITE> <P><IMG SRC="joan.jpg" ALIGN=LEFT>Joan Farber is a freelance illustrator, designer, fine artist and teacher who has done work for such notable companies as American Express, CBS Records, Redken, MCI, Cosmopolitan, Playboy and Vogue Magazines. With her early roots as a fashion illustrator, Joan has developed a style of illustration which has become popular in recent years, utilizing a skillfully calligraphic brush stroke which brings an elegance and sophistication to any image. </BODY> </HTML>
Figure 5 By using ALIGN=LEFT, the image aligns to the left side of the page, and the text wraps around it.
In this example, the inline image is a photo of the person we're talking about in the text. So we actually want the text to flow around the image. Figure 6 shows what using ALIGN=RIGHT looks like in the browser.
){kind=link}
Figure 6 By using ALIGN=RIGHT, the image floats to the right.
In HTML parlance, the LEFT and RIGHT values for the ALIGN attribute tell the browser to "float" the image to the right or left side of the text. This is a distinct behavior from that of the TOP, BOTTOM, and MIDDLE values, which apply to the image as an inline text element.
Now and then, you may wonder whether you can use ALIGN=RIGHT and ALIGN=MIDDLE for the same image. No, you cannot use the same attribute more than once in the same element, but you can get more complex alignments using tables. See "Alignment: Tables" in this series for more details.
Insert a Line Break with BR
You are probably already familiar with the BR tag at this point, but you may not be aware that it has some peculiarities when used with floating images. Let's take a quick look at those peculiarities (see Figure 7), so that you know how to break lines when you need to.
){kind=link}
First, let's consider this small piece of HTML:
<P><IMG SRC="ducky.gif"> Line one <BR>Line two <BR>Line three
Figure 7 BR with no attributes.
Notice that the image is part of the paragraph. This is the normal behavior for an inline image. The BR tags break the lines of text, but the Line one text is inline with the image. That's because the text and the image are part of the same paragraph. Now, let's see what happens if we add ALIGN=LEFT to the IMG tag, as shown in Figure 8:
){kind=link}
<P><IMG SRC="ducky.gif" ALIGN=LEFT> Line one <BR>Line two <BR>Line three
Figure 8 IMG with ALIGN=LEFT makes the image "float" to the left.
When we add ALIGN=LEFT to an IMG tag, the image floats to the left, leaving the paragraph text to wrap around it. Now, the BR tag no longer brings the text out under the image; instead, it breaks the text but leaves it next to the image. This is the behavior with a floating (as opposed to inline) image.
The BR tag has an attribute called CLEAR, which allows you to force the text to clear the floating image. For example, use CLEAR=LEFT to force a text break below an image floating on the left (see Figure 9):
){kind=link}
<P><IMG SRC="ducky.gif" ALIGN=LEFT> Line one <BR>Line two <BR CLEAR=LEFT>Line three
Figure 9 BR with CLEAR=LEFT.
Use CLEAR=RIGHT to force a text break below an image floating on the right (see Figure 10):
){kind=link}
<P ALIGN=RIGHT> <IMG SRC="ducky.gif" ALIGN=RIGHT> Line one <BR>Line two <BR CLEAR=RIGHT>Line three
Figure 10 BR with CLEAR=RIGHT.
You can also use CLEAR=ALL to force a break below images on both sides (see Figure 11):
){kind=link}
<P ALIGN=CENTER> <IMG SRC="ducky.gif" ALIGN=RIGHT> <IMG SRC="ducky.gif" ALIGN=LEFT> Line one <BR>Line two <BR CLEAR=ALL>Line three
Figure 11 BR with CLEAR=ALL.
The BR tag can be a little confusing when you are using it with floating images. As a rule-of-thumb, it can't hurt to just get into the habit of using CLEAR=ALL any time you want the break to go below an image.
Image Gutters
Did you notice that when we wrapped text around the duck image, there was a space between the image and the text? This space is called a gutter. It is controlled with the VSPACE and HSPACE attributes to the IMG tag.
<P><IMG SRC="ducky.gif" ALIGN=LEFT HSPACE=0> Line one <BR>Line two <BR>Line three
Notice that by setting the HSPACE to zero, we have eliminated all the space between the image and the text (see Figure 12).
){kind=link}
Figure 12 IMG with HSPACE=0.
On the other hand, it is also possible to create extra space by increasing the value of HSPACE. (The default value is 3 for most browsers.)
<P><IMG SRC="ducky.gif" ALIGN=LEFT HSPACE=25> Line one <BR>Line two <BR>Line three
In this case, we have increased the horizontal gutter to 25 pixels (see Figure 13).
){kind=link}
Figure 13 IMG with HSPACE=25.
Notice that 25 pixels have been added to both sides of the image! In many cases, this may not be what you want. If you want to add 25 pixels of space to only one side, apply the following trick.
The Single-Pixel GIF Trick
Let's say that, for design purposes, you want 25 pixels of gutter only on the right side of the duck. You can't do that with the normal HSPACE attribute. Instead, you have to get creative.
First, some background: When you supply WIDTH and HEIGHT attributes to the IMG tag, the browser will display the graphic at the specified height and width, regardless of the original size of the image. If the image was that size in the first place, that's fine. This will actually speed up the display of the page. On the other hand, if the graphic is not those dimensions, the browser will stretch (and/or shrink) the graphic to fit the dimensions specified by HEIGHT and WIDTH. Why would you want to do that?
The trick is to use a one pixel by one pixel GIF file, with the color of the pixel set to transparent. Then, you can stretch that GIF to whatever size you want for the explicit purpose of creating space! You can use this trick to create horizontal space or vertical space. Figure 14 shows a gutter on just one side of the image, using a single-pixel GIF.
){kind=link}
<P><IMG SRC="ducky.gif" WIDTH=50 HEIGHT=50 HSPACE=0 ALIGN=LEFT> <IMG SRC="blank.gif" WIDTH=25 HEIGHT=50 HSPACE=0 ALIGN=LEFT> Line one <BR>Line two <BR>Line three
Figure 14 Creating a gutter with a single-pixel transparent GIF.