blah blah

Author: bert-github

css3-page/Overview.html

@@ -9,7 +9,7 @@
    rel=dcterms.rights>
   <meta content=" CSS Paged Media Module Level 3" name=dcterms.title>
   <meta content=text name=dcterms.type>
-  <meta content=2013-03-12 name=dcterms.issued>
+  <meta content=2013-03-13 name=dcterms.issued>
   <meta content="Melinda Grant" name=dcterms.creator>
   <meta content="Håkon Wium Lie" name=dcterms.creator>
   <meta content="Elika J. Etemad" name=dcterms.creator>
@@ -100,20 +100,20 @@
     <h1 class=p-name>CSS Paged Media Module Level 3</h1>
 
     <h2 class="no-num no-toc" id=w3c-working>Editor's Draft <span
-     class=dt-updated><span class=value-title title=20130312>12 March
+     class=dt-updated><span class=value-title title=20130313>13 March
      2013</span></span></h2>
 
     <dl>
      <dt>This version:
 
      <dd><a class=u-url
       href="http://dev.w3.org/csswg/css3-page/">http://dev.w3.org/csswg/css3-page/</a></dd>
-     <!-- <dd><a class="u-url" href="http://dev.w3.org/csswg/css3-page/">http://www.w3.org/TR/2013/WD-css3-page-20130312</a></dd> -->
+     <!-- <dd><a class="u-url" href="http://dev.w3.org/csswg/css3-page/">http://www.w3.org/TR/2013/WD-css3-page-20130313</a></dd> -->
 
      <dt>Latest version:
 
      <dd><a
-      href="http://www.w3.org/TR/css3-page">http://www.w3.org/TR/css3-page</a>
+      href="http://www.w3.org/TR/css3-page/">http://www.w3.org/TR/css3-page/</a>
 
      <dt>Previous version:
 
@@ -124,10 +124,6 @@ <h2 class="no-num no-toc" id=w3c-working>Editor's Draft <span
 
      <dd><a href="http://www.w3.org/Style/CSS/Tracker/products/13"
       rel=issues>http://www.w3.org/Style/CSS/Tracker/products/13</a>
-      <!-- or use the wiki:
-    <dd><a rel="issues" href="http://wiki.csswg.org/spec/css3-page"
-           >http://wiki.csswg.org/spec/css3-page</a></dd>
--->
 
      <dt>Feedback:
 
@@ -226,8 +222,7 @@ <h2 class="no-num no-toc" id=contents>Table of Contents</h2>
     <li><a href="#page-terms"><span class=secno>3. </span>Page
      Terminology</a>
 
-    <li><a href="#page-box-page-rule"><span class=secno>4. </span>The Page
-     Model</a>
+    <li><a href="#page-model"><span class=secno>4. </span>The Page Model</a>
      <ul class=toc>
       <li><a href="#painting"><span class=secno>4.1. </span> Page Backgrounds
        and Painting Order</a>
@@ -535,7 +530,7 @@ <h2 id=page-terms><span class=secno>3. </span>Page Terminology</h2>
      pages as typically laid out. Page layouts for documents using a
      left-to-right page progression have the earlier of the facing pages on
      the left. Rules specific to the left page can be specified using the
-     ‘<a href="#left"><code class=css>left</code></a>’ <a
+     ‘<a href="#left"><code class=css>:left</code></a>’ <a
      href="#page-selector"><i>page selector</i></a>.
 
     <dt><dfn id=right-page>Right Page</dfn>
@@ -548,7 +543,7 @@ <h2 id=page-terms><span class=secno>3. </span>Page Terminology</h2>
      href="#page-selector"><i>page selector</i></a>.
    </dl>
 
-   <h2 id=page-box-page-rule><span class=secno>4. </span>The Page Model</h2>
+   <h2 id=page-model><span class=secno>4. </span>The Page Model</h2>
 
    <p>In the paged media formatting model, the document is transferred into
     one or more page boxes. The <dfn id=page-box>page box</dfn> is a
@@ -844,7 +839,8 @@ <h3 id=progression><span class=secno>4.3. </span>Page Progression</h3>
    <h2 id=page-selector-and-context><span class=secno>5. </span> Page
     Selectors and the Page Context</h2>
 
-   <h3 id=at-page-rule><span class=secno>5.1. </span> The @page Rule</h3>
+   <h3 id=at-page-rule><span class=secno>5.1. </span><a
+    id=page-box-page-rule></a> The @page Rule</h3>
 
    <p>Authors can specify various aspects of a page box, such as its
     dimensions, orientation, and margins, within an ‘<code
