csswg/css3-gcpm Overview.src.html,1.130,1.131

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

Modified Files:
	Overview.src.html 
Log Message:
reintroducing overflow; paged, revising page float behaviour, introducing @navigation

Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-gcpm/Overview.src.html,v
retrieving revision 1.130
retrieving revision 1.131
diff -u -d -r1.130 -r1.131
--- Overview.src.html	23 Sep 2011 07:35:59 -0000	1.130
+++ Overview.src.html	9 Oct 2011 15:26:06 -0000	1.131
@@ -2458,7 +2458,120 @@
 </div>
 
 
-<h2>Page floats (mk2)</h2>
+<h2>Paged presentations</h2>
+
+<p>Printed publications are paged, while screen-based presentations of web pages are most often presented in a continous manner with a scrollbar on the side. There are reasons to believe that screen-based presentations also could benefit from using paged presentations. There is nothing in web specifications that prevent browsers from adding a page-based mode today. However, most web content is authored and styled with a continous presentation in mind. This could change if it becomes possible to describe paged presentations in style sheets. This section is an attempt to do so.
+
+<p>To support paged presentations, four new values are added to the 'overflow' property:
+
+<dl>
+<dt>paged-x
+
+<dd>overflow content is paged, and the pages are laid out along the x axis, in the writing direction
+
+<dt>paged-y
+
+<dd>overflow content is paged, and the pages are laid out along the y axis, in the writing direction
+
+<dt>paged-x-controls
+
+<dd>as 'paged-x', but with added UA-specific controls to change pages
+
+<dt>paged-y-controls
+
+<dd>as 'paged-y', but with added UA-specific controls to change pages
+
+</dl>
+
+<div class=example>
+<pre>
+  html { 
+    overflow: paged-x;
+    height: 100%;
+  }
+</pre>
+</div>
+
+<h2>Navigation between paged</h2>
+
+<p>Paged navigation within a page (as described above), can also be
+naturally extended to navigation between web documents. To support
+this, a new @-rule is proposed: @navigation. The purpose of
+@navigation is to describe which documents the user can navigate to by
+moving up, right, down, or left from the current document. 
+
+<div class=example>
+<pre>
+&lt;link rel=index href="../index.html">
+&lt;link rel=previous href=g3.html>
+&lt;link rel=next href=g1.html>
+...
+@-o-navigation {
+  nav-up: link-rel(index); 
+  nav-left: link-rel(previous); 
+  nav-right: link-rel(next); 
+}
+</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>.
+
+<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 */
+}
+</pre>
+</div>
+
+http://www.w3.org/TR/2011/WD-css3-conditional-20110901/#at-document
+
+<div class=example>
+
+<p>Combined with th @document-rule, navigation maps can be described:
+
+<pre>
+@document url("http://example.com/foo") {
+  @navigation {
+    nav-right: link-rel(next);
+  }
+}
+
+@document url("http://example.com/bar") {
+  @navigation {
+    nav-upt: link-rel(next);
+  }
+}
+</pre>
+
+</div>
+
+<!--
+<h2>Page shift effects</h2>
+
+<p>To describe the page shift effects 
+
+<div class=example>
+<pre>
+@navigation {
+   nav-up-shift: pan;
+}
+</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>
 
 <p>Images and figures are sometimes displayed at the top or bottom of
 pages and columns. This specificaton adds new keywords on the 'float'
@@ -2505,7 +2618,7 @@
 .figure { float: top; width: 100% }
 </pre>
 
-<img src=7b.png>
+<img src=7.png>
 
 </div>
 
@@ -2524,7 +2637,7 @@
 .figure { float: top-corner; width: 100% }
 </pre>
 
-<img src=6b.png>
+<img src=6.png>
 </div>
 
 <p class=issue>
@@ -2539,30 +2652,9 @@
 .figure { float: top-corner; column-span: 2; width: 100% }
 </pre>
 
-<img src=8b.png>
-</div>
-
-<p>Boxes floated with these keywords are positiond wrt. the padding
-edge (and not the content edge) of the multicol element. This way,
-layouts that push (say) images to the edge of the screen can be
-achieved.
-
-<div class=example>
-
-<p>In this example, there is white space around the content of the body element. The white space consists of page margins vertically, and padding horizontally. This way, it is possible to align the right edge of an image with the right edge of the viewport.
-
-<pre>
-@page { margin: 2em 0 }
-body { 
-  columns: 3; 
-  padding: 0 2em;
-}
-img { float: top-corner; column-span: 2; width: 100% }
-</pre>
-
+<img src=8.png>
 </div>
 
-
 <div class=example>
 
 <img src=regions.png>
@@ -2582,6 +2674,11 @@
 
 <dl>
 
+<dt>next-page
+
+<dd>In paged media, float box to the next page. The first column of the multicol element on the next page is considered to be the natural column for boxes affected by this value. 
+
+
 <dt>unless-room
 
 <dd>Only float the box if keeping it in its natural position would have yielded a column or page break
@@ -2592,11 +2689,6 @@
 
 <dd>The element may intrude neighboring columns; if the element is not in a multi-column element, this keyword has no effect.
 
-
-<dt>next-page
-
-<dd>In paged media, float box to the next page. The first column of the multicol element on the next page is considered to be the natural column for boxes affected by this value. 
-
 </dl>
 
 
@@ -2649,9 +2741,7 @@
 
 
 
-
-
-<h2>Page floats (mk1, deprecated)</h2>
+<h2>Page floats (as sketched in the past)</h2>
 
 <p>Images and figures are sometimes displayed at the top or bottom of
 pages. Also, an element may be moved to the next page or not displayed

Received on Sunday, 9 October 2011 15:26:11 UTC