csswg/css3-gcpm Overview.src.html,1.133,1.134

Update of /sources/public/csswg/css3-gcpm
In directory hutz:/tmp/cvs-serv10737

Modified Files:
	Overview.src.html 
Log Message:
extending description of nav-* properties

Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-gcpm/Overview.src.html,v
retrieving revision 1.133
retrieving revision 1.134
diff -u -d -r1.133 -r1.134
--- Overview.src.html	9 Oct 2011 16:59:40 -0000	1.133
+++ Overview.src.html	10 Oct 2011 20:51:27 -0000	1.134
@@ -2521,6 +2521,18 @@
 @navigation is to describe which documents the user can navigate to by
 moving up, right, down, or left from the current document. 
 
+<p>Four new properties are allowed inside @navigation: nav-up, nav-right, nav-bottom, nav-right. 
+
+<p class=note>The name of the properties inside @navigation are borrowed from <a href="http://www.w3.org/TR/2004/CR-css3-ui-20040511/#nav-dir">CSS3 Basic User Interface Module</a>.
+
+<p>The properties accept these values:
+
+<dl>
+
+<dt>link-rel()
+
+<dd>the function takes one argument, which refers to the <tt>rel</tt> attribute of the <tt>link</tt> element
+
 <div class=example>
 <pre>
 &lt;link rel=index href="../index.html">
@@ -2535,24 +2547,58 @@
 </pre>
 </div>
 
-<p class=note>The name of the properties inside @navigation have been borrowed from <a href="http://www.w3.org/TR/2004/CR-css3-ui-20040511/#nav-dir">CSS3 Basic User Interface Module</a>.
+<p class=issue>The "link-rel" name is a bit academic, perhaps the "go()" name can be used instead?
+
+<dt>go()
+
+<dd>The function takes one argument: <tt>back</tt>, which takes the user one step back in history.
 
 <div class=example>
 <pre>
 @navigation {
-  nav-up: url-doc(..);       /* argument is URL relative to document */
-  nav-down: url(a1.html);    /* argument is a url (as per CSS) */
-  nav-right: link-rel(next); /* argument is link type */
-  nav-left: go(back);        /* go back in history */
+  nav-left: go(back); 
 }
 </pre>
 </div>
 
-http://www.w3.org/TR/2011/WD-css3-conditional-20110901/#at-document
+
+<dt>
+
+<dt>url-doc()
+
+<dd>The funcation takes one argument: a URL. Relative URLs are
+relative to the document, not to the style sheet.
 
 <div class=example>
+<pre>
+@navigation {
+  nav-up: url-doc(..);
+  nav-down: url-doc(a1.html);
+}
+</pre>
+</div>
 
-<p>Combined with th @document-rule, navigation maps can be described:
+<dt>url()
+
+<dd>The funcation takes one argument: a URL. Relative URLs are
+relative to the style sheet. 
+
+<div class=example>
+<pre>
+@navigation {
+  nav-up: url(..);
+  nav-down: url(a1.html);
+}
+</pre>
+</div>
+
+</dl>
+
+
+
+<div class=example>
+
+<p>Combined with the <a href="http://www.w3.org/TR/2011/WD-css3-conditional-20110901/#at-document">@document-rule</a>, navigation maps can be described:
 
 <pre>
 @document url("http://example.com/foo") {
@@ -2570,27 +2616,41 @@
 
 </div>
 
-<!--
-<h2>Page shift effects</h2>
 
-<p>To describe the page shift effects 
+<h3>Page shift effects</h3>
+
+<p>To describe page shift effects, four new properties inside
+@navigation are proposed: nav-up-shift, nav-right-shift,
+nav-down-shift, nav-left-shift. These properties take one of several
+keyword values:
+
+<dl>
+<dt>pan
+<dd>pans to the new page; this is the initial value
+
+<dt>turn
+<dd>turns the page, like soft book pages do
+
+<dt>flip
+<dt>flips the page, like stiff cardbord
+
+<dt>fold
+<li>the old page folds, like an accordion
+
+</dl>
+
+<p class=issue>The proposed keyword values are loosely described. Are
+there better ways to describe transitions?
 
 <div class=example>
 <pre>
 @navigation {
    nav-up-shift: pan;
+   nav-down-shift: flip;
 }
 </pre>
 </div>
 
-Values for the *-shift can be: 
-
-  - pan (default)
-  - turn: looks like a soft paper page turning
-  - flip: looks like a stiff paper page
-  - fold: ...
--->
-
 
 <h2>Page floats</h2>
 
@@ -2600,6 +2660,7 @@
 and the new 'float-modifier', provides support for common paper-based
 layouts. 
 
+<!--
 <p>(A few words about the difference between this proposa, and the one
 sketched in the next section: Care has now been taken to avoid layouts
 that are hard to achieve, or that can be achieved in other ways. For
@@ -2613,6 +2674,7 @@
 supported, a different strategy can be used: make the root element a
 multicol element, and float the box to the top. Thereby it ends up at
 the top of hte page.)
+-->
 
 <p>Four new keywords on 'float' have been added:
 
@@ -2679,16 +2741,16 @@
 </div>
 
 
-
-
+<!--
 <p class=issue>
 In the examples above, the width is set to 100% to fill the available space. This is typically how paper-based layouts have used column-span. If, however, the width is smaller than the available space, how should the box be positioned. (Probably on the side, based on the writing direction.) And, should content flow around it? (Probably not: it may be hard to implement and have little use.)
 </div>
+-->
 
 <p>The 'column-span' property is extended with integer values so that elements can span several columns. If the specified integer value is equal to, or larger than the number of columns in the multicol element, the number of columns spanned will be the same as if 'column-span: all' had been specified. 
 
 <div class=example>
-<p>In combination with 'column-span', the fiture is floated to the top corner of the multicol element on that page:
+<p>In combination with 'column-span', the figure is floated to the top corner of the multicol element on that page:
 <pre>
 .figure { float: top-corner; column-span: 2; width: 100% }
 </pre>

Received on Monday, 10 October 2011 20:51:32 UTC