E84D Move css3-preslev to dev.w3.org in case anyone takes an interest in it · w3c/csswg-drafts@cc40594 · GitHub
Skip to content

Commit cc40594

Browse files
fantasaifantasai
committed
Move css3-preslev to dev.w3.org in case anyone takes an interest in it
1 parent fc3af5a commit cc40594

2 files changed

Lines changed: 369 additions & 0 deletions

File tree

‎css3-preslev/Makefile‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
include ../Makefile
2+
3+
FORMAT=-x

‎css3-preslev/Overview.src.html‎

Lines changed: 366 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,366 @@
1+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
2+
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3+
<html lang="en">
4+
<head>
5+
<title>CSS3 module: Presentation Levels</title>
6+
<link href="default.css" rel="stylesheet" type="text/css" title="Default" />
7+
<link rel="stylesheet"
8+
href="http://www.w3.org/StyleSheets/TR/W3C-MO.css"
9+
type="text/css" title="Default" />
10+
</head>
11+
<body>
12+
<div class="head">
13+
<p><a href="http://www.w3.org/"><img alt="W3C" height="48"
14+
src="http://www.w3.org/Icons/w3c_home" width="72" /></a></p>
15+
16+
<h1 id="title">CSS3 module: Presentation Levels</h1>
17+
18+
<h2 id="W3C-doctype" class="no-num no-toc">W3C Working Draft [DATE]</h2>
19+
20+
<dl>
21+
<dt>This version:</dt>
22+
23+
<dd><a
24+
href="http://www.w3.org/TR/[YEAR]/WD-css3-preslev-[ISODATE]">http://www.w3.org/TR/[YEAR]/WD-css3-preslev-[ISODATE]</a></dd>
25+
26+
<dt>Latest version:</dt>
27+
28+
<dd><a
29+
href="http://www.w3.org/TR/css3-preslev">http://www.w3.org/TR/css3-preslev</a></dd>
30+
31+
<dt>Editors:</dt>
32+
33+
<dd><a lang="en" href="http://ian.hixie.ch/">Ian Hickson</a>
34+
&lt;ian&nbsp;@hixie.ch&gt;</dd>
35+
36+
<dd><a lang="no" href="http://people.opera.com/howcome/">Håkon Wium
37+
Lie</a> &lt;howcome&nbsp;@opera.com&gt;</dd>
38+
</dl>
39+
40+
<!--begin-copyright-->
41+
<p>[Here will be included the file "../copyright.inc"]</p>
42+
<!--end-copyright-->
43+
44+
<hr title="Separator for header" />
45+
</div>
46+
47+
<h2 class="no-num no-toc" id="abstract">Abstract</h2>
48+
49+
<p>Presentation levels are integer values attached to elements in a
50+
document. Elements that are below, at, or above a certain threshold
51+
can be styled differently. This feature has two compelling use
52+
cases. First, slide presentations with transition effects can be
53+
described. For example, list items can be progressively revealed by
54+
sliding in from the side. Second, outline views of documents, where
55+
only the headings to a certain level are visible, can be
56+
generated.</p>
57+
58+
<h2 class="no-num no-toc" id="status">Status of This Document</h2>
59+
60+
<p><em>This section describes the status of this document at the time of
61+
its publication. Other documents may supersede this document. A list of
62+
current W3C publications and the latest revision of this technical
63+
report can be found in the <a href="http://www.w3.org/TR/">W3C technical
64+
reports index</a> at http://www.w3.org/TR/.</em></p>
65+
66+
<p>This document is a working draft of the CSS working group, which is
67+
part of the <a href="/Style/">style activity</a> (see <a
68+
href="/Style/Activity">summary</a>).</p>
69+
70+
<p>The working group believes this draft describes useful
71+
functionality for presenting web documents. Comments on, and
72+
discussions of this draft can be sent on the (<a
73+
href="http://lists.w3.org/Archives/Public/www-style/">archived</a>)
74+
public mailing list <a
75+
href="mailto:www-style@w3.org">www-style@w3.org</a> (see <a
76+
href="http://www.w3.org/Mail/Request">instructions</a>). W3C
77+
Members can also send comments directly to the CSS working
78+
group.</p>
79+
80+
<p>It is inappropriate to use W3C Working Drafts as reference material
81+
or to cite them as other than "work in progress". Its publication does
82+
not imply endorsement by the W3C membership or the <a
83+
href="http://www.w3.org/Style/Group">CSS Working Group</a> (<a
84+
href="http://cgi.w3.org/MemberAccess/AccessRequest">members
85+
only</a>).</p>
86+
87+
<p>Patent disclosures relevant to CSS may be found on the Working
88+
Group's public <a
89+
href="http://www.w3.org/Style/CSS/Disclosures">patent disclosure
90+
page.</a></p>
91+
92+
<h2 class="no-num no-toc" id="toc">Table of contents</h2>
93+
<!--toc-->
94+
95+
<h2 id="themodel">The model</h2>
96+
97+
<p>Content reuse has been one of the main motivations for the
98+
development of style sheets. By associating documents with
99+
different style sheets, the same content can be presented in
100+
different ways. The introduction of <em>presentation levels</em> in
101+
CSS adds functionality which is very useful in two particular
102+
settings. First, slide presentations with transition effects can be
103+
described. For example, list items can be progressively revealed by
104+
sliding in from the side. Second, outline views of documents, where
105+
only the headings to a certain level are visible, can be
106+
generated.</p>
107+
108+
<p>The model behind presentation levels is simple. Each element in
109+
the document is assigned an integer value which is referred to as
110+
the "element's presentation level" (EPL). The EPL can be set
111+
explicitly in a style sheet or calculated automatically based on
112+
the element's position in the document structure: it is specified
113+
by the computed value of the <span
114+
class="property">'presentation-level'</span> property. The
115+
User Agent maintains another integer value which is called the User
116+
Agent Presentation Value (UAPL). The UAPL starts at a UA-defined
117+
value, typically 0.</p>
118+
119+
<p>All elements are in one of three presentation pseudo-classes:
120+
<span class="css">'below-level'</span>, <span
121+
class="css">'at-level'</span>, and <span
122+
class="css">'above-level'</span>. These pseudo-classes
123+
refer to whether the element's EPL was below, at, or above the UAPL
124+
the last time the UAPL changed. When an element's state is
125+
evaluated, the EPL is compared to the UAPL and pseudo-classes are
126+
assigned as follows: If the EPL is equal to 0, the element is
127+
always in the below-level state. If the EPL is lower than the UAPL
128+
value, it is set to the 'below-level' state, if the EPL is exactly
129+
that value it is set to 'at-level', and if the EPL is greater than
130+
that value it is set to 'above-level'.</p>
131+
132+
<p>Here is an example of a style sheets using the presentation
133+
pseudo-classes:</p>
134+
135+
<pre>
136+
:below-level { color: black }
137+
:at-level { color: red }
138+
:above-level { color: silver }
139+
</pre>
140+
141+
<p>This proposal does not describe the user interface of
142+
presentation levels. The user agent will need to provide a user
143+
interface for setting the UAPL. For example, in projection mode, a
144+
user agent may increase the UAPL every time the user hits the space
145+
bar. When the user moves to another page (for example by following
146+
a hyperlink), the user agent may set the UAPL to be the same as
147+
presentation level of the first element on the page. In outline
148+
mode, the user agent may provide a vertical slider on the side to
149+
increase/decrease the UAPL.</p>
150+
151+
<h2 id="presentation-level-property">The 'presentation-level' property</h2>
152+
153+
<table class="propdef">
154+
<tr>
155+
<td><em>Name:</em></td>
156+
<td><dfn id="presentation-level">presentation-level</dfn></td>
157+
</tr>
158+
159+
<tr>
160+
<td><em>Value:</em></td>
161+
<td>&lt;integer&gt; | same | increment</td>
162+
</tr>
163+
164+
<tr>
165+
<td><em>Initial:</em></td>
166+
<td>0</td>
167+
</tr>
168+
169+
<tr>
170+
<td><em>Applies to:</em></td>
171+
<td>all elements</td>
172+
</tr>
173+
174+
<tr>
175+
<td><em>Inherited:</em></td>
176+
<td>yes</td>
177+
</tr>
178+
179+
<tr>
180+
<td><em>Percentages:</em></td>
181+
<td>N/A</td>
182+
</tr>
183+
184+
<tr>
185+
<td><em>Media:</em></td>
186+
<td>all</td>
187+
</tr>
188+
189+
<tr>
190+
<td><em>Computed&nbsp;value:</em></td>
191+
<td>integer</td>
192+
</tr>
193+
</table>
194+
195+
<p>This property sets the element's presentation level (EPL). The
196+
values have the following meanings:</p>
197+
198+
<ul>
199+
<li>An integer value sets the presentation level explicitly.</li>
200+
201+
<li>A value of <span class="css">'increment'</span> computes to a
202+
value one more than the
203+
previous (in document order) element's presentation level.</li>
204+
205+
<li>A value of <span class="css">'same'</span> computes to the same
206+
value as the previous
207+
element's (in document order) presentation level. For the root
208+
element, <span class="css">'same'</span> computes to zero.</li>
209+
</ul>
210+
211+
<h2 id="example1">Example 1: progressively revealing list items</h2>
212+
213+
<p>Here is an example of how presentation levels can be used to
214+
progressively reveal list items while high-lighting the current
215+
one.</p>
216+
217+
<pre>
218+
EPL value
219+
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"&gt;
220+
&lt;HTML&gt; 0
221+
&lt;STYLE&gt; 0
222+
html { color: black; background: white }
223+
@media projection {
224+
h1 { page-break-before: always }
225+
li { presentation-level: increment }
226+
:below-level { color: black }
227+
:at-level { color: red }
228+
:above-level { color: silver }
229+
}
230+
&lt;/STYLE&gt;
231+
&lt;BODY&gt; 0
232+
&lt;H1&gt;Strategies&lt;/H1&gt; 0
233+
&lt;H2&gt;Our strategy&lt;/H2&gt; 0
234+
&lt;UL&gt; 0
235+
&lt;LI&gt;divide 1
236+
&lt;LI&gt;conquer 2
237+
&lt;P&gt;(in that order) 2
238+
&lt;/UL&gt;
239+
&lt;H2&gt;Their strategy&lt;/H2&gt; 0
240+
&lt;UL&gt; 0
241+
&lt;LI&gt;obfuscate 1
242+
&lt;LI&gt;propagate 2
243+
&lt;/UL&gt;
244+
</pre>
245+
246+
<p>In the example above, the LI elements' EPL value is increased
247+
with one compared to the previous element. The other elements' EPL
248+
value is the same as the previous element due to the initial <span
249+
class="css">'same'</span>
250+
value of the <span class="property">'presentation-level'</span>
251+
property.</p>
252+
253+
<h2 id="example2">Example 2: presenting outline views of a document</h2>
254+
255+
<p>Here is an example of how presentation levels can be used to
256+
present outline views of a document:</p>
257+
258+
<pre>
259+
EPL value
260+
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"&gt;
261+
&lt;HTML&gt; 0
262+
&lt;STYLE&gt;
263+
h1 { presentation-level: 0; }
264+
h2 { presentation-level: 1; }
265+
h3 { presentation-level: 2; }
266+
body * { presentation-level: 3; }
267+
:above-level { display: none; }
268+
&lt;/STYLE&gt;
269+
&lt;BODY&gt; 0
270+
&lt;H1&gt;Strategies&lt;/H1&gt; 3
271+
&lt;H2&gt;Our strategy&lt;/H2&gt; 2
272+
&lt;UL&gt; 0
273+
&lt;LI&gt;divide 0
274+
&lt;LI&gt;conquer 0
275+
&lt;P&gt;(in that order) 0
276+
&lt;/UL&gt;
277+
&lt;H2&gt;Their strategy&lt;/H2&gt; 2
278+
&lt;UL&gt; 0
279+
&lt;LI&gt;obfuscate 0
280+
&lt;LI&gt;propagate 0
281+
&lt;/UL&gt;
282+
</pre>
283+
284+
<h2 id="dom">Presentation levels and the DOM</h2>
285+
286+
<p>An element's state is first evaluated when it is created. When
287+
the UAPL is changed, all elements in the document have their state
288+
reevaluated. A CSSNowBelowLevel event is then sent to all elements
289+
that changed to the 'below-level' state, a CSSNowAtLevel event is
290+
then sent to all elements that changed to the 'at-level' state, and
291+
a CSSNowAboveLevel event is then sent to all elements that changed
292+
to the 'above-level' state. Changing an element's
293+
'presentation-level' property, e.g. through the DOM or using a
294+
dynamic pseudo-class, does not cause the element's state to be
295+
immediately reevaluated.</p>
296+
297+
<p>These events have the following characteristics:</p>
298+
299+
<ul>
300+
<li>Bubbles: Yes</li>
301+
302+
<li>Cancelable: No</li>
303+
304+
<li>Context Info: detail (the UAPL)</li>
305+
</ul>
306+
307+
<p>SMIL can be used with this event to declaratively key animations
308+
from user requests, based on the 'presentation-index' property.</p>
309+
310+
<p>The events are defined as:</p>
311+
312+
<pre>
313+
interface CSSNowBelowLevel : UIEvent { }
314+
interface CSSNowAtLevel : UIEvent { }
315+
interface CSSNowAboveLevel : UIEvent { }
316+
</pre>
317+
318+
<p>These three fragments together will cause a document to have
319+
three user-triggered list items, which will scroll in one at a time
320+
each time the user hits the space bar (or whatever mechanism the UA
321+
uses), with the current item colored white and the past items
322+
colored gray.</p>
323+
324+
<p>Markup:</p>
325+
326+
<pre>
327+
&lt;ol&gt;
328+
&lt;li&gt; The Separation of Style and Structure &lt;/li&gt;
329+
&lt;li&gt; Declarative User Interaction &lt;/li&gt;
330+
&lt;li&gt; Potential for Animation &lt;/li&gt;
331+
&lt;/ol&gt;
332+
</pre>
333+
334+
<p>Stylesheet:</p>
335+
336+
<pre>
337+
ol { overflow: hidden; }
338+
li { presentation-level: increment; margin-left: 100%; }
339+
li:at-level { color: white; }
340+
li:above-level { color: silver; }
341+
</pre>
342+
343+
<p>Script:</p>
344+
345+
<pre>
346+
// When the element is shown, scroll it in from the right
347+
// by animating the margin-left property from 100% to 0%
348+
document.documentElement.addEventListener('CSSNowAtLevel', handler, false);
349+
350+
function handler(event) {
351+
// animateFloat is a (fictional) library routine which takes
352+
// five arguments:
353+
// a CSSValue to animate
354+
// the start value
355+
// the end value
356+
// the time over which to animate the property, in milliseconds
357+
// the units to animate it with
358+
// it returns straight away and performs the animation in the
359+
// background.
360+
animateFloat(document.getOverrideStyle(event.target,
361+
null).getPropertyCSSValue('margin-left'),
362+
100, 0, 1000, CSS_PERCENTAGE);
363+
}
364+
</pre>
365+
</body>
366+
</html>

0 commit comments

Comments
 (0)