Marquee element

Last updated
A video of an HTML marquee displaying the text "Wikipedia".

The marquee tag is a non-standard HTML element which causes text to scroll up, down, left or right automatically. The tag was first introduced in early versions of Microsoft's Internet Explorer, and was compared to Netscape's blink element, as a proprietary non-standard extension to the HTML standard with usability problems. The W3C advises against its use in HTML documents.

Contents

Usability problems

Marquee can be distracting. [1] The human eye is attracted to movement, [2] and marquee text is constantly moving.

As with the blink element, marquee-tagged images or text are not always completely visible on rendered pages, making printing such pages an inefficient (if not impossible) task; typically multiple attempts are required to capture all text that could be displayed where messages scroll or blink. The behavior="alternate" version of marquee makes text jitter back and forth but does not obscure any part of it if scrolling widths are set correctly.

Because marquee text moves, links within it are more difficult to click than those in static text, depending on the speed and length of the scrolling. Users only get one chance every time it scrolls past. Also, scrolling text too fast can make it unreadable to some people, particularly those with visual impairments. This can easily frustrate users. To combat this, client-side scripting allows marquees to be programmed to stop when the mouse is over them.

Attributes

This is the new WikiPedia!

Example of marquee text from the first Wikipedia edit (accomplished via CSS; the marquee tag itself is deprecated and no longer works in most browsers)

Unlike its blinking counterpart, the marquee element has several attributes that can be used to control and adjust the appearance of the marquee.

align
Uses the same syntax as the img element.
behavior
Allows the user to set the behavior of the marquee to one of three different types:
  • Scroll (default) – Scrolls the text from right-to-left, and restarts at the right side of the marquee when it has reached the left side. Text disappears when looping finishes.
  • Slide – When used in absence of the 'Behavior' attribute, contents to be scrolled will slide the entire length of marquee but stops the moment it hits the end, so that the contents will be displayed. But if it is used with attribute 'Behavior' then the attribute 'Slide' will be ignored.

Loops are counted by each time it reaches each end of the marquee; a loop of 1 is different from 'Slide' attribute. when item is being scrolled with 'Slide' attribute, item will stop permanently at the end of length of the marquee, displaying the entire item. However, when an item is being scrolled without a 'Loop' attribute, the number of scrolls will be repeated according to what number 'Loop' is equal to. If 'Loop=1' then item will scroll only once and will exit the length of marquee completely, while the item being scrolled will stop would be the same as 'Slide'. By default, 'Loop=infinite' so it is not needed to code the attribute 'Loop' if you want a non-stop scroll. Note: 'Loop' will be ignored if attribute 'Behavior' is coded. Also, if 'Behavior=Alternate' and 'Loop=2' then item will go from beginning of the Marquee to the end and back to the beginning, counting a round trip as 2 loops.

  • Alternate - Scrolls the text from right-to-left & goes back left-to-right.
bgcolor
Sets the background color of the marquee.
direction
Sets the direction of the marquee box. Values are left, right, up, down where the value indicates the direction of travel. direction=left therefore moves the text from right to left on the screen.
width
This sets how wide the marquee should be.
loop
This sets how many times the marquee should 'Loop' its text. Each trip counts as one loop.
scrollamount
This is how many pixels the text moves between 'frames'. So scrollamount=1 gives the slowest scroll speed.
scrolldelay
This sets the amount of time, in milliseconds, between 'frames', much like watching a replay of a video where every frame of the video would be paused for x number of milliseconds. 'Scrolldelay=1000' means a slow motion where every frame lasts one thousand milliseconds or one second.

A marquee element can contain arbitrary HTML, so in addition to text it could move one or more images, movie clips, or animated GIFs.

Implementation

The marquee tag has been deprecated in most browsers, but the same behavior can still be implemented with Cascading Style Sheets, like this:

@keyframesmarquee{0%{transform:translateX(100%);}100%{transform:translateX(-100%);}}.marquee-container{white-space:nowrap;overflow:hidden;position:relative;animation:marquee10slinearinfinite;}.marquee-content{display:inline-block;}

