W3C

CSS Marquee Module Level 3

W3C Working Draft 1 August 2008

This version:
http://www.w3.org/TR/2008/WD-css3-marquee-20080801
Latest version:
http://www.w3.org/TR/css3-marquee
Previous version:
http://www.w3.org/TR/2007/WD-css3-box-20070809/
Editors:
Bert Bos (W3C) <>

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/.

Publication as a Working Draft 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.

The (archived) public mailing list www-style@w3.org (see instructions) is preferred for discussion of this specification. When sending e-mail, please put the text “css3-marquee” in the subject, preferably like this: “[css3-marquee] …summary of comment…

This document was produced by the CSS Working Group (part of the Style Activity).

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.

This document represents a last call for comments. The next publication may be a Candidate Recommendation. The deadline for comments is 1 September 2008.

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.

This is the first public Working Draft under this name, but the features were previously described in a draft of the CSS Box module.

Table of contents

1. Dependencies on other modules

This CSS module depends on the following other CSS modules:

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.

The following rules put the contents of each list item on a single line (unless it has hard line breaks) and causes the list items that are too wide to use a marquee effect (on UAs that support marquee):

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

3. How to read this specification

All sections are normative, unless stated otherwise.

Examples look like this and normally start with the word “Example.” Examples are not normative.

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

Name: overflow-style
Value: auto | marquee-line | marquee-block
Initial: auto
Applies to: same as ‘overflow
Inherited: yes
Percentages: N/A
Media: visual
Computed value: as specified

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

Name: marquee-style
Value: scroll | slide | alternate
Initial: scroll
Applies to: same as ‘overflow
Inherited: no
Percentages: N/A
Media: visual
Computed value: as specified

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

Three images: content to the right of a box, content
    overlapping the box, content to the left of the box.

This figure shows one loop of ‘marquee-style: scroll’. The initial state (1) has all content outside the box to the right. (2) shows an intermediate state. And the final state (3) has all content outside the box on the left.

Three images: content to the right of a box; some content in
    the box and some to the right; the right edge of the content is just
    inside the right edge of the box.

This figure shows one loop of ‘marquee-style: slide’. The initial state (1) has all content outside the box to the right. (2) shows an intermediate state. And the final state (3) has the right edge of the content just inside the right edge of the box and some content overflowing to the left of the box.

Five images: content overflows a box only on the right;
    content overflows on both sides; content overflows only on the left;
    content overflows on both sides; content overflows only on the right.

This figure show two loops of ‘marquee-style: alternate’. The initial state (1) has the left edge of the content aligned to the left edge of the box and content overflowing on the right. (2) shows an intermediate state, while the content moves to the left. The end of the first loop is state (3). (4) is an intermediate state of the second loop. (5) is the end of the second loop and is equal to state (1).

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

Name: marquee-play-count
Value: <non-negative-integer> | infinite
Initial: 1
Applies to: same as ‘overflow
Inherited: no
Percentages: N/A
Media: visual
Computed value: as specified

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.

For example, if the content of an li overflows under the following style rules, the content moves once when the li gets the focus or is hovered over. But, when it already has the focus when it is hovered over, the ‘marquee-play-count’ property doesn't change and thus the content doesn't move again:

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

Name: marquee-direction
Value: forward | reverse
Initial: forward
Applies to: same as ‘overflow
Inherited: yes
Percentages: N/A
Media: visual
Computed value: as specified

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:

overflow-styledirectionforwardreverse
marquee-lineltrleft right
rtlright left
marquee-block up down

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

9. The ‘marquee-speed’ property

Name: marquee-speed
Value: slow | normal | fast
Initial: normal
Applies to: same as ‘overflow
Inherited: no
Percentages: N/A
Media: visual
Computed value: as specified

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 desrves special thanks, for giving so many concrete suggestions for improvements.

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

Property index

Property Values Initial Applies to Inh. Percentages Media
marquee-direction forward | reverse forward same as ‘overflow’ yes N/A visual
marquee-play-count <non-negative-integer> | infinite 1 same as ‘overflow’ no N/A visual
marquee-speed slow | normal | fast normal same as ‘overflow’ no N/A visual
marquee-style scroll | slide | alternate scroll same as ‘overflow’ no N/A visual
overflow-style auto | marquee-line | marquee-block auto same as ‘overflow’ yes N/A visual