Mercurial > drafts / file diff

     1.1 --- a/css3-page/Overview.src.html	Wed Feb 20 16:24:59 2013 -0800
     1.2 +++ b/css3-page/Overview.src.html	Thu Feb 21 01:26:52 2013 +0100
     1.3 @@ -769,24 +769,48 @@
     1.4  computations defined in the <a href="http://www.w3.org/TR/CSS21/selector.html">Selectors</a>
     1.5  module:</p>
     1.6  
     1.7 +<p>Each comma-separated selectors in the same ''@page'' rule
     1.8 +  match pages with its own specificity.
     1.9 +  ''@page'' rules without selectors are considered to have a single,
    1.10 +  empty selector (whose specificity is zero.)
    1.11 +
    1.12  <ul>
    1.13 -  <li>if the page selector has a named page, f=1; else f=0</li>
    1.14 -  <li>if the page selector has a ':first' or ':blank' pseudo-class, g=1; else g=0</li>
    1.15 -  <li>if the page selector has a ':left' or ':right' pseudo-class, h=1; else h=0</li>
    1.16 +  <li>Count the number of page names (= <var>f</var>)
    1.17 +    <p class="note">This is 0 or 1.
    1.18 +  <li>Count the number of ':first' or ':blank' pseudo-classes (= <var>g</var>)
    1.19 +  <li>Count the number of ':left' or ':right' pseudo-classes (= <var>h</var>)
    1.20  </ul>
    1.21  
    1.22 -<p>Concatenating the three numbers f-g-h gives the specificity.</p>
    1.23 +<p>
    1.24 + Specificities are compared by comparing the three components in order:
    1.25 + the specificity with <var>f</var> larger a value is more specific;
    1.26 + if the two <var>f</var> values are tied,
    1.27 + then the specificity with a larger <var>g</var> value is more specific;
    1.28 + if the two <var>g</var> values are also tied,
    1.29 + then the specificity with a larger <var>h</var> value is more specific;
    1.30 + if all the values are tied, the two specifities are equal.
    1.31 +
    1.32 +<p>
    1.33 +  Due to storage limitations,
    1.34 +  implementations may have limitations on
    1.35 +  the size of <var>f</var>, <var>g</var>, or <var>h</var>.
    1.36 +  If so, values higher than the limit must be clamped to that limit,
    1.37 +  and not overflow.
    1.38 +
    1.39 +<p class="note">
    1.40 +Note: Repeated occurrances of the same pseudo-classes are allowed
    1.41 +  and do increase specificity.
    1.42  
    1.43  <div class="example">
    1.44  
    1.45  <p>Some page specificity calculation examples follow:</p>
    1.46  <pre>
    1.47 -      @page { } /* f=0 g=0 h=0 -&gt; specificity = 000 */
    1.48 -      @page :left { } /* f=0 g=0 h=1 -&gt; specificity = 001 */
    1.49 -      @page :first { } /* f=0 g=1 h=0 -&gt; specificity = 010 */
    1.50 -      @page artsy { } /* f=1 g=0 h=0 -&gt; specificity = 100 */
    1.51 -      @page artsy:left { } /* f=1 g=0 h=1 -&gt; specificity = 101 */
    1.52 -      @page artsy:first { } /* f=1 g=1 h=0 -&gt; specificity = 110 */
    1.53 +@page { } /* specificity = (0,0,0) */
    1.54 +@page :left { } /* specificity = (0,0,1) */
    1.55 +@page :first { } /* specificity = (0,1,0) */
    1.56 +@page artsy { } /* specificity = (1,0,0) */
    1.57 +@page artsy:left { } /* specificity = (1,0,1) */
    1.58 +@page artsy:first { } /* specificity = (1,1,0) */
    1.59  </pre>
    1.60  </div>
    1.61  
    1.62 @@ -795,21 +819,20 @@
    1.63  <p>Consider the following usage example:</p>
    1.64  <pre>
    1.65  @page {
    1.66 -margin-left: 3cm;
    1.67 +  margin-left: 3cm;
    1.68  }
    1.69  
    1.70  @page :left {
    1.71 -margin-left: 4cm;
    1.72 +  margin-left: 4cm;
    1.73  }
    1.74  </pre>
    1.75  
    1.76 -<p>Due to the higher specificity of the pseudo-class selector, the left margin on
    1.77 -left pages will be 4cm and all other pages
    1.78 -(the right-facing pages) will have a left margin of 3cm.</p>
    1.79 +<p>Due to the higher specificity of the pseudo-class selector,
    1.80 +the left margin on left pages will be 4cm and all other pages
    1.81 +(the right-facing pages) will have a left margin of 3cm.
    1.82  </div>
    1.83  
    1.84  <div class="example">
    1.85 -
    1.86  <p>In this example, the higher specificity of the green rules wins over the red
    1.87  rule.
    1.88  Therefore the first page will have blue text in the top-left page-margin box
    1.89 @@ -817,20 +840,20 @@
    1.90  while subsequent pages will have red text in the page-margin boxes.</p>
    1.91  <pre>
    1.92  @page :first {
    1.93 -color: green;
    1.94 +  color: green;
    1.95  
    1.96 -@top-left {
    1.97 -  content: "foo";
    1.98 -  color: blue;
    1.99 -}
   1.100 -@top-right {
   1.101 -  content: "bar";
   1.102 -}
   1.103 +  @top-left {
   1.104 +    content: "foo";
   1.105 +    color: blue;
   1.106 +  }
   1.107 +  @top-right {
   1.108 +    content: "bar";
   1.109 +  }
   1.110  }
   1.111  
   1.112  @page { color: red;
   1.113 -@top-center {
   1.114 -  content: "Page " counter(page);
   1.115 +  @top-center {
   1.116 +    content: "Page " counter(page);
   1.117    }
   1.118  }
   1.119  </pre>