W3C home > Mailing lists > Public > public-css-commits@w3.org > October 2011

csswg/css3-gcpm Overview.html,1.125,1.126

From: (wrong string) åkon Wium Lie via cvs-syncmail <cvsmail@w3.org>
Date: Sun, 09 Oct 2011 15:26:16 +0000
To: public-css-commits@w3.org
Message-Id: <E1RCvGa-0007VJ-TJ@lionel-hutz.w3.org>
Update of /sources/public/csswg/css3-gcpm
In directory hutz:/tmp/cvs-serv28831

Modified Files:
	Overview.html 
Log Message:
x

Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-gcpm/Overview.html,v
retrieving revision 1.125
retrieving revision 1.126
diff -u -d -r1.125 -r1.126
--- Overview.html	23 Sep 2011 07:36:10 -0000	1.125
+++ Overview.html	9 Oct 2011 15:26:14 -0000	1.126
@@ -99,13 +99,13 @@
 
    <h1>CSS Generated Content for Paged Media Module</h1>
 
-   <h2 class="no-num no-toc" id=w3c-working>Editor's Draft 23 September 2011</h2>
+   <h2 class="no-num no-toc" id=w3c-working>Editor's Draft 9 October 2011</h2>
 
    <dl>
     <dt>This version:
 
     <dd><a
-     href="http://www.w3.org/TR/2011/ED-css3-gcpm-20110923/">http://www.w3.org/TR/2011/ED-css3-gcpm-20110923</a>
+     href="http://www.w3.org/TR/2011/ED-css3-gcpm-20111009/">http://www.w3.org/TR/2011/ED-css3-gcpm-20111009</a>
 
     <dt>Latest version:
 
@@ -125,13 +125,13 @@
    <p class=copyright><a
     href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
     rel=license>Copyright</a> &copy; 2011 <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.eu/"><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/"><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.eu/"><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>
@@ -316,38 +316,43 @@
    <li><a href="#page-selection-nth"><span class=secno>13. </span>Page
     selection: nth()</a>
 
-   <li><a href="#page-floats-mk2"><span class=secno>14. </span>Page floats
-    (mk2)</a>
+   <li><a href="#paged-presentations"><span class=secno>14. </span>Paged
+    presentations</a>
+
+   <li><a href="#navigation-between-paged"><span class=secno>15.
+    </span>Navigation between paged</a>
+
+   <li><a href="#page-floats"><span class=secno>16. </span>Page floats</a>
     <ul class=toc>
-     <li><a href="#float-modifiers"><span class=secno>14.1. </span>Float
+     <li><a href="#float-modifiers"><span class=secno>16.1. </span>Float
       modifiers</a>
 
-     <li><a href="#floating-inside-and-outside-pages"><span class=secno>14.2.
+     <li><a href="#floating-inside-and-outside-pages"><span class=secno>16.2.
       </span>Floating inside and outside pages</a>
     </ul>
 
-   <li><a href="#page-floats-mk1-deprecated"><span class=secno>15.
-    </span>Page floats (mk1, deprecated)</a>
+   <li><a href="#page-floats-as-sketched-in-the-past"><span class=secno>17.
+    </span>Page floats (as sketched in the past)</a>
     <ul class=toc>
      <li><a href="#float-intrusion-in-multicol-elements"><span
-      class=secno>15.1. </span>Float intrusion in multicol elements</a>
+      class=secno>17.1. </span>Float intrusion in multicol elements</a>
     </ul>
 
    <li><a href="#advanced-multi-column-layout-part-of-mk2"><span
