CSS Marquee Module Level 3

Abstract

CSS describes the rendering of documents on various media. When documents (e.g., HTML) are laid out on visual media (e.g., screen or print) and the contents of some element are too large for a given area, CSS allows the designer to specify whether and how the overflow is displayed. One way, available on certain devices, is the “marquee” effect: the content is animated and moves automatically back and forth. This module defines the properties to control that effect.

Status of this document

This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current W3C publications and the latest revision of this technical report can be found in the W3C technical reports index at http://www.w3.org/TR/.

This document was produced by the CSS Working Group as a Candidate Recommendation.

A Candidate Recommendation is a document that has been widely reviewed and ready for implementation. W3C encourages everybody to implement this specification and return comments to the (archived) public mailing list www-style@w3.org (see instructions). When sending e-mail, please put the text “css3-marquee” in the subject, preferably like this: “[css3-marquee] …summary of comment…”

Publication as a Candidate Recommendation does not imply endorsement by the W3C Membership. This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress.

This document was produced by a group operating under the 5 February 2004 W3C Patent Policy. W3C maintains a public list of any patent disclosures made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains Essential Claim(s) must disclose the information in accordance with section 6 of the W3C Patent Policy.

For this specification to exit CR, a minimum of six months must have elapsed, i.e., it will not become Proposed Recommendation before 5 June 2009.

Furthermore, there must be at least two independent, interoperable implementations of each feature. Each feature may be implemented by a different set of products, there is no requirement that all features be implemented by a single product. For the purposes of this criterion, we define the following terms:

independent

each implementation must be developed by a different party and cannot share, reuse, or derive from code used by another qualifying implementation. Sections of code that have no bearing on the implementation of this specification are exempt from this requirement.

interoperable

passing the respective test case(s) in the official CSS test suite, or, if the implementation is not a Web browser, an equivalent test. Every relevant test in the test suite should have an equivalent test created if such a user agent (UA) is to be used to claim interoperability. In addition if such a UA is to be used to claim interoperability, then there must one or more additional UAs which can also pass those equivalent tests in the same way for the purpose of interoperability. The equivalent tests must be made publicly available for the purposes of peer review.

implementation

a user agent which:

1. implements the specification.
2. is available to the general public. The implementation may be a shipping product or other publicly available version (i.e., beta version, preview release, or “nightly build”). Non-shipping product releases must have implemented the feature(s) for a period of at least one month in order to demonstrate stability.
3. is not experimental (i.e. a version specifically designed to pass the test suite and is not intended for normal usage going forward).

This specification only defines the marquee effect for level 2 of the CSS box model, i.e., for horizontal text only, as defined by CSS level 2 [CSS21]. It is expected that this specification will be updated and generalized to include vertical text, once the CSS Text Layout module [CSS3TEXTLAYOUT] is stable.

Table of contents

• 1. Dependencies on other modules
• 2. Introduction
• 3. How to read this specification
• 4. Terminology
• 5. The ‘overflow-style’ property
• 6. The ‘marquee-style’ property
• 7. The ‘marquee-play-count’ property
• 8. The ‘marquee-direction’ property
• 9. The ‘marquee-speed’ property
• 10. Conformance
• 11. Acknowledgments
• 12. Changes
• References
• Index
• Property index

1. Dependencies on other modules

This CSS module depends on the following other CSS modules:

• Cascading Style Sheets Level 2 Revision 1 [CSS21] for the properties overflow, display, width, margin-left, margin-right, and direction.

2. Introduction

(This section is not normative.)

The marquee effect consists of the UA slowly moving the content of a box so that, over time, all parts of the box are visible at least once. The speed of the movement, whether the movement is in one direction only or back and forth, how far the content moves and how often may vary. But, unlike for most other scrolling mechanisms, the scrolling does not depend on user events. Typically, marquee is used in contexts where there is no room for a scrollbar or other visible mechanism or when user interaction is limited: instead of actively moving hidden content into view, the user waits while the content moves by.

li {overflow: auto; overflow-style: marquee-line; white-space: nowrap}

3. How to read this specification

All sections are normative, unless stated otherwise.

Notes look like this and normally start with the word “Note.” Notes are not normative.

Each property is defined in part in the text and in part by a table that groups together a number of facts about the property, including a regular expression to restrict its syntax. See section 1.4.2 of CSS 2.1 [CSS21] for the meaning. The “Inherited” and “Initial” rows in the table are used by the Cascading and Inheritance module [CSS3CASCADE] and “Media” by the Media Queries specification [MEDIAQ].

