Copyright © 2008 W3C® (MIT, ERCIM, Keio), All Rights Reserved. W3C liability, trademark and document use rules apply.
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.
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.
This CSS module depends on the following other CSS modules:
(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}
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].
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.
| 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’.
| 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:
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.
auto’
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.
auto’
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.
auto’; else, set ‘margin-left’ of
B to 0 and ‘margin-right’ to ‘auto’
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.
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.
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.
| 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.
| 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-style’ | ‘direction’ | ‘forward’
| ‘reverse’
|
|---|---|---|---|
‘marquee-line’
| ‘ltr’
| left | right |
‘rtl’
| right | left | |
‘marquee-block’
| up | down |
Note that ‘marquee-style:
alternate’ moves content in the opposite direction from this
table on every other loop.
| 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.
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.
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.
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.
Normative references:
Informative references:
| 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 |