-    class=secno>16. </span>Advanced multi-column layout (part of mk2, now
+    class=secno>18. </span>Advanced multi-column layout (part of mk2, now
     drprecated)</a>
     <ul class=toc>
-     <li><a href="#the-float-offset-property"><span class=secno>16.1.
+     <li><a href="#the-float-offset-property"><span class=secno>18.1.
       </span>The &lsquo;<code class=property>float-offset</code>&rsquo;
       property</a>
     </ul>
 
    <li><a href="#aligning-baselines-in-multi-column-layou"><span
-    class=secno>17. </span>Aligning baselines in multi-column layouts</a>
+    class=secno>19. </span>Aligning baselines in multi-column layouts</a>
 
-   <li><a href="#conformance"><span class=secno>18. </span>Conformance</a>
+   <li><a href="#conformance"><span class=secno>20. </span>Conformance</a>
 
-   <li><a href="#appendix-a-default-style-sheet"><span class=secno>19.
+   <li><a href="#appendix-a-default-style-sheet"><span class=secno>21.
     </span>Appendix A: Default style sheet</a>
 
    <li class=no-num><a href="#acknowledgments">Acknowledgments</a>
@@ -3044,7 +3049,131 @@
 </pre>
    </div>
 
-   <h2 id=page-floats-mk2><span class=secno>14. </span>Page floats (mk2)</h2>
+   <h2 id=paged-presentations><span class=secno>14. </span>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
+    &lsquo;<code class=property>overflow</code>&rsquo; 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 &lsquo;<code class=property>paged-x</code>&rsquo;, but with added
+     UA-specific controls to change pages
+
+    <dt>paged-y-controls
+
+    <dd>as &lsquo;<code class=property>paged-y</code>&rsquo;, but with added
+     UA-specific controls to change pages
+   </dl>
+
+   <div class=example>
+    <pre>
+  html { 
+    overflow: paged-x;
+    height: 100%;
+  }
+</pre>
+   </div>
+
+   <h2 id=navigation-between-paged><span class=secno>15. </span>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 id=page-floats><span class=secno>16. </span>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
@@ -3110,7 +3239,7 @@
     <pre>
 .figure { float: top; width: 100% }
 </pre>
-    <img src=7b.png></div>
+    <img src=7.png></div>
 
    <div class=example> Float figure to top of the natural column, spanning
     all columns:
@@ -3126,7 +3255,7 @@
     <pre>
 .figure { float: top-corner; width: 100% }
 </pre>
-    <img src=6b.png></div>
+    <img src=6.png></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
@@ -3151,27 +3280,7 @@
    <pre>
 .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>
-  </div>
+   <img src=8.png></div>
 
   <div class=example> <img src=regions.png>
    <pre>
@@ -3181,12 +3290,18 @@
 </pre>
   </div>
 
-  <h3 id=float-modifiers><span class=secno>14.1. </span>Float modifiers</h3>
+  <h3 id=float-modifiers><span class=secno>16.1. </span>Float modifiers</h3>
 
   <p>These new values on &lsquo;<code class=property>float</code>&rsquo; can
    be combined with the other values:
 
   <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
@@ -3198,12 +3313,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>
 
   <div class=example>
@@ -3228,7 +3337,7 @@
    This way, the &lsquo;<code class=property>float</code>&rsquo; property
    would only need to take one value.
 
-  <h3 id=floating-inside-and-outside-pages><span class=secno>14.2.
+  <h3 id=floating-inside-and-outside-pages><span class=secno>16.2.
    </span>Floating inside and outside pages</h3>
 
   <p>Two allow content to flow to the inside and outside of a page, these
@@ -3255,8 +3364,8 @@
 </pre>
   </div>
 
-  <h2 id=page-floats-mk1-deprecated><span class=secno>15. </span>Page floats
-   (mk1, deprecated)</h2>
+  <h2 id=page-floats-as-sketched-in-the-past><span class=secno>17.
+   </span>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 at
@@ -3486,7 +3595,7 @@
    will result in width calculations as per CSS 2.1 section 10.3.3. In
    vertical text, width calculations are vice versa.
 
-  <h3 id=float-intrusion-in-multicol-elements><span class=secno>15.1.
+  <h3 id=float-intrusion-in-multicol-elements><span class=secno>17.1.
    </span>Float intrusion in multicol elements</h3>
 
   <p>In multi-column layouts [[CSS3MULTICOL]], floats appear within columns;
@@ -3606,7 +3715,7 @@
     
   </div>
 
-  <h2 id=advanced-multi-column-layout-part-of-mk2><span class=secno>16.
+  <h2 id=advanced-multi-column-layout-part-of-mk2><span class=secno>18.
    </span>Advanced multi-column layout (part of mk2, now drprecated)</h2>
 
   <p>In paged media, it is common for figures, captions, images, and quotes
@@ -3667,7 +3776,7 @@
    expansion. Fractions on the &lsquo;<code class=property>gr</code>&rsquo;
    unit refer to the last gap or column counted.
 
-  <h3 id=the-float-offset-property><span class=secno>16.1. </span>The
+  <h3 id=the-float-offset-property><span class=secno>18.1. </span>The
    &lsquo;<a href="#float-offset"><code
    class=property>float-offset</code></a>&rsquo; property</h3>
 
@@ -4197,7 +4306,7 @@
     
   </div>
 
-  <h2 id=aligning-baselines-in-multi-column-layou><span class=secno>17.
+  <h2 id=aligning-baselines-in-multi-column-layou><span class=secno>19.
    </span>Aligning baselines in multi-column layouts</h2>
 
   <p>In multi-column layouts, baselines are typically aligned between
@@ -4242,10 +4351,10 @@
    class=property>line-stacking-strategy</code>&rsquo; property is <a
    href="http://www.w3.org/TR/xsl/#line-stacking-strategy">used in XSL</a>.
 
-  <h2 id=conformance><span class=secno>18. </span>Conformance</h2>
+  <h2 id=conformance><span class=secno>20. </span>Conformance</h2>
   <!--User agents that support hyphenation and support this specification must a-->
 
-  <h2 id=appendix-a-default-style-sheet><span class=secno>19. </span>Appendix
+  <h2 id=appendix-a-default-style-sheet><span class=secno>21. </span>Appendix
    A: Default style sheet</h2>
 
   <p class=issue>
@@ -4369,7 +4478,7 @@
     title=bookmark-target><strong>10.</strong></a>
 
    <li>float-offset, <a href="#float-offset"
-    title=float-offset><strong>16.1.</strong></a>
+    title=float-offset><strong>18.1.</strong></a>
 
    <li>hyphenate-after, <a href="#hyphenate-after"
     title=hyphenate-after><strong>6.3.</strong></a>
@@ -4396,11 +4505,11 @@
 
    <li>marks, <a href="#marks" title=marks><strong>9.</strong></a>
 
-   <li>named strings, <a href="#named-strings0" title="named
-    strings"><strong>2.</strong></a>
+   <li>named strings, <a href="#named-strings0"
+    title="named strings"><strong>2.</strong></a>
 
-   <li>running elements, <a href="#running-elements0" title="running
-    elements"><strong>2.</strong></a>
+   <li>running elements, <a href="#running-elements0"
+    title="running elements"><strong>2.</strong></a>
 
    <li>string-set, <a href="#string-set"
     title=string-set><strong>2.1.1.</strong></a>
Received on Sunday, 9 October 2011 15:26:20 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Sunday, 9 October 2011 15:26:20 GMT