In what appears to be an effort to woo advertisers, Internet Explorer added a form of animated text to HTML that all the popular browsers now support. The animation is simpletext scrolling horizontally across the displaybut effective for moving banners and other elements that readily and easily animate an otherwise static document. On the other hand, like the <blink> tag, animated text can easily become intrusive and abusive for the reader. Use with caution, please, if at all.
The <marquee> Tag
The <marquee> tag defines the text that scrolls across the user's display. The <marquee> tag is not a standard tag. For this reason alone, we do not recommend that you use this extension.
The text between the <marquee> tag and its required </marquee> end tag scrolls horizontally across the display. The various tag attributes control the size of the display area, its appearance, its alignment with the surrounding text, and the scrolling speed.
The <marquee> tag and attributes are ignored by some browsers, but its contents are not. They are displayed as static text, sans any alignment or special treatment afforded by the <marquee> tag attributes.
The align attribute
The popular browsers place <marquee> text into the surrounding body content just as if it were an embedded image. As a result, you can align the marquee within the surrounding text.
The align attribute accepts a value of top, middle, or bottom, meaning that the specified point of the marquee will be aligned with the corresponding point in the surrounding text. Thus:
aligns the top of the marquee area with the top of the surrounding text. Also see the height, width, hspace, and vspace attributes (later in this chapter), which control the dimensions of the marquee.
The behavior, direction, and loop attributes
Together, these three attributes control the style, direction, and duration of the scrolling in your marquee.
The behavior attribute accepts three values:
If you do not specify a marquee behavior, the default behavior is scroll.
The direction attribute sets the direction for marquee text scrolling. Acceptable values are either left (the default) or right. Note that the starting end for the scrolling is opposite to the direction: left means that the text starts at the right of the marquee and scrolls to the left. Remember also that rightward-scrolling text is counter-intuitive to anyone who reads left to right.
The loop attribute determines how many times the marquee text scrolls. If an integer value is provided, the scrolling action is repeated that many times. If the value is infinite, the scrolling repeats until the user moves on to another document within the browser.
Putting some of these attributes together:
<marquee align=center loop=infinite> Kumquats aren't filling .......... Taste great, too! </marquee>
The example message starts at the right side of the display window (default), scrolls leftward all the way across and off the display, and then starts over again until the user moves on to another page. Notice the intervening periods and spaces for the "trailer"; you can't append one marquee to another.
Also, the slide style of scrolling looks jerky when repeated and should be scrolled only once. Other scrolling behaviors work well with repeated scrolling.
The bgcolor attribute
The bgcolor attribute lets you change the background color of the marquee area. It accepts either an RGB color value or one of the standard color names. See Appendix G for a full discussion of both color-specification methods.
To create a marquee area whose color is yellow, you would write:
The height and width attributes
The height and width attributes determine the size of the marquee area. If not specified, the marquee area extends all the way across the display and will be just high enough to enclose the marquee text.
Both attributes accept either a numeric value, indicating an absolute size in pixels, or a percentage, indicating the size as a percentage of the browser window height and width.
For example, to create a marquee that is 50 pixels tall and occupies one-third of the display window width, use:
<marquee height=50 width="33%">
While it is generally a good idea to ensure that the height attribute is large enough to contain the enclosed text, it is not uncommon to specify a width that is smaller than the enclosed text. In this case, the text scrolls the smaller marquee area, resulting in a kind of "viewport" marquee familiar to most people.
The hspace and vspace attributes
The hspace and vspace attributes let you create some space between the marquee and the surrounding text. This usually makes the marquee stand out from the text around it.
Both attributes require an integer value specifying the space needed in pixels. The hspace attribute creates space to the left and right of the marquee; the vspace attribute creates space above and below the marquee. To create 10 pixels of space all the way around your marquee, for example, use:
<marquee vspace=10 hspace=10>
The scrollamount and scrolldelay attributes
These attributes control the speed and smoothness of the scrolling marquee.
The scrollamount attribute value is the number of pixels needed to move text each successive movement during the scrolling process. Lower values mean smoother but slower scrolling; higher numbers create faster, jerkier text motion.
The scrolldelay attribute lets you set the number of milliseconds to wait between successive movements during the scrolling process. The smaller this value, the faster the scrolling.
You can use a low scrolldelay to mitigate the slowness of a small, smooth scrollamount. For example:
<marquee scrollamount=1 scrolldelay=1>
scrolls the text one pixel for each movement but does so as fast as possible. In this case, the scrolling speed is limited by the capabilities of the user's computer.