You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1147 lines
37 KiB
1147 lines
37 KiB
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
|
|
|
<html>
|
|
<head lang=en profile="http://www.w3.org/2006/03/hcard
|
|
http://microformats.org/wiki/rel-license">
|
|
<title>CSS Marquee Module Level 3</title>
|
|
|
|
<style type="text/css">
|
|
img.illustration {float: right; max-height: 4.8em; margin: 0 0 0.5em 1em;
|
|
clear: right}
|
|
dd ol {margin-top: 0; margin-bottom: 0}
|
|
</style>
|
|
<link href=default.css rel=stylesheet title=Default type="text/css">
|
|
<link href="http://www.w3.org/StyleSheets/TR/W3C-CR.css" rel=stylesheet
|
|
title=Default type="text/css">
|
|
|
|
<body>
|
|
<div class=head> <!--begin-logo-->
|
|
<p><a href="http://www.w3.org/"><img alt=W3C height=48
|
|
src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->
|
|
|
|
<h1>CSS Marquee Module Level 3</h1>
|
|
|
|
<h2 class="no-num no-toc" id=w3c-candidate>W3C Candidate Recommendation 5
|
|
December 2008</h2>
|
|
|
|
<dl>
|
|
<dt>This version:
|
|
|
|
<dd><a href="http://www.w3.org/TR/2008/CR-css3-marquee-20081205">
|
|
http://www.w3.org/TR/2008/CR-css3-marquee-20081205</a>
|
|
|
|
<dt>Latest version:
|
|
|
|
<dd><a href="http://www.w3.org/TR/css3-marquee">
|
|
http://www.w3.org/TR/css3-marquee</a>
|
|
|
|
<dt>Previous version:
|
|
|
|
<dd><a href="http://www.w3.org/TR/2008/WD-css3-marquee-20080801">
|
|
http://www.w3.org/TR/2008/WD-css3-marquee-20080801</a>
|
|
|
|
<dt>Editors:
|
|
|
|
<dd class=vcard><span class=fn>Bert Bos</span> (<span
|
|
class=org>W3C</span>) <<a class=email
|
|
href="mailto:bert@w3.org">bert@w3.org</a>>
|
|
</dl>
|
|
<!--begin-copyright-->
|
|
<p class=copyright><a
|
|
href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
|
|
rel=license>Copyright</a> © 2008 <a
|
|
href="http://www.w3.org/"><acronym title="World Wide Web
|
|
Consortium">W3C</acronym></a><sup>®</sup> (<a
|
|
href="http://www.csail.mit.edu/"><acronym title="Massachusetts Institute
|
|
of Technology">MIT</acronym></a>, <a
|
|
href="http://www.ercim.org/"><acronym title="European Research Consortium
|
|
for Informatics and Mathematics">ERCIM</acronym></a>, <a
|
|
href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a
|
|
href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
|
|
<a
|
|
href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
|
|
and <a
|
|
href="http://www.w3.org/Consortium/Legal/copyright-documents">document
|
|
use</a> rules apply.</p>
|
|
<!--end-copyright-->
|
|
<hr title="Separator for header">
|
|
</div>
|
|
|
|
<h2 class="no-num no-toc" id=abstract>Abstract</h2>
|
|
|
|
<p><abbr title="Cascading Style Sheets">CSS</abbr> 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.
|
|
|
|
|
|
<h2 class="no-toc no-num" id=status>Status of this document</h2>
|
|
<!--begin-status-->
|
|
|
|
<p><em>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 <a href="http://www.w3.org/TR/">W3C technical reports
|
|
index at http://www.w3.org/TR/.</a></em>
|
|
|
|
<p>This document was produced by the <a href="/Style/CSS/members">CSS
|
|
Working Group</a> as a <a href="/TR/#CR">Candidate Recommendation.</a>
|
|
|
|
<p>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 (<a
|
|
href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
|
|
mailing list <a href="mailto:www-style@w3.org">www-style@w3.org</a> (see
|
|
<a href="http://www.w3.org/Mail/Request">instructions</a>). When sending
|
|
e-mail, please put the text “css3-marquee” in the subject,
|
|
preferably like this: “[<!---->css3-marquee<!---->]
|
|
<em>…summary of comment…</em>”
|
|
|
|
<p>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.
|
|
|
|
<p>This document was produced by a group operating under the <a
|
|
href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February
|
|
2004 W3C Patent Policy</a>. W3C maintains a <a
|
|
href="/2004/01/pp-impl/32061/status" rel=disclosure>public list of any
|
|
patent disclosures</a> 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 <a
|
|
href="/Consortium/Patent-Policy-20040205/#def-essential">Essential
|
|
Claim(s)</a> must disclose the information in accordance with <a
|
|
href="/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the
|
|
W3C Patent Policy</a>.</p>
|
|
<!--end-status-->
|
|
|
|
<p class=mtb>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.
|
|
|
|
<p>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:
|
|
|
|
<dl>
|
|
<dt>independent
|
|
|
|
<dd>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.
|
|
|
|
<dt>interoperable
|
|
|
|
<dd>passing the respective test case(s) in the official <a
|
|
href="/Style/CSS/Test/">CSS test suite,</a> 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.
|
|
|
|
<dt>implementation
|
|
|
|
<dd>a user agent which:
|
|
<ol>
|
|
<li>implements the specification.
|
|
|
|
<li>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.
|
|
|
|
<li>is not experimental (i.e. a version specifically designed to pass
|
|
the test suite and is not intended for normal usage going forward).
|
|
</ol>
|
|
</dl>
|
|
|
|
<p class=mtb>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 <a href="#CSS21"
|
|
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. It is expected that this
|
|
specification will be updated and generalized to include vertical text,
|
|
once the CSS Text Layout module <a href="#CSS3TEXTLAYOUT"
|
|
rel=biblioentry>[CSS3TEXTLAYOUT]<!--{{CSS3TEXTLAYOUT}}--></a> is stable.
|
|
|
|
<h2 class="no-num no-toc" id=table>Table of contents</h2>
|
|
<!--begin-toc-->
|
|
|
|
<ul class=toc>
|
|
<li><a href="#dependencies"><span class=secno>1. </span>Dependencies on
|
|
other modules</a>
|
|
|
|
<li><a href="#introduction"><span class=secno>2. </span>Introduction</a>
|
|
|
|
<li><a href="#how-to"><span class=secno>3. </span>How to read this
|
|
specification</a>
|
|
|
|
<li><a href="#terminology"><span class=secno>4. </span>Terminology</a>
|
|
|
|
<li><a href="#the-overflow-style"><span class=secno>5. </span>The
|
|
‘<code class=property>overflow-style</code>’ property</a>
|
|
|
|
<li><a href="#the-marquee-style"><span class=secno>6. </span>The
|
|
‘<code class=property>marquee-style</code>’ property</a>
|
|
|
|
<li><a href="#the-marquee-play-count"><span class=secno>7. </span>The
|
|
‘<code class=property>marquee-play-count</code>’ property</a>
|
|
|
|
|
|
<li><a href="#the-marquee-direction"><span class=secno>8. </span>The
|
|
‘<code class=property>marquee-direction</code>’ property</a>
|
|
|
|
<li><a href="#the-marquee-speed"><span class=secno>9. </span>The
|
|
‘<code class=property>marquee-speed</code>’ property</a>
|
|
|
|
<li><a href="#conformance"><span class=secno>10. </span>Conformance</a>
|
|
|
|
<li><a href="#acknowledgments"><span class=secno>11.
|
|
</span>Acknowledgments</a>
|
|
|
|
<li><a href="#changes"><span class=secno>12. </span>Changes</a>
|
|
|
|
<li class=no-num><a href="#references">References</a>
|
|
|
|
<li class=no-num><a href="#index">Index</a>
|
|
|
|
<li class=no-num><a href="#property">Property index</a>
|
|
</ul>
|
|
<!--end-toc-->
|
|
|
|
<h2 id=dependencies><span class=secno>1. </span>Dependencies on other
|
|
modules</h2>
|
|
|
|
<p>This CSS module depends on the following other CSS modules:
|
|
|
|
<ul>
|
|
<li><cite>Cascading Style Sheets Level 2 Revision 1</cite> <a
|
|
href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> for the
|
|
properties <dfn id=overflow>overflow</dfn>, <dfn
|
|
id=display>display</dfn>, <dfn id=width>width</dfn>, <dfn
|
|
id=margin-left>margin-left</dfn>, <dfn
|
|
id=margin-right>margin-right</dfn>, and <dfn
|
|
id=direction>direction</dfn>.
|
|
</ul>
|
|
|
|
<h2 id=introduction><span class=secno>2. </span>Introduction</h2>
|
|
|
|
<p>(This section is not normative.)
|
|
|
|
<p class=mtb>The marquee effect consists of the <abbr title="User
|
|
Agent">UA</abbr> 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.
|
|
|
|
<div class=example>
|
|
<p>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):
|
|
|
|
<pre>
|
|
li {overflow: auto; overflow-style: marquee-line; white-space: nowrap}
|
|
</pre>
|
|
</div>
|
|
|
|
<h2 id=how-to><span class=secno>3. </span>How to read this specification</h2>
|
|
|
|
<p>All sections are normative, unless stated otherwise.
|
|
|
|
<div class=example>
|
|
<p>Examples look like this and normally start with the word
|
|
“Example.” Examples are not normative.
|
|
</div>
|
|
|
|
<p class=note>Notes look like this and normally start with the word
|
|
“Note.” Notes are not normative. <!--
|
|
<p class=issue>Editorial notes look like this. They will be removed before
|
|
the document becomes Candidate Recommendation.
|
|
-->
|
|
|
|
|
|
<p>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 <a
|
|
href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> for the
|
|
meaning. The “Inherited” and “Initial” rows in the
|
|
table are used by the Cascading and Inheritance module <a
|
|
href="#CSS3CASCADE"
|
|
rel=biblioentry>[CSS3CASCADE]<!--{{CSS3CASCADE}}--></a> and
|
|
“Media” by the Media Queries specification <a href="#MEDIAQ"
|
|
rel=biblioentry>[MEDIAQ]<!--{{MEDIAQ}}--></a>.
|
|
|
|
<h2 id=terminology><span class=secno>4. </span>Terminology</h2>
|
|
|
|
<p>A <span class=index id=glossary>glossary</span> of technical terms (<dfn
|
|
id=ua>UA</dfn>, <dfn id=used-value>used value</dfn>, <dfn id=style>style
|
|
sheet</dfn>, <dfn id=element>element</dfn>, etc.) can be found in
|
|
chapter 3 of CSS level 2 <a href="#CSS21"
|
|
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. The specification may refer
|
|
to the <em>specified value,</em> the <em><a href="#used-value">used
|
|
value</a></em> and the <em>computed value</em> of a property as defined in
|
|
CSS 2.1 <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>.
|
|
Unless stated explicitly, the short form “value” means the computed
|
|
value.
|
|
|
|
<h2 id=the-overflow-style><span class=secno>5. </span>The ‘<code
|
|
class=property><a href="#overflow-style">overflow-style</a></code>’
|
|
property</h2>
|
|
|
|
<table class=propdef id=name->
|
|
<tbody>
|
|
<tr>
|
|
<td>Name:
|
|
|
|
<td><dfn id=overflow-style>overflow-style</dfn>
|
|
|
|
<tr>
|
|
<td>Value:
|
|
|
|
<td>auto | marquee-line | marquee-block
|
|
|
|
<tr>
|
|
<td>Initial:
|
|
|
|
<td>auto
|
|
|
|
<tr>
|
|
<td>Applies to:
|
|
|
|
<td>same as ‘<code class=property><a
|
|
href="#overflow">overflow</a></code>’
|
|
|
|
<tr>
|
|
<td>Inherited:
|
|
|
|
<td>yes
|
|
|
|
<tr>
|
|
<td>Percentages:
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<td>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<td>Computed value:
|
|
|
|
<td>as specified
|
|
</table>
|
|
|
|
<p>This property specifies the preferred scrolling method for elements that
|
|
overflow (see the ‘<code class=property><a
|
|
href="#overflow">overflow</a></code>’ property.) If the UA does not
|
|
support the specified value, it must act as if the value was ‘<code
|
|
class=css>auto</code>’.
|
|
|
|
<dl>
|
|
<dt>auto
|
|
|
|
<dd>The UA chooses the scrolling mechanism. Marquees and scrollbars are
|
|
common mechanisms, but the UA may also use others.
|
|
|
|
<dt>marquee-line
|
|
|
|
<dd>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.
|
|
|
|
|
|
<dt>marquee-block
|
|
|
|
<dd>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.
|
|
</dl>
|
|
|
|
<h2 id=the-marquee-style><span class=secno>6. </span>The ‘<code
|
|
class=property><a href="#marquee-style">marquee-style</a></code>’
|
|
property</h2>
|
|
|
|
<table class=propdef id=name-0>
|
|
<tbody>
|
|
<tr>
|
|
<td>Name:
|
|
|
|
<td><dfn id=marquee-style>marquee-style</dfn>
|
|
|
|
<tr>
|
|
<td>Value:
|
|
|
|
<td>scroll | slide | alternate
|
|
|
|
<tr>
|
|
<td>Initial:
|
|
|
|
<td>scroll
|
|
|
|
<tr>
|
|
<td>Applies to:
|
|
|
|
<td>same as ‘<code class=property><a
|
|
href="#overflow">overflow</a></code>’
|
|
|
|
<tr>
|
|
<td>Inherited:
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<td>Percentages:
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<td>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<td>Computed value:
|
|
|
|
<td>as specified
|
|
</table>
|
|
|
|
<p>The values are:
|
|
|
|
<dl>
|
|
<dt>scroll
|
|
|
|
<dd>
|
|
<p>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 ‘<code class=property><a
|
|
href="#marquee-direction">marquee-direction</a></code>’). The
|
|
other directions are analogous.
|
|
|
|
<ol>
|
|
<li>Set the element to clip the overflow to the left and to the right
|
|
|
|
<li>Create an anonymous box <var>B</var> around the content; set its
|
|
‘<code class=property><a href="#width">width</a></code>’ so
|
|
as to include all content and all overflow exactly; set its
|
|
‘<code class=property><a
|
|
href="#margin-right">margin-right</a></code>’ to ‘<code
|
|
class=css>auto</code>’
|
|
|
|
<li>Set <var>n</var> to the value of ‘<code class=property><a
|
|
href="#marquee-play-count">marquee-play-count</a></code>’
|
|
|
|
<li>While <var>n</var> ≠ 0:
|
|
<ol>
|
|
<li>Set ‘<code class=property><a
|
|
href="#margin-left">margin-left</a></code>’ of <var>B</var> to
|
|
100% (i.e., all contents is off to the right and thus invisible)
|
|
|
|
<li>Decrease ‘<code class=property><a
|
|
href="#margin-left">margin-left</a></code>’ at constant speed
|
|
(see ‘<code class=property><a
|
|
href="#marquee-speed">marquee-speed</a></code>’) until
|
|
‘<code class=property><a
|
|
href="#margin-right">margin-right</a></code>’ is 100% (i.e.,
|
|
all content is off to the left and thus invisible)
|
|
|
|
<li>Decrease <var>n</var> by one
|
|
</ol>
|
|
</ol>
|
|
|
|
<dt>slide
|
|
|
|
<dd>
|
|
<p>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 ‘<code
|
|
class=property><a
|
|
href="#marquee-direction">marquee-direction</a></code>’). The
|
|
other directions are analogous.
|
|
|
|
<ol>
|
|
<li>Set the element to clip the overflow to the left and to the right
|
|
|
|
<li>Create an anonymous box <var>B</var> around the content; set its
|
|
‘<code class=property><a href="#width">width</a></code>’ so
|
|
as to include all content and all overflow exactly; set its
|
|
‘<code class=property><a
|
|
href="#margin-right">margin-right</a></code>’ to ‘<code
|
|
class=css>auto</code>’
|
|
|
|
<li>Set <var>n</var> to the value of ‘<code class=property><a
|
|
href="#marquee-play-count">marquee-play-count</a></code>’
|
|
|
|
<li>While <var>n</var> ≠ 0:
|
|
<ol>
|
|
<li>Set ‘<code class=property><a
|
|
href="#margin-left">margin-left</a></code>’ of <var>B</var> to
|
|
100% (i.e., all contents is off to the right and thus invisible)
|
|
|
|
<li>Decrease ‘<code class=property><a
|
|
href="#margin-left">margin-left</a></code>’ at constant speed
|
|
(see ‘<code class=property><a
|
|
href="#marquee-speed">marquee-speed</a></code>’) until
|
|
‘<code class=property><a
|
|
href="#margin-right">margin-right</a></code>’ is 0
|
|
|
|
<li>Decrease <var>n</var> by one
|
|
</ol>
|
|
</ol>
|
|
|
|
<dt>alternate
|
|
|
|
<dd>
|
|
<p>Bounce back and forth. The following pseudo-code defines the behavior
|
|
when the initial marquee direction is to the left (see ‘<code
|
|
class=property><a
|
|
href="#marquee-direction">marquee-direction</a></code>’). The
|
|
other directions are analogous.
|
|
|
|
<ol>
|
|
<li>Set the element to clip the overflow to the left and to the right
|
|
|
|
<li>Create an anonymous box <var>B</var> around the content; set its
|
|
‘<code class=property><a href="#width">width</a></code>’ so
|
|
as to include all content and all overflow exactly
|
|
|
|
<li>Set <var>r</var> to false
|
|
|
|
<li>Set <var>n</var> to the value of ‘<code class=property><a
|
|
href="#marquee-play-count">marquee-play-count</a></code>’
|
|
|
|
<li>While <var>n</var> ≠ 0:
|
|
<ol>
|
|
<li>If <var>r</var>, set ‘<code class=property><a
|
|
href="#margin-right">margin-right</a></code>’ of <var>B</var>
|
|
to 0 and ‘<code class=property><a
|
|
href="#margin-left">margin-left</a></code>’ to ‘<code
|
|
class=css>auto</code>’; else, set ‘<code
|
|
class=property><a href="#margin-left">margin-left</a></code>’
|
|
of <var>B</var> to 0 and ‘<code class=property><a
|
|
href="#margin-right">margin-right</a></code>’ to ‘<code
|
|
class=css>auto</code>’
|
|
|
|
<li>If <var>r</var>, decrease ‘<code class=property><a
|
|
href="#margin-right">margin-right</a></code>’ at constant speed
|
|
(see ‘<code class=property><a
|
|
href="#marquee-speed">marquee-speed</a></code>’) until
|
|
‘<code class=property><a
|
|
href="#margin-left">margin-left</a></code>’ is 0; else,
|
|
decrease ‘<code class=property><a
|
|
href="#margin-left">margin-left</a></code>’ at constant speed
|
|
until ‘<code class=property><a
|
|
href="#margin-right">margin-right</a></code>’ is 0
|
|
|
|
<li>Set <var>r</var> to <var>¬r</var> (i.e., the next loop will
|
|
move in the opposite direction)
|
|
|
|
<li>Decrease <var>n</var> by one
|
|
</ol>
|
|
</ol>
|
|
</dl>
|
|
|
|
<div class=figure>
|
|
<p><img alt="Three images: content to the right of a box, content
|
|
overlapping the box, content to the left of the box." src=marquee-scroll>
|
|
|
|
|
|
<p class=caption>This figure shows one loop of ‘<code
|
|
class=css>marquee-style: scroll</code>’. 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.
|
|
</div>
|
|
|
|
<div class=figure>
|
|
<p><img alt="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." src=marquee-slide>
|
|
|
|
<p class=caption>This figure shows one loop of ‘<code
|
|
class=css>marquee-style: slide</code>’. 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.
|
|
</div>
|
|
|
|
<div class=figure>
|
|
<p><img alt="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."
|
|
src=marquee-alternate>
|
|
|
|
<p class=caption>This figure show <em>two</em> loops of ‘<code
|
|
class=css>marquee-style: alternate</code>’. 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).
|
|
</div>
|
|
|
|
<p>When the algorithm stops (<var>n</var> = 0), the rendering is left in
|
|
the state as described. The content is not reset to its initial position.
|
|
The exception is when ‘<code class=property><a
|
|
href="#marquee-play-count">marquee-play-count</a></code>’ is
|
|
‘<code class=css>0</code>’. In that case, no looping occurs
|
|
but the rendering is as it would have been after 2 loops.
|
|
|
|
<p>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.
|
|
|
|
<h2 id=the-marquee-play-count><span class=secno>7. </span>The ‘<code
|
|
class=property><a
|
|
href="#marquee-play-count">marquee-play-count</a></code>’ property</h2>
|
|
|
|
<table class=propdef id=name-1>
|
|
<tbody>
|
|
<tr>
|
|
<td>Name:
|
|
|
|
<td><dfn id=marquee-play-count>marquee-play-count</dfn>
|
|
|
|
<tr>
|
|
<td>Value:
|
|
|
|
<td><var><non-negative-integer></var> | infinite
|
|
|
|
<tr>
|
|
<td>Initial:
|
|
|
|
<td>1
|
|
|
|
<tr>
|
|
<td>Applies to:
|
|
|
|
<td>same as ‘<code class=property><a
|
|
href="#overflow">overflow</a></code>’
|
|
|
|
<tr>
|
|
<td>Inherited:
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<td>Percentages:
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<td>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<td>Computed value:
|
|
|
|
<td>as specified
|
|
</table>
|
|
|
|
<p>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.
|
|
|
|
<p>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.
|
|
|
|
<p>If ‘<code class=property><a
|
|
href="#marquee-play-count">marquee-play-count</a></code>’ is
|
|
different for different states of the element, e.g., ‘<code
|
|
class=css>p {marquee-play-count: 0} p:hover {marquee-play-count:
|
|
infinite}</code>’, the loop counter must be reset each time the
|
|
element enters a state with a different computed value.
|
|
|
|
<div class=example>
|
|
<p>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 ‘<code class=property><a
|
|
href="#marquee-play-count">marquee-play-count</a></code>’ property
|
|
doesn't change and thus the content doesn't move again:
|
|
|
|
<pre>
|
|
li {overflow: auto; overflow-style: marquee; marquee-play-count: 0}
|
|
li:focus, li:hover {marquee-play-count: 1}
|
|
</pre>
|
|
</div>
|
|
|
|
<p>If the specified value is ‘<code class=css>infinite</code>’
|
|
or greater than 16, the UA may stop after 16 loops.
|
|
|
|
<h2 id=the-marquee-direction><span class=secno>8. </span>The ‘<code
|
|
class=property><a
|
|
href="#marquee-direction">marquee-direction</a></code>’ property</h2>
|
|
|
|
<table class=propdef id=name-2>
|
|
<tbody>
|
|
<tr>
|
|
<td>Name:
|
|
|
|
<td><dfn id=marquee-direction>marquee-direction</dfn>
|
|
|
|
<tr>
|
|
<td>Value:
|
|
|
|
<td>forward | reverse
|
|
|
|
<tr>
|
|
<td>Initial:
|
|
|
|
<td>forward
|
|
|
|
<tr>
|
|
<td>Applies to:
|
|
|
|
<td>same as ‘<code class=property><a
|
|
href="#overflow">overflow</a></code>’
|
|
|
|
<tr>
|
|
<td>Inherited:
|
|
|
|
<td>yes
|
|
|
|
<tr>
|
|
<td>Percentages:
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<td>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<td>Computed value:
|
|
|
|
<td>as specified
|
|
</table>
|
|
|
|
<p>This property determines the initial direction in which the content
|
|
moves if the marquee effect is used. ‘<code
|
|
class=css>Forward</code>’ moves the text so that hidden text appears
|
|
in the normal reading order, ‘<code class=css>reverse</code>’
|
|
does the opposite. The actual direction therefore depends on ‘<code
|
|
class=property><a href="#direction">direction</a></code>’ and
|
|
‘<code class=property><a
|
|
href="#overflow-style">overflow-style</a></code>’ of the element, as
|
|
follows:
|
|
|
|
<table class=equiv-table>
|
|
<thead>
|
|
<tr>
|
|
<th>‘<code class=property><a
|
|
href="#overflow-style">overflow-style</a></code>’
|
|
|
|
<th>‘<code class=property><a
|
|
href="#direction">direction</a></code>’
|
|
|
|
<th>‘<code class=css>forward</code>’
|
|
|
|
<th>‘<code class=css>reverse</code>’
|
|
|
|
<tbody>
|
|
<tr>
|
|
<th rowspan=2>‘<code class=css>marquee-line</code>’
|
|
|
|
<th>‘<code class=css>ltr</code>’
|
|
|
|
<td>left
|
|
|
|
<td>right
|
|
|
|
<tr>
|
|
<th>‘<code class=css>rtl</code>’
|
|
|
|
<td>right
|
|
|
|
<td>left
|
|
|
|
<tr>
|
|
<th>‘<code class=css>marquee-block</code>’
|
|
|
|
<td>
|
|
|
|
<td>up
|
|
|
|
<td>down
|
|
</table>
|
|
|
|
<p class=note>Note that ‘<code class=css>marquee-style:
|
|
alternate</code>’ moves content in the opposite direction from this
|
|
table on every other loop.
|
|
|
|
<p class=note>Note that the ‘<code class=property><a
|
|
href="#direction">direction</a></code>’ property is often set by
|
|
rules in the UA style sheet based on mark-up in the document, as
|
|
recommended in CSS 2.1 <a href="#CSS21"
|
|
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> <a
|
|
href="/TR/CSS21/visuren.html#direction">section 9.10 (“Text
|
|
direction: the direction and unicode-bidi properties”).</a>
|
|
|
|
<h2 id=the-marquee-speed><span class=secno>9. </span>The ‘<code
|
|
class=property><a href="#marquee-speed">marquee-speed</a></code>’
|
|
property</h2>
|
|
|
|
<table class=propdef id=name-3>
|
|
<tbody>
|
|
<tr>
|
|
<td>Name:
|
|
|
|
<td><dfn id=marquee-speed>marquee-speed</dfn>
|
|
|
|
<tr>
|
|
<td>Value:
|
|
|
|
<td>slow | normal | fast
|
|
|
|
<tr>
|
|
<td>Initial:
|
|
|
|
<td>normal
|
|
|
|
<tr>
|
|
<td>Applies to:
|
|
|
|
<td>same as ‘<code class=property><a
|
|
href="#overflow">overflow</a></code>’
|
|
|
|
<tr>
|
|
<td>Inherited:
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<td>Percentages:
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<td>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<td>Computed value:
|
|
|
|
<td>as specified
|
|
</table>
|
|
|
|
<p>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.
|
|
|
|
<h2 id=conformance><span class=secno>10. </span>Conformance</h2>
|
|
|
|
<p>A document or implementation cannot conform to this module alone, but
|
|
can claim <span class=index id=conformance0>conformance</span> as part of
|
|
conforming to CSS or another language that normatively references this
|
|
module. An example of such a language is the <span class=index
|
|
id=css-mobile0>CSS Mobile Profile</span> <a href="#CSS-MOBILE"
|
|
rel=biblioentry>[CSS-MOBILE]<!--{{CSS-MOBILE}}--></a>. Conformance is
|
|
defined for the following kinds of objects. UAs may fall in more than one
|
|
category.
|
|
|
|
<dl>
|
|
<dt>style sheet
|
|
|
|
<dd>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.
|
|
|
|
<dt>UA that does not render
|
|
|
|
<dd>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.
|
|
|
|
<dt>UA that generates CSS
|
|
|
|
<dd>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.
|
|
|
|
<dt>renderer
|
|
|
|
<dd>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.
|
|
</dl>
|
|
|
|
<p class=example>For example, the Mobile Profile <a href="#CSS-MOBILE"
|
|
rel=biblioentry>[CSS-MOBILE]<!--{{CSS-MOBILE}}--></a> requires that a
|
|
rendering UA behave as described here for all properties, while the Print
|
|
Profile <a href="#CSS-PRINT"
|
|
rel=biblioentry>[CSS-PRINT]<!--{{CSS-PRINT}}--></a> allows a UA to ignore
|
|
them.
|
|
|
|
<h2 id=acknowledgments><span class=secno>11. </span>Acknowledgments</h2>
|
|
|
|
<p>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 <a href="#CSS-MOBILE"
|
|
rel=biblioentry>[CSS-MOBILE]<!--{{CSS-MOBILE}}--></a>.
|
|
|
|
<p>Among the members of the CSS working group, Elika Etemad deserves
|
|
special thanks, for giving so many concrete suggestions for improvements.
|
|
|
|
<h2 id=changes><span class=secno>12. </span>Changes</h2>
|
|
|
|
<p>This document is the same as the last draft, except for one
|
|
non-normative change. The <a
|
|
href="/Style/css3-updates/css3-marquee-comments">“disposition of
|
|
comments”</a> explains in more detail how the (two) comments on the last
|
|
draft were answered.
|
|
|
|
<h2 class=no-num id=references>References</h2>
|
|
|
|
<p>Normative references: <!--begin-normative--> <!-- Sorted by label -->
|
|
|
|
<dl class=bibliography>
|
|
<dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
|
|
<!---->
|
|
|
|
<dt id=CSS21>[CSS21]
|
|
|
|
<dd>Bert Bos; et al. <a
|
|
href="http://www.w3.org/TR/2007/CR-CSS21-20070719"><cite>Cascading Style
|
|
Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 19 July
|
|
2007. W3C Candidate Recommendation. (Work in progress.) URL: <a
|
|
href="http://www.w3.org/TR/2007/CR-CSS21-20070719">http://www.w3.org/TR/2007/CR-CSS21-20070719</a>
|
|
</dd>
|
|
<!---->
|
|
</dl>
|
|
<!--end-normative-->
|
|
|
|
<p class=no-num>Informative references: <!--begin-informative-->
|
|
<!-- Sorted by label -->
|
|
|
|
<dl class=bibliography>
|
|
<dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
|
|
<!---->
|
|
|
|
<dt id=CSS-MOBILE>[CSS-MOBILE]
|
|
|
|
<dd>Svante Schubert. <a
|
|
href="http://www.w3.org/TR/2007/WD-css-mobile-20071019"><cite>CSS Mobile
|
|
Profile 2.0.</cite></a> 19 October 2007. W3C Working Draft. (Work in
|
|
progress.) URL: <a
|
|
href="http://www.w3.org/TR/2007/WD-css-mobile-20071019">http://www.w3.org/TR/2007/WD-css-mobile-20071019</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=CSS-PRINT>[CSS-PRINT]
|
|
|
|
<dd>Melinda Grant. <a
|
|
href="http://www.w3.org/TR/2006/WD-css-print-20061013"><cite>CSS Print
|
|
Profile.</cite></a> 13 October 2006. W3C Working Draft. (Work in
|
|
progress.) URL: <a
|
|
href="http://www.w3.org/TR/2006/WD-css-print-20061013">http://www.w3.org/TR/2006/WD-css-print-20061013</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=CSS3CASCADE>[CSS3CASCADE]
|
|
|
|
<dd>Håkon Wium Lie. <a
|
|
href="http://www.w3.org/TR/2005/WD-css3-cascade-20051215"><cite>CSS3
|
|
module: Cascading and inheritance.</cite></a> 15 December 2005. W3C
|
|
Working Draft. (Work in progress.) URL: <a
|
|
href="http://www.w3.org/TR/2005/WD-css3-cascade-20051215">http://www.w3.org/TR/2005/WD-css3-cascade-20051215</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=CSS3TEXTLAYOUT>[CSS3TEXTLAYOUT]
|
|
|
|
<dd>Elika J. Etemad; Paul Nelson. <cite>CSS3 Text Layout Module.</cite>
|
|
(forthcoming). W3C Working Draft. (Work in progress.)</dd>
|
|
<!---->
|
|
|
|
<dt id=MEDIAQ>[MEDIAQ]
|
|
|
|
<dd>Håkon Wium Lie; Tantek Çelik; Daniel Glazman. <a
|
|
href="http://www.w3.org/TR/2007/CR-css3-mediaqueries-20070606"><cite>Media
|
|
Queries.</cite></a> 6 June 2007. W3C Candidate Recommendation. (Work in
|
|
progress.) URL: <a
|
|
href="http://www.w3.org/TR/2007/CR-css3-mediaqueries-20070606">http://www.w3.org/TR/2007/CR-css3-mediaqueries-20070606</a>
|
|
</dd>
|
|
<!---->
|
|
</dl>
|
|
<!--end-informative-->
|
|
|
|
<h2 class=no-num id=index>Index</h2>
|
|
<!--begin-index-->
|
|
|
|
<ul class=indexlist>
|
|
<li>conformance, <a href="#conformance0" title=conformance>#</a>
|
|
|
|
<li>CSS Mobile Profile, <a href="#css-mobile0" title="CSS Mobile
|
|
Profile">#</a>
|
|
|
|
<li>direction, <a href="#direction" title=direction><strong>#</strong></a>
|
|
|
|
|
|
<li>display, <a href="#display" title=display><strong>#</strong></a>
|
|
|
|
<li>element, <a href="#element" title=element><strong>#</strong></a>
|
|
|
|
<li>glossary, <a href="#glossary" title=glossary>#</a>
|
|
|
|
<li>margin-left, <a href="#margin-left"
|
|
title=margin-left><strong>#</strong></a>
|
|
|
|
<li>margin-right, <a href="#margin-right"
|
|
title=margin-right><strong>#</strong></a>
|
|
|
|
<li>marquee-direction, <a href="#marquee-direction"
|
|
title=marquee-direction><strong>#</strong></a>
|
|
|
|
<li>marquee-play-count, <a href="#marquee-play-count"
|
|
title=marquee-play-count><strong>#</strong></a>
|
|
|
|
<li>marquee-speed, <a href="#marquee-speed"
|
|
title=marquee-speed><strong>#</strong></a>
|
|
|
|
<li>marquee-style, <a href="#marquee-style"
|
|
title=marquee-style><strong>#</strong></a>
|
|
|
|
<li>overflow, <a href="#overflow" title=overflow><strong>#</strong></a>
|
|
|
|
<li>overflow-style, <a href="#overflow-style"
|
|
title=overflow-style><strong>#</strong></a>
|
|
|
|
<li>style sheet, <a href="#style" title="style
|
|
sheet"><strong>#</strong></a>
|
|
|
|
<li>UA, <a href="#ua" title=UA><strong>#</strong></a>
|
|
|
|
<li>used value, <a href="#used-value" title="used
|
|
value"><strong>#</strong></a>
|
|
|
|
<li>width, <a href="#width" title=width><strong>#</strong></a>
|
|
</ul>
|
|
<!--end-index-->
|
|
|
|
<h2 class=no-num id=property>Property index</h2>
|
|
<!--begin-properties-->
|
|
|
|
<table class=proptable>
|
|
<thead>
|
|
<tr>
|
|
<th>Property
|
|
|
|
<th>Values
|
|
|
|
<th>Initial
|
|
|
|
<th>Applies to
|
|
|
|
<th>Inh.
|
|
|
|
<th>Percentages
|
|
|
|
<th>Media
|
|
|
|
<tbody>
|
|
<tr valign=baseline>
|
|
<td><a class=property href="#marquee-direction">marquee-direction</a>
|
|
|
|
<td>forward | reverse
|
|
|
|
<td>forward
|
|
|
|
<td>same as ‘overflow’
|
|
|
|
<td>yes
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr valign=baseline>
|
|
<td><a class=property href="#marquee-play-count">marquee-play-count</a>
|
|
|
|
<td><non-negative-integer> | infinite
|
|
|
|
<td>1
|
|
|
|
<td>same as ‘overflow’
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr valign=baseline>
|
|
<td><a class=property href="#marquee-speed">marquee-speed</a>
|
|
|
|
<td>slow | normal | fast
|
|
|
|
<td>normal
|
|
|
|
<td>same as ‘overflow’
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr valign=baseline>
|
|
<td><a class=property href="#marquee-style">marquee-style</a>
|
|
|
|
<td>scroll | slide | alternate
|
|
|
|
<td>scroll
|
|
|
|
<td>same as ‘overflow’
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr valign=baseline>
|
|
<td><a class=property href="#overflow-style">overflow-style</a>
|
|
|
|
<td>auto | marquee-line | marquee-block
|
|
|
|
<td>auto
|
|
|
|
<td>same as ‘overflow’
|
|
|
|
<td>yes
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
</table>
|
|
<!--end-properties-->
|
|
<!-- Keep this comment at the end of the file
|
|
Local variables:
|
|
mode: sgml
|
|
sgml-minimize-attributes:t
|
|
End:
|
|
-->
|