4. Terminology

A glossary of technical terms (UA, used value, style sheet, element, etc.) can be found in chapter 3 of CSS level 2 [CSS21]. The specification may refer to the specified value, the used value and the computed value of a property as defined in CSS 2.1 [CSS21]. Unless stated explicitly, the short form “value” means the computed value.

5. The ‘overflow-style’ property

This property specifies the preferred scrolling method for elements that overflow (see the ‘overflow’ property.) If the UA does not support the specified value, it must act as if the value was ‘auto’.

auto

The UA chooses the scrolling mechanism. Marquees and scrollbars are common mechanisms, but the UA may also use others.

marquee-line

This selects marquee as the horizontal scrolling mechanism (i.e., for content that overflows to the left or right). The scrolling mechanism in the perpendicular direction is left to the UA, but should not be marquee.

marquee-block

This selects marquee as the vertical scrolling mechanism (i.e., for content that overflows above or below the box). The scrolling mechanism in the perpendicular direction is left to the UA, but should not be marquee.

6. The ‘marquee-style’ property

The values are:

scroll

Start completely off one side, scroll all the way across and completely off. The following pseudo-code defines the behavior when the marquee direction is to the left (see ‘marquee-direction’). The other directions are analogous.

1. Set the element to clip the overflow to the left and to the right
2. Create an anonymous box B around the content; set its ‘width’ so as to include all content and all overflow exactly; set its ‘margin-right’ to ‘auto’
3. Set n to the value of ‘marquee-play-count’
4. While n ≠ 0:
   1. Set ‘margin-left’ of B to 100% (i.e., all contents is off to the right and thus invisible)
   2. Decrease ‘margin-left’ at constant speed (see ‘marquee-speed’) until ‘margin-right’ is 100% (i.e., all content is off to the left and thus invisible)
   3. Decrease n by one

slide

Start completely off one side, scroll in, and stop as soon as no more content is off that side. The following pseudo-code defines the behavior when the marquee direction is to the left (see ‘marquee-direction’). The other directions are analogous.

1. Set the element to clip the overflow to the left and to the right
2. Create an anonymous box B around the content; set its ‘width’ so as to include all content and all overflow exactly; set its ‘margin-right’ to ‘auto’
3. Set n to the value of ‘marquee-play-count’
4. While n ≠ 0:
   1. Set ‘margin-left’ of B to 100% (i.e., all contents is off to the right and thus invisible)
   2. Decrease ‘margin-left’ at constant speed (see ‘marquee-speed’) until ‘margin-right’ is 0
   3. Decrease n by one

alternate

Bounce back and forth. The following pseudo-code defines the behavior when the initial marquee direction is to the left (see ‘marquee-direction’). The other directions are analogous.

1. Set the element to clip the overflow to the left and to the right
2. Create an anonymous box B around the content; set its ‘width’ so as to include all content and all overflow exactly
3. Set r to false
4. Set n to the value of ‘marquee-play-count’
5. While n ≠ 0:
   1. If r, set ‘margin-right’ of B to 0 and ‘margin-left’ to ‘auto’; else, set ‘margin-left’ of B to 0 and ‘margin-right’ to ‘auto’
   2. If r, decrease ‘margin-right’ at constant speed (see ‘marquee-speed’) until ‘margin-left’ is 0; else, decrease ‘margin-left’ at constant speed until ‘margin-right’ is 0
   3. Set r to ¬r (i.e., the next loop will move in the opposite direction)
   4. Decrease n by one

When the algorithm stops (n = 0), the rendering is left in the state as described. The content is not reset to its initial position. The exception is when ‘marquee-play-count’ is ‘0’. In that case, no looping occurs but the rendering is as it would have been after 2 loops.

The content of an element moves as one piece. E.g., if an element has two lines of text, both lines scroll together, even if only one of them overflows.

7. The ‘marquee-play-count’ property

This property specifies how many times the content moves. UAs should restart the loop count every time the element turns from completely invisible into (fully or partially) visible. E.g., an element that is outside the viewport starts moving when it is scrolled into view.

A UA may also take the visibility of the UA viewport itself into account, e.g., if the element is hidden behind a pop-up window or if the UA is iconified.

If ‘marquee-play-count’ is different for different states of the element, e.g., ‘p {marquee-play-count: 0} p:hover {marquee-play-count: infinite}’, the loop counter must be reset each time the element enters a state with a different computed value.