@@ -903,11 +899,12 @@ <h3 id=page-selectors><span class=secno>5.2. </span>Page selectors</h3>
 
    <p>A <dfn id=page-pseudo-class>page pseudo-class</dfn> is <a
     href="http://www.w3.org/TR/CSS21/syndata.html#characters">ASCII
-    case-insensitive</a> and has the same syntax as regular a <a
-    href="http://www.w3.org/TR/selectors/#pseudo-classes">pseudo-classes</a>.
-    <a href="#SELECT" rel=biblioentry>[SELECT]<!--{{!SELECT}}--></a> The
-    various <a href="#page-pseudo-class"><i>page pseudo-classes</i></a> are
-    defined below.
+    case-insensitive</a> and has the same syntax as <a
+    href="http://www.w3.org/TR/selectors/#pseudo-classes">pseudo-classes</a>
+    in regular Selectors. <a href="#SELECT"
+    rel=biblioentry>[SELECT]<!--{{!SELECT}}--></a> The various <a
+    href="#page-pseudo-class"><i>page pseudo-classes</i></a> are defined
+    below.
 
    <h4 id=spread-pseudos><span class=secno>5.2.1. </span><a
     id=left-right-first></a> Spread pseudo-classes: ‘<a href="#left"><code
@@ -1689,14 +1686,16 @@ <h5 id=variable-auto-sizing><span class=secno>6.3.2.2. </span>Resolving
        difference the <i>flex space</i>. Calculate each box's <i>flex
        factor</i> as proportional to its outer <i>max-content width</i>, and
        set its used outer width to:
-       <pre><i>max-content width</i> + <i>flex space</i> × <i>flex factor</i> ÷ ∑<i>flex factors</i></pre>
+       <p><code><i>max-content width</i> + <i>flex space</i> × <i>flex
+        factor</i> ÷ ∑<i>flex factors</i></code>
 
       <li>Otherwise if the sum of the outer <i>min-content widths</i> is less
        than the <a href="#available-width"><i>available width</i></a>, call
        that difference the <i>flex space</i> calculate each box's <i>flex
        factor</i> as proportional to its <i>max-content</i> minus
        <i>min-content</i>, and set its used outer width to:
-       <pre><i>min-content width</i> + <i>flex space</i> × <i>flex factor</i> ÷ ∑<i>flex factors</i></pre>
+       <p><code><i>min-content width</i> + <i>flex space</i> × <i>flex
+        factor</i> ÷ ∑<i>flex factors</i></code>
 
       <li>Otherwise, calculate its outer size as in the previous case, but
        set each box's <i>flex factor</i> as proportional to its outer
@@ -1715,15 +1714,12 @@ <h5 id=variable-auto-sizing><span class=secno>6.3.2.2. </span>Resolving
      middle box (B): Assume there are two boxes, B and AC, where each of AC's
      dimensions is double the maximum of A and C. (This preserves B's
      centering.) Distribute the space to these two boxes (B and the imaginary
-     AC) as described for A and C <a href="#fit2">above</a>.
+     AC) as described for A and C <a href="#flex-fit">above</a>.
 
     <li> Then, resolve any ‘<code class=css>auto</code>’ widths of the
      side boxes (A and C) by setting that box's outer width to
-     <pre>(<a
-      href="#available-width"><i>available width</i></a> − <i>used outer size of B</i>) ÷ 2</pre>
-
-     <pre>
-    </pre>
+     <p><code>(<a href="#available-width"><i>available width</i></a> −
+      <i>used outer size of B</i>) ÷ 2</code>
    </ol>
 
    <h5 id=variable-minmax><span class=secno>6.3.2.3. </span>Handling ‘<code
@@ -1742,8 +1738,8 @@ <h5 id=variable-minmax><span class=secno>6.3.2.3. </span>Handling ‘<code
     <li> The tentative used widths are calculated (without ‘<code
      class=property>min-width</code>’ and ‘<code
      class=property>max-width</code>’) following the rules under <a
-     href="#marginbox-variabledim-with">Resolving ‘<code
-     class=css>auto</code>’ widths</a> above.
+     href="#variable-auto-sizing">Resolving ‘<code class=css>auto</code>’
+     widths</a> above.
 
     <li> If the tentative used width of any of the three boxes is greater
      than ‘<code class=property>max-width</code>’, the rules above are