The animation, marquee, is defined by its @keyframes to be a simple translation from right to left; it would be possible to reverse the animation by inverting it (from -100% to 100%, for example). The 10s can also be modified to alter its output.

The style can then be invoked in HTML:

<divclass="marquee-container"><divclass="marquee-content">The freakin' geese are on the lease!</div></div>
The freakin' geese are on the lease!

Compliance

The marquee element was first invented for Microsoft's Internet Explorer and is supported by it. Firefox, Chrome and Safari web browsers support it for compatibility with legacy pages. The element is non-compliant HTML. CSS properties were proposed to achieve the same effect as specified in the Marquee Module Level 3, which was abandoned without implementation in 2014. [3] Similar effects can also be achieved through the use of JavaScript, [4] or CSS3 animations. [5]

Related Research Articles

<span class="mw-page-title-main">HTML</span> HyperText Markup Language

Hypertext Markup Language (HTML) is the standard markup language for documents designed to be displayed in a web browser. It defines the content and structure of web content. It is often assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript, a programming language.

An HTML element is a type of HTML document component, one of several types of HTML nodes. The first used version of HTML was written by Tim Berners-Lee in 1993 and there have since been many versions of HTML. The current de facto standard is governed by the industry group WHATWG and is known as the HTML Living Standard.

In web development, "tag soup" is a pejorative for HTML written for a web page that is syntactically or structurally incorrect. Web browsers have historically treated structural or syntax errors in HTML leniently, so there has been little pressure for web developers to follow published standards. Therefore there is a need for all browser implementations to provide mechanisms to cope with the appearance of "tag soup", accepting and correcting for invalid syntax and structure where possible.

The font family selection in (X)HTML, CSS, and derived systems specifies a list of prioritized fonts and generic family names; in conjunction with correlating font properties, this list determines the particular font face used to render characters. The family selection is available in two forms: in the deprecated (X)HTML <font>...</font> element with its face attribute, and in the CSS font-family property.

The blink element is a non-standard HTML element that indicates to a user agent that the page author intends the content of the element to blink. The element was introduced in Netscape Navigator but is no longer supported and often ignored by modern Web browsers; some, such as Internet Explorer, never supported the element at all.

In the context of a web browser, a frame is a part of a web page or browser window which displays content independent of its container, with the ability to load content independently. The HTML or media elements in a frame may come from a web site distinct from the site providing the enclosing content. This practice, known as framing, is today often regarded as a violation of same-origin policy.

<span class="mw-page-title-main">Mouseover</span> User interface element

In the field of computing and web design, a mouseover, is an event occurring when the user moves the cursor over a specified point on a computer monitor using a computer mouse. Also called a hover effect, mouseovers are graphical controls that respond when a user moves their mouse pointer over a designated area. This area can be a button, image, or hyperlink. This simple action can trigger different responses. The element's color or appearance can change. Additional information or interactive content can be displayed. The mouseover effect is an essential part of user interaction. It adds layers of interactivity and responsiveness to websites and applications.

In computer hypertext, a URI fragment is a string of characters that refers to a resource that is subordinate to another, primary resource. The primary resource is identified by a Uniform Resource Identifier (URI), and the fragment identifier points to the subordinate resource.

In HTML, the standard markup language for documents designed to be displayed in a web browser, <div> and <span> tags are elements used to define parts of a document, so that they are identifiable when a unique classification is necessary. Where other HTML elements such as <p> (paragraph), <em> (emphasis), and so on, accurately represent the semantics of the content, the additional use of <span> and <div> tags leads to better accessibility for readers and easier maintainability for authors. Where no existing HTML element is applicable, <span> and <div> can valuably represent parts of a document so that HTML attributes such as class, id, lang, or dir can be applied.

In HTML and XHTML, the blockquote element defines "a section [within a document] that is quoted from another source". The syntax is

