5.5 Animated Text
In
what appears to be an effort to woo advertisers, Internet Explorer has added a form of
animated text to HTML. The animation is simple text scrolling
horizontally across the display but 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.
5.5.1 The <marquee> Tag
The <marquee> tag defines the text
that scrolls across the Internet Explorer user's
display. The <marquee> tag is for Internet
Explorer only and is not a standard tag. For this reason alone, we do
not recommend that you use this extension tag.
<marquee> Function Creates a scrolling text marquee Attributes align, behavior, bgcolor, class, controls ( ![]() direction, height, hspace, loop, scrollamount, scrolldelay, style, vspace, width End tag </marquee>; never omitted Contains plain_text Used in body_content |
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 other browsers, but its contents are not. They are displayed as
static text, sans any alignment or special treatment afforded by the
<marquee> tag attributes.
5.5.1.1 The align attribute
Internet
Explorer places <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:
<marquee align=top>
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.
5.5.1.2 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:
scroll (default)
This value causes the marquee to act
like the grand marquee in Times Square: the marquee area is initially
empty; the text then scrolls in from one side (controlled by the
direction attribute), continues across until it
reaches the other side of the marquee, and then scrolls off until the
marquee is once again empty.
slide
This value causes the marquee to start
empty. Text then scrolls in from one side (controlled by the
direction attribute), stops when it reaches the
other side, and remains onscreen.
alternate
This value causes the marquee to start
with the text fully visible at one end of the marquee area. The text
then scrolls until it reaches the other end, whereupon it reverses
direction and scrolls back to its starting point.
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 Internet
Explorer 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.
5.5.1.3 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:
<marquee bgcolor=yellow>
5.5.1.4 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 Internet Explorer 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 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.
5.5.1.5 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>
5.5.1.6 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 1 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.