@@ -2047,14 +2043,14 @@ <h2 id=page-properties><span class=secno>7. </span>Page Properties</h2>
      <li>The used values of ‘<code class=property>width</code>’ and
       ‘<code class=property>height</code>’ have special computation rules
       for page boxes and page-margin boxes; see <a href="#page-size">Page
-      Size</a> and <a href="#margin-box-dimensions">Computing Page-Margin Box
+      Size</a> and <a href="#margin-dimension">Computing Page-Margin Box
       Dimensions</a>.
 
      <li>The page background is positioned and painted <a href="#painting">as
       described above</a>.
 
      <li>The rules for counter scoping are modified <a
-      href=page-based-counters>as described below</a>.
+      href="#page-based-counters">as described below</a>.
 
      <li> As on the ‘<code class=css>::before</code>’ and ‘<code
       class=css>::after</code>’ pseudo-elements, the ‘<code
@@ -2154,7 +2150,8 @@ <h3 id=page-based-counters><span class=secno>7.1. </span>Page-based
 
     <p>In all other respects, page-associated counters behave as described in
      <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, <a
-     href="TR/CSS21/generate.html#scope">Nested Counters and Scope</a> and <a
+     href="http://www.w3.org/TR/CSS21/generate.html#scope">Nested Counters
+     and Scope</a> and <a
      href="http://www.w3.org/TR/CSS21/syndata.html#counter">Counters</a>.
 
     <h3 id=margin-text-alignment><span class=secno>7.2. </span>Page-margin
@@ -2398,8 +2395,23 @@ <h3 id=page-size-prop><span class=secno>8.1. </span>Page size: the ‘<a
      class=property>size</code></a>’: they assume the paper size that would
      be chosen if no @page rules were specified.
 
-    <p class=issue>It would be useful if media queries could respond at least
-     to sizes specified on an unqualified @page.
+    <div class=issue>
+     <p>It would be useful if media queries could respond at least to sizes
+      specified on an unqualified @page.
+
+     <p>Another option could be to do like ‘<code
+      class=css>@viewport</code>’ rules <a href="#CSS-DEVICE-ADAPT"
+      rel=biblioentry>[CSS-DEVICE-ADAPT]<!--{{CSS-DEVICE-ADAPT}}--></a>:
+      First apply ‘<code class=css>@page</code>’ rules (matching which
+      selectors?), using the UA’s default page size for Media Queries and
+      <a
+      href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths">viewport-percentage
+      lengths</a> <a href="#CSS3VAL"
+      rel=biblioentry>[CSS3VAL]<!--{{CSS3VAL}}--></a>. The resulting page
+      size is the "base page size". The entire set of stylesheets is applied
+      again, this time using the "base page size" for Media Queries and
+      viewport-percentage lengths.
+    </div>
 
     <div class=example>
      <p>In the following example
@@ -3586,6 +3598,16 @@ <h3 class=no-num id=informative-references>Informative References</h3>
       style="display: none"><!-- keeps the doc valid if the DL is empty -->
       <!---->
 
+     <dt id=CSS-DEVICE-ADAPT>[CSS-DEVICE-ADAPT]
+
+     <dd>Rune Lillesveen. <a
+      href="http://www.w3.org/TR/2011/WD-css-device-adapt-20110915/"><cite>CSS
+      Device Adaptation.</cite></a> 15 September 2011. W3C Working Draft.
+      (Work in progress.) URL: <a
+      href="http://www.w3.org/TR/2011/WD-css-device-adapt-20110915/">http://www.w3.org/TR/2011/WD-css-device-adapt-20110915/</a>
+     </dd>
+     <!---->
+
      <dt id=CSS3-IMAGES>[CSS3-IMAGES]
 
      <dd>Elika J. Etemad; Tab Atkins Jr. <a
@@ -3606,6 +3628,16 @@ <h3 class=no-num id=informative-references>Informative References</h3>
      </dd>
      <!---->
 
+     <dt id=CSS3VAL>[CSS3VAL]
+
+     <dd>Håkon Wium Lie; Tab Atkins; Elika J. Etemad. <a
+      href="http://www.w3.org/TR/2012/CR-css3-values-20120828/"><cite>CSS
+      Values and Units Module Level 3.</cite></a> 28 August 2012. W3C
+      Candidate Recommendation. (Work in progress.) URL: <a
+      href="http://www.w3.org/TR/2012/CR-css3-values-20120828/">http://www.w3.org/TR/2012/CR-css3-values-20120828/</a>
+     </dd>
+     <!---->
+
      <dt id=JLREQ>[JLREQ]
 
      <dd>Yasuhiro Anan; et al. <a