A CSS hack is a coding technique used to hide or show CSS markup depending on the browser, version number, or capabilities. Browsers have different interpretations of CSS behavior and different levels of support for the W3C standards. CSS hacks are sometimes used to achieve consistent layout appearance in multiple browsers that do not have compatible rendering. Most of these hacks do not work in modern versions of the browsers, and other techniques, such as feature support detection, have become more prevalent.

<span class="mw-page-title-main">YUI Library</span>

The Yahoo! User Interface Library (YUI) is a discontinued open-source JavaScript library for building richly interactive web applications using techniques such as Ajax, DHTML, and DOM scripting. YUI includes several cores CSS resources. It is available under a BSD License. Development on YUI began in 2005 and Yahoo! properties such as My Yahoo! and the Yahoo! front page began using YUI in the summer of that year. YUI was released for public use in February 2006. It was actively developed by a core team of Yahoo! engineers.

jQuery is a JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animations, and Ajax. It is free, open-source software using the permissive MIT License. As of August 2022, jQuery is used by 77% of the 10 million most popular websites. Web analysis indicates that it is the most widely deployed JavaScript library by a large margin, having at least three to four times more usage than any other JavaScript library.

Animation of Scalable Vector Graphics, an open XML-based standard vector graphics format is possible through various means:

<span class="mw-page-title-main">CSS animations</span> CSS3 properties that would let some HTML elements animate

CSS animations is a proposed module for Cascading Style Sheets that allows the animation of HTML document elements using CSS.

<span class="mw-page-title-main">CSS</span> Style sheet language

Cascading Style Sheets (CSS) is a style sheet language used for specifying the presentation and styling of a document written in a markup language such as HTML or XML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

HTML attributes are special words used inside the opening tag to control the element's behaviour. It is a piece of markup language used to adjust the behavior or display of an HTML element.HTML attributes are a modifier of a HTML element type. An attribute either modifies the default functionality of an element type or provides functionality to certain element types unable to function correctly without them. In HTML syntax, an attribute is added to a HTML start tag.

<span class="mw-page-title-main">CSS box model</span> Model used for styling websites

In web development, the CSS box model refers to how HTML elements are modeled in browser engines and how the dimensions of those HTML elements are derived from CSS properties. It is a fundamental concept for the composition of HTML webpages. The guidelines of the box model are described by web standards World Wide Web Consortium (W3C) specifically the CSS Working Group. For much of the late-1990s and early 2000s there had been non-standard compliant implementations of the box model in mainstream browsers. With the advent of CSS2 in 1998, which introduced the box-sizing property, the problem had mostly been resolved.

The Web platform is a collection of technologies developed as open standards by the World Wide Web Consortium and other standardization bodies such as the Web Hypertext Application Technology Working Group, the Unicode Consortium, the Internet Engineering Task Force, and Ecma International. It is the umbrella term introduced by the World Wide Web Consortium, and in 2011 it was defined as "a platform for innovation, consolidation and cost efficiencies" by W3C CEO Jeff Jaffe. Being built on The evergreen Web has allowed for the addition of new capabilities while addressing security and privacy risks. Additionally, developers are enabled to build interoperable content on a cohesive platform.

Velocity is a cross-platform JavaScript library designed to simplify the client-side scripting of website animation. Velocity is free, open-source software licensed under the MIT License. It is the most popular open source web animation engine.

References

  1. ↑ "Glossary » marquee". Usability First. Foraker. Retrieved 2010-03-14.
  2. ↑ Tim Louis Macaluso (2009-05-27). "Study shows that eyes will forsake words for movement". Rochester City Newspaper. Archived from the original on 2009-06-01. Retrieved 2010-03-14.
  3. ↑ CSS Marquee Module Level 3
  4. ↑ Sharp, Remy (10 September 2008). "The Silky Smooth Marquee" . Retrieved 20 July 2005.
  5. ↑ liMarquee - alternative marquee jQuery plugin. Creates horizontal or vertical marquee for text, images, goods, banners or logos
This page is based on this Wikipedia article
Text is available under the CC BY-SA 4.0 license; additional terms may apply.
Images, videos and audio are available under their respective licenses.