CR-css3-marquee-20081205 37.1 KB

Raw Blame History Permalink

<!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>) &lt;<a class=email
     href="mailto:bert@w3.org">bert@w3.org</a>&gt;
   </dl>
   <!--begin-copyright-->
   <p class=copyright><a
    href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
    rel=license>Copyright</a> &copy; 2008 <a
    href="http://www.w3.org/"><acronym title="World Wide Web
    Consortium">W3C</acronym></a><sup>&reg;</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 &#8220;css3-marquee&#8221; in the subject,
   preferably like this: &#8220;[<!---->css3-marquee<!---->]
   <em>&hellip;summary of comment&hellip;</em>&#8221;

  <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
    &lsquo;<code class=property>overflow-style</code>&rsquo; property</a>

   <li><a href="#the-marquee-style"><span class=secno>6. </span>The
    &lsquo;<code class=property>marquee-style</code>&rsquo; property</a>

   <li><a href="#the-marquee-play-count"><span class=secno>7. </span>The
    &lsquo;<code class=property>marquee-play-count</code>&rsquo; property</a>


   <li><a href="#the-marquee-direction"><span class=secno>8. </span>The
    &lsquo;<code class=property>marquee-direction</code>&rsquo; property</a>

   <li><a href="#the-marquee-speed"><span class=secno>9. </span>The
    &lsquo;<code class=property>marquee-speed</code>&rsquo; 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
    &ldquo;Example.&rdquo; Examples are not normative.
  </div>

  <p class=note>Notes look like this and normally start with the word
   &ldquo;Note.&rdquo; 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 &ldquo;Inherited&rdquo; and &ldquo;Initial&rdquo; rows in the
   table are used by the Cascading and Inheritance module <a
   href="#CSS3CASCADE"
   rel=biblioentry>[CSS3CASCADE]<!--{{CSS3CASCADE}}--></a> and
   &ldquo;Media&rdquo; 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 &lsquo;<code
   class=property><a href="#overflow-style">overflow-style</a></code>&rsquo;
   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 &lsquo;<code class=property><a
      href="#overflow">overflow</a></code>&rsquo;

    <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 &lsquo;<code class=property><a
   href="#overflow">overflow</a></code>&rsquo; property.) If the UA does not
   support the specified value, it must act as if the value was &lsquo;<code
   class=css>auto</code>&rsquo;.

  <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 &lsquo;<code
   class=property><a href="#marquee-style">marquee-style</a></code>&rsquo;
   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 &lsquo;<code class=property><a
      href="#overflow">overflow</a></code>&rsquo;

    <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 &lsquo;<code class=property><a
     href="#marquee-direction">marquee-direction</a></code>&rsquo;). 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
      &lsquo;<code class=property><a href="#width">width</a></code>&rsquo; so
      as to include all content and all overflow exactly; set its
      &lsquo;<code class=property><a
      href="#margin-right">margin-right</a></code>&rsquo; to &lsquo;<code
      class=css>auto</code>&rsquo;

     <li>Set <var>n</var> to the value of &lsquo;<code class=property><a
      href="#marquee-play-count">marquee-play-count</a></code>&rsquo;

     <li>While <var>n</var> &ne; 0:
      <ol>
       <li>Set &lsquo;<code class=property><a
        href="#margin-left">margin-left</a></code>&rsquo; of <var>B</var> to
        100% (i.e., all contents is off to the right and thus invisible)

       <li>Decrease &lsquo;<code class=property><a
        href="#margin-left">margin-left</a></code>&rsquo; at constant speed
        (see &lsquo;<code class=property><a
        href="#marquee-speed">marquee-speed</a></code>&rsquo;) until
        &lsquo;<code class=property><a
        href="#margin-right">margin-right</a></code>&rsquo; 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 &lsquo;<code
     class=property><a
     href="#marquee-direction">marquee-direction</a></code>&rsquo;). 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
      &lsquo;<code class=property><a href="#width">width</a></code>&rsquo; so
      as to include all content and all overflow exactly; set its
      &lsquo;<code class=property><a
      href="#margin-right">margin-right</a></code>&rsquo; to &lsquo;<code
      class=css>auto</code>&rsquo;

     <li>Set <var>n</var> to the value of &lsquo;<code class=property><a
      href="#marquee-play-count">marquee-play-count</a></code>&rsquo;

     <li>While <var>n</var> &ne; 0:
      <ol>
       <li>Set &lsquo;<code class=property><a
        href="#margin-left">margin-left</a></code>&rsquo; of <var>B</var> to
        100% (i.e., all contents is off to the right and thus invisible)

       <li>Decrease &lsquo;<code class=property><a
        href="#margin-left">margin-left</a></code>&rsquo; at constant speed
        (see &lsquo;<code class=property><a
        href="#marquee-speed">marquee-speed</a></code>&rsquo;) until
        &lsquo;<code class=property><a
        href="#margin-right">margin-right</a></code>&rsquo; 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 &lsquo;<code
     class=property><a
     href="#marquee-direction">marquee-direction</a></code>&rsquo;). 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
      &lsquo;<code class=property><a href="#width">width</a></code>&rsquo; 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 &lsquo;<code class=property><a
      href="#marquee-play-count">marquee-play-count</a></code>&rsquo;

     <li>While <var>n</var> &ne; 0:
      <ol>
       <li>If <var>r</var>, set &lsquo;<code class=property><a
        href="#margin-right">margin-right</a></code>&rsquo; of <var>B</var>
        to 0 and &lsquo;<code class=property><a
        href="#margin-left">margin-left</a></code>&rsquo; to &lsquo;<code
        class=css>auto</code>&rsquo;; else, set &lsquo;<code
        class=property><a href="#margin-left">margin-left</a></code>&rsquo;
        of <var>B</var> to 0 and &lsquo;<code class=property><a
        href="#margin-right">margin-right</a></code>&rsquo; to &lsquo;<code
        class=css>auto</code>&rsquo;

       <li>If <var>r</var>, decrease &lsquo;<code class=property><a
        href="#margin-right">margin-right</a></code>&rsquo; at constant speed
        (see &lsquo;<code class=property><a
        href="#marquee-speed">marquee-speed</a></code>&rsquo;) until
        &lsquo;<code class=property><a
        href="#margin-left">margin-left</a></code>&rsquo; is 0; else,
        decrease &lsquo;<code class=property><a
        href="#margin-left">margin-left</a></code>&rsquo; at constant speed
        until &lsquo;<code class=property><a
        href="#margin-right">margin-right</a></code>&rsquo; is 0

       <li>Set <var>r</var> to <var>&not;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 &lsquo;<code
    class=css>marquee-style: scroll</code>&rsquo;. 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 &lsquo;<code
    class=css>marquee-style: slide</code>&rsquo;. 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 &lsquo;<code
    class=css>marquee-style: alternate</code>&rsquo;. 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 &lsquo;<code class=property><a
   href="#marquee-play-count">marquee-play-count</a></code>&rsquo; is
   &lsquo;<code class=css>0</code>&rsquo;. 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 &lsquo;<code
   class=property><a
   href="#marquee-play-count">marquee-play-count</a></code>&rsquo; 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>&lt;non-negative-integer></var> | infinite

    <tr>
     <td>Initial:

     <td>1

    <tr>
     <td>Applies to:

     <td>same as &lsquo;<code class=property><a
      href="#overflow">overflow</a></code>&rsquo;

    <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 &lsquo;<code class=property><a
   href="#marquee-play-count">marquee-play-count</a></code>&rsquo; is
   different for different states of the element, e.g., &lsquo;<code
   class=css>p {marquee-play-count: 0} p:hover {marquee-play-count:
   infinite}</code>&rsquo;, 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 &lsquo;<code class=property><a
    href="#marquee-play-count">marquee-play-count</a></code>&rsquo; 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 &lsquo;<code class=css>infinite</code>&rsquo;
   or greater than 16, the UA may stop after 16 loops.

  <h2 id=the-marquee-direction><span class=secno>8. </span>The &lsquo;<code
   class=property><a
   href="#marquee-direction">marquee-direction</a></code>&rsquo; 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 &lsquo;<code class=property><a
      href="#overflow">overflow</a></code>&rsquo;

    <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. &lsquo;<code
   class=css>Forward</code>&rsquo; moves the text so that hidden text appears
   in the normal reading order, &lsquo;<code class=css>reverse</code>&rsquo;
   does the opposite. The actual direction therefore depends on &lsquo;<code
   class=property><a href="#direction">direction</a></code>&rsquo; and
   &lsquo;<code class=property><a
   href="#overflow-style">overflow-style</a></code>&rsquo; of the element, as
   follows:

  <table class=equiv-table>
   <thead>
    <tr>
     <th>&lsquo;<code class=property><a
      href="#overflow-style">overflow-style</a></code>&rsquo;

     <th>&lsquo;<code class=property><a
      href="#direction">direction</a></code>&rsquo;

     <th>&lsquo;<code class=css>forward</code>&rsquo;

     <th>&lsquo;<code class=css>reverse</code>&rsquo;

   <tbody>
    <tr>
     <th rowspan=2>&lsquo;<code class=css>marquee-line</code>&rsquo;

     <th>&lsquo;<code class=css>ltr</code>&rsquo;

     <td>left

     <td>right

    <tr>
     <th>&lsquo;<code class=css>rtl</code>&rsquo;

     <td>right

     <td>left

    <tr>
     <th>&lsquo;<code class=css>marquee-block</code>&rsquo;

     <td>

     <td>up

     <td>down
  </table>

  <p class=note>Note that &lsquo;<code class=css>marquee-style:
   alternate</code>&rsquo; moves content in the opposite direction from this
   table on every other loop.

  <p class=note>Note that the &lsquo;<code class=property><a
   href="#direction">direction</a></code>&rsquo; 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&nbsp;9.10 (&ldquo;Text
   direction: the direction and unicode-bidi properties&rdquo;).</a>

  <h2 id=the-marquee-speed><span class=secno>9. </span>The &lsquo;<code
   class=property><a href="#marquee-speed">marquee-speed</a></code>&rsquo;
   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 &lsquo;<code class=property><a
      href="#overflow">overflow</a></code>&rsquo;

    <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&#229;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&#229;kon Wium Lie; Tantek &#199;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&nbsp;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 &lsquo;overflow&rsquo;

     <td>yes

     <td>N/A

     <td>visual

    <tr valign=baseline>
     <td><a class=property href="#marquee-play-count">marquee-play-count</a>

     <td>&lt;non-negative-integer> | infinite

     <td>1

     <td>same as &lsquo;overflow&rsquo;

     <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 &lsquo;overflow&rsquo;

     <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 &lsquo;overflow&rsquo;

     <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 &lsquo;overflow&rsquo;

     <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:
-->