li {overflow: auto; overflow-style: marquee; marquee-play-count: 0}
li:focus, li:hover {marquee-play-count: 1}

If the specified value is ‘infinite’ or greater than 16, the UA may stop after 16 loops.

8. The ‘marquee-direction’ property

This property determines the initial direction in which the content moves if the marquee effect is used. ‘Forward’ moves the text so that hidden text appears in the normal reading order, ‘reverse’ does the opposite. The actual direction therefore depends on ‘direction’ and ‘overflow-style’ of the element, as follows:

Note that ‘marquee-style: alternate’ moves content in the opposite direction from this table on every other loop.

Note that the ‘direction’ property is often set by rules in the UA style sheet based on mark-up in the document, as recommended in CSS 2.1 [CSS21] section 9.10 (“Text direction: the direction and unicode-bidi properties”).

9. The ‘marquee-speed’ property

This property determines how fast the content scrolls. The actual speed depends on the UA and the type of content. But, for a given UA and a given element, the following must always be true: slow < normal < fast.

10. Conformance

A document or implementation cannot conform to this module alone, but can claim conformance as part of conforming to CSS or another language that normatively references this module. An example of such a language is the CSS Mobile Profile [CSS-MOBILE]. Conformance is defined for the following kinds of objects. UAs may fall in more than one category.

style sheet

A CSS style sheet (or a complete unit of another language that normatively references this module) conforms, if, for all properties from this module that it contains, it satisfies the syntax defined here.

UA that does not render

A UA that reads style sheets without rendering any content (e.g., a validator or pretty-printer), conforms if it accepts all the style sheets that satisfy the syntax defined by this module.

UA that generates CSS

A UA that generates style sheets or CSS fragments in the context of some other language (e.g., an authoring tool or pretty-printer), conforms if, for all properties defined here, it only generates syntax that conforms to this module.

renderer

A UA that renders content (e.g., a browser) conforms if it behaves as described by this module as modified by the language it claims conformance to.

For example, the Mobile Profile [CSS-MOBILE] requires that a rendering UA behave as described here for all properties, while the Print Profile [CSS-PRINT] allows a UA to ignore them.

11. Acknowledgments

The marquee properties were first described in “Wireless CSS,” the CSS profile of the Open Mobile Alliance (OMA), now unified with the CSS Mobile Profile [CSS-MOBILE].

Among the members of the CSS working group, Elika Etemad deserves special thanks, for giving so many concrete suggestions for improvements.

12. Changes

This document is the same as the last draft, except for one non-normative change. The “disposition of comments” explains in more detail how the (two) comments on the last draft were answered.

References

Normative references:

[CSS21]

Bert Bos; et al. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. 19 July 2007. W3C Candidate Recommendation. (Work in progress.) URL: http://www.w3.org/TR/2007/CR-CSS21-20070719

Informative references:

[CSS-MOBILE]

Svante Schubert. CSS Mobile Profile 2.0. 19 October 2007. W3C Working Draft. (Work in progress.) URL: http://www.w3.org/TR/2007/WD-css-mobile-20071019

[CSS-PRINT]

Melinda Grant. CSS Print Profile. 13 October 2006. W3C Working Draft. (Work in progress.) URL: http://www.w3.org/TR/2006/WD-css-print-20061013

[CSS3CASCADE]

Håkon Wium Lie. CSS3 module: Cascading and inheritance. 15 December 2005. W3C Working Draft. (Work in progress.) URL: http://www.w3.org/TR/2005/WD-css3-cascade-20051215

[CSS3TEXTLAYOUT]

Elika J. Etemad; Paul Nelson. CSS3 Text Layout Module. (forthcoming). W3C Working Draft. (Work in progress.)

[MEDIAQ]

Håkon Wium Lie; Tantek Çelik; Daniel Glazman. Media Queries. 6 June 2007. W3C Candidate Recommendation. (Work in progress.) URL: http://www.w3.org/TR/2007/CR-css3-mediaqueries-20070606

Index

• conformance, #
• CSS Mobile Profile, #
• direction, #
• display, #
• element, #
• glossary, #
• margin-left, #
• margin-right, #
• marquee-direction, #
• marquee-play-count, #
• marquee-speed, #
• marquee-style, #
• overflow, #
• overflow-style, #
• style sheet, #
• UA, #
• used value, #
• width, #

Property index