Web Development

HTML Shop of Horrors: Marquee Tag

Today's exhibit is a subject of intense hatred and a figure of derision -- the marquee tag

Welcome to Hall of Hatred within the HTML Shop of Horrors. Today's exhibit is a subject of intense hatred and a figure of derision -- without further ado, let's see what hideous creature it is:

<marquee>The Marquee Tag</marquee>
The Marquee Tag

And there was much wailing and gnashing of teeth.

Has there ever been a good use for a marquee tag? It never stops scrolling, it can never move at a pace that is suitable for reading and it draws unwanted attention to itself. It's like the Paris Hilton of HTML elements.

Frankly, I'm glad it's dead -- or at least it should be.

But where does all this anger come from? It is always best to see for yourself as we delve into the number of ways that a Web developer can take an annoying element and really pimp out its annoyance.

Direction

If you thought there was only one way to read marquees, you would be wrong. To make people wait even longer to read your text, you could invert the direction, as well as annoy just as well in Arabic too!

The default value was "left", therefore inversion meant you had to change the direction property to "right". Presumably "left" and "right" referred to the direction in which to scroll towards. It would take a while for someone to figure out that "ltr" or "rtl" would make more sense. At this point in time we were left just having to know the implicit meaning of "left" and "right".

The Marquee Tag

But why stop there when you could do both? To do this, we would need to use the Behavior property.

Behavior

If you gave the Behavior property the value "alternate", it would make the text change between left to right and right to left.

That wasn't all it could do: with a value of "slide" the text would enter from one side and stop when it hit the other side of the container.

The default behaviour for Behavior was "scroll". Who'd have thought it?

Loop

Perhaps you only wanted to annoy your readers for a little while, then you could limit the number of times the marquee would loop by giving the loop property a numerical value -- provided the reader was still on your page at that point.

After the specified number of loops the text scrolling would stop and depending on the Behavior would either disappear (behavior="scroll") or remain behind (behavior="slide").

However, if you wish to ensure that the marquee would annoy forever, you could give loop a value of -1 and it would never cease. For Mozilla based browsers, this is the unchangeable default.

The Marquee Tag

Changing the effect

When you wanted to tailor the marquee's scrolling to fit your design needs, you could use scrolldelay and scrollamount.

Scrolldelay specified the amount of time in milliseconds to wait before updating the marquee.

Scrollamount specified the number of pixels to move when the marquee moved.

With a good combination of numbers, you could really ramp up the annoyance factor.

The Marquee Tag

I'm not dead yet

Just when you thought it was safe to return to the Internet, it seems that the marquee tag has returned in zombie form in the CSS2 specification.

The horror will return when browsers can render this correctly:

<style>
p { overflow: scroll;
    white-space: nowrap;
    marquee: slide infinite }
</style>

Here's hoping that browser developers will have enough taste to prevent the return of the marquee.

Who am I kidding though? The MySpace kids will love it.

About

Some would say that it is a long way from software engineering to journalism, others would correctly argue that it is a mere 10 metres according to the floor plan.During his first five years with CBS Interactive, Chris started his journalistic advent...

0 comments

Editor's Picks