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.
The features in this module were previously described in a draft of the CSS Box module.
This CSS module depends on the following other CSS modules:
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.
Editorial notes look like this. They will be removed before the document becomes Candidate Recommendation.
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.
Furthermore, the following writing modes are defined for the purpose of this module. An element can have at most one of these writing mode. (Although child elements can have different writing modes from their parent.)
Note: A separate module, currently called the CSS Text Layout Module [[CSS3TEXTLAYOUT]], is expected to define writing modes more precisely, in particular what properties can change the writing mode.
Note that top-bottom is the usual writing mode for English and the only writing mode in CSS level 2. Right-left is a common writing mode for Japanese. Left-right is the normal writing mode for the Uyghur script.
| 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.
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.
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.
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', the writing mode and 'overflow-style' of the element, as follows:
| 'overflow-style' | writing mode | 'direction' | ''forward'' | ''reverse'' |
|---|---|---|---|---|
| ''marquee-line'' | top-bottom | ''ltr'' | left | right |
| ''rtl'' | right | left | ||
| right-left/left-right | ''ltr'' | up | down | |
| ''rtl'' | down | up | ||
| ''marquee-block'' | top-bottom | ''ltr''/''rtl'' | up | down |
| right-left | ''ltr''/''rtl'' | right | left | |
| left-right | ''ltr''/''rtl'' | left | right |
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: