css3-gcpm/Overview.src.html

changeset 7435
2fa0f76c392e
parent 7420
58becbc239ba
child 7586
157db933d0b8
     1.1 --- a/css3-gcpm/Overview.src.html	Mon Feb 11 14:12:53 2013 -0800
     1.2 +++ b/css3-gcpm/Overview.src.html	Mon Feb 11 14:15:36 2013 -0800
     1.3 @@ -4,6 +4,7 @@
     1.4  <head>
     1.5  <title>CSS Generated Content for Paged Media Module</title>
     1.6  
     1.7 +<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     1.8  <link rel="stylesheet" type="text/css" href="../default.css">
     1.9  <link href="http://www.w3.org/StyleSheets/TR/W3C-[STATUS].css" rel=stylesheet type="text/css">
    1.10  
    1.11 @@ -118,7 +119,7 @@
    1.12  <p>Named strings can be thought of as variables that can hold one
    1.13  string of text each. Named strings are created with the 'string-set'
    1.14  property which copies a string of text into the named string. Only
    1.15 -text is copied; not style, structure, or replaced content. 
    1.16 +text is copied; not style, structure, or replaced content.
    1.17  
    1.18  <div class="example">
    1.19  
    1.20 @@ -149,7 +150,7 @@
    1.21        <td><dfn>string-set</dfn>
    1.22      <tr>
    1.23        <td><em>Value:</em>
    1.24 -      <td>[[ &lt;identifier> &lt;content-list>] [, &lt;identifier> &lt;content-list>]* ] | none 
    1.25 +      <td>[[ &lt;identifier> &lt;content-list>] [, &lt;identifier> &lt;content-list>]* ] | none
    1.26      <tr>
    1.27        <td><em>Initial:</em>
    1.28        <td>none
    1.29 @@ -204,7 +205,7 @@
    1.30  
    1.31  <dt>content-first-letter
    1.32  
    1.33 -<dd>The first letter of the content of the element. The definition of a letter is the same as for :first-letter pseudo-elements. 
    1.34 +<dd>The first letter of the content of the element. The definition of a letter is the same as for :first-letter pseudo-elements.
    1.35  
    1.36  <p class="note">The expected use for ''content-first-letter'' is to create one-letter headers, e.g., in dictionaries.</p>
    1.37  
    1.38 @@ -220,7 +221,7 @@
    1.39  <li>env(date-time): returns the date and time on the user's system at the time of formatting
    1.40  </ul>
    1.41  
    1.42 -<p>Information about date and time is formatted according to the locale of the user's system. 
    1.43 +<p>Information about date and time is formatted according to the locale of the user's system.
    1.44  <p class=issue>Or, should there be a way to specify the locale? Or should we simply format all in ISO format (e.g., 2010-03-30)?
    1.45  
    1.46  <p class=note>On many systems, preformatted strings in the user's locale can be found through the <a href="http://www.opengroup.org/onlinepubs/009695399/functions/strftime.html">strftime</a> function. The date, time and date-time strings can be found by using the "%x", "%X" and "%c" conversion strings, respectively.
    1.47 @@ -250,23 +251,23 @@
    1.48  (described below) can refer to different assignments.
    1.49  
    1.50  <p>The scope of a named string is the page of the element to which the
    1.51 -'string-set' property is attached and subsequent pages. 
    1.52 +'string-set' property is attached and subsequent pages.
    1.53  
    1.54  <p>The name space of named strings is different from other sets of
    1.55  names in CSS.
    1.56  
    1.57 -<p>The textual content is processed as if 'white-space: normal' had been set. 
    1.58 +<p>The textual content is processed as if 'white-space: normal' had been set.
    1.59  
    1.60  
    1.61  <div class="example">
    1.62  <pre>
    1.63 -h2 { 
    1.64 +h2 {
    1.65    string-set: header "Chapter " counter(header) ": " contents;
    1.66    counter-increment: header;
    1.67  }
    1.68  </pre>
    1.69  
    1.70 -<p>Note that the string called "header" is different from the counter with the same name. The above code may result in <em>header</em> being set to "Chapter 2: Europa". 
    1.71 +<p>Note that the string called "header" is different from the counter with the same name. The above code may result in <em>header</em> being set to "Chapter 2: Europa".
    1.72  
    1.73  </div>
    1.74  
    1.75 @@ -276,11 +277,11 @@
    1.76  <em>header</em> as in the previous example. <!--note namespace-->
    1.77  
    1.78  <pre>
    1.79 -h2:before { content: "Chapter " counter(header) } 
    1.80 -h2 { 
    1.81 +h2:before { content: "Chapter " counter(header) }
    1.82 +h2 {
    1.83    string-set: header content-before content-element;
    1.84 -  counter-increment: header } 
    1.85 -</pre> 
    1.86 +  counter-increment: header }
    1.87 +</pre>
    1.88  </div>
    1.89  
    1.90  <div class="example">
    1.91 @@ -293,7 +294,7 @@
    1.92  <p>The content is copied regardless of other settings on the element. In HTML, TITLE  elements are normally not displayed, but in this examplet the content is copied into a named string:
    1.93  
    1.94  <pre>
    1.95 -title { 
    1.96 +title {
    1.97    display: none;
    1.98    string-set: header contents;
    1.99  }
   1.100 @@ -322,7 +323,7 @@
   1.101  on the ''string()'' value. This argument can have one of four keywords:
   1.102  
   1.103  <ul>
   1.104 -<li>''start'': the named string's entry value for that page is used. 
   1.105 +<li>''start'': the named string's entry value for that page is used.
   1.106  <li>''first'': the value of the first assignment is used. If there is no assignment on the page, the start value is used. ''first'' is the default value.
   1.107  <li>''last'': the named string's exit value for that page is used
   1.108  <li>''first-except'': similar to ''first'', except on the page where the value was assigned. On that page, the empty string is used.
   1.109 @@ -331,7 +332,7 @@
   1.110  <p>The assignment is considered to take place on the first page where a content box representing the element occurs. If the element does not have any content boxes (e.g., if 'display: none' is set), the assignment is considered to take place on the page where the first content box would have occured if the element had been in the normal flow.
   1.111  
   1.112  <div class="example">
   1.113 -<p>In this example, the first term on the page will be shown in the top left corner and the last term on the page will be shown in the top right corner. In top center of the page, the first letter of first term will be shown. 
   1.114 +<p>In this example, the first term on the page will be shown in the top left corner and the last term on the page will be shown in the top right corner. In top center of the page, the first letter of first term will be shown.
   1.115  <pre>
   1.116  @page { @top-left { content: string(term, first) }}
   1.117  @page { @top-right { content: string(term, last) }}
   1.118 @@ -342,7 +343,7 @@
   1.119  
   1.120  
   1.121  <div class="example">
   1.122 -<p>In this example, the header in the top center will be blank on pages where 'h1' elements appear. On other pages, the string of the previous 'h1' element will be shown. 
   1.123 +<p>In this example, the header in the top center will be blank on pages where 'h1' elements appear. On other pages, the string of the previous 'h1' element will be shown.
   1.124  <pre>
   1.125  @page { @top-center { content: string(chapter, first-except) }}
   1.126  h1 { string-set: chapter contents }
   1.127 @@ -373,7 +374,7 @@
   1.128  the style sheet author, and the names have a separate name space. A
   1.129  running element can hold one element, including its pseudo-elements
   1.130  and its descendants. Whenever a new element is assigned to a running
   1.131 -element, the old element is lost. 
   1.132 +element, the old element is lost.
   1.133  
   1.134  <p class='note'>User agents, however, must be able to remember the
   1.135  result of more than one assignment as the ''element()'' value
   1.136 @@ -481,7 +482,7 @@
   1.137  with a corresponding code. For example, there are often leaders between
   1.138  titles and page numbers in a table of contents (TOC). Another example is the
   1.139  phone book where there are leaders between a name and a telephone
   1.140 -number. 
   1.141 +number.
   1.142  
   1.143  <p>In CSS3, a leader is composed of series of glyphs through the
   1.144  ''leader()'' value on the 'content' property. The functional notation
   1.145 @@ -507,7 +508,7 @@
   1.146  
   1.147  
   1.148  <!--
   1.149 -<p>User Agents should attempt to align corresponding glyphs from the  
   1.150 +<p>User Agents should attempt to align corresponding glyphs from the
   1.151  leader pattern between consecutive lines.
   1.152  -->
   1.153  
   1.154 @@ -529,7 +530,7 @@
   1.155  space, the leader string is repeated as many times as possible in the
   1.156  writing direction. At the end of the leader, a partial string pattern
   1.157  may be shown.  White space in leaders is collapsed according to the
   1.158 -values on white-space properties. 
   1.159 +values on white-space properties.
   1.160  
   1.161  <!-- <span class="issue">Or, partial strings be avoided?</span> -->
   1.162  <!--<p class="issue">Should other properties influence the appearance of leaders?-->
   1.163 @@ -616,14 +617,14 @@
   1.164  
   1.165  <ol>
   1.166  <li>Lay out the content with leaders of minimum lengths
   1.167 -<li>Determine the empty space left on the line. 
   1.168 +<li>Determine the empty space left on the line.
   1.169  
   1.170  <li>Distribute the empty space between the leaders on the line. Glyphs
   1.171  must not be shown partially. All leaders on the line should, to the
   1.172  extent possible, have the same length. This may not always be possible
   1.173 -as the minimum leader length must be honored. 
   1.174 -
   1.175 -<li>Fill the empty space with the specified leader pattern. 
   1.176 +as the minimum leader length must be honored.
   1.177 +
   1.178 +<li>Fill the empty space with the specified leader pattern.
   1.179  </ol>
   1.180  
   1.181  
   1.182 @@ -647,7 +648,7 @@
   1.183  <pre>
   1.184    Bla great bla bla world bla bla
   1.185    empire bla bla color bla bla
   1.186 -  history bla bla forever.   John 
   1.187 +  history bla bla forever.   John
   1.188    Johnson
   1.189  </pre>
   1.190  
   1.191 @@ -677,7 +678,7 @@
   1.192  
   1.193  <pre>
   1.194    Bla great bla bla world bla bla empire
   1.195 -  bla bla color bla bla history bla bla 
   1.196 +  bla bla color bla bla history bla bla
   1.197    forever.                  John Johnson
   1.198  </pre>
   1.199  
   1.200 @@ -691,7 +692,7 @@
   1.201  way of a section number (e.g., "See section 3.4.1"), a page number
   1.202  (e.g., "See discussion on page 72"), or a string (e.g., "See the
   1.203  chapter on Europe"). Being able to resolve these cross-references
   1.204 -automatically saves time and reduces the number of errors. 
   1.205 +automatically saves time and reduces the number of errors.
   1.206  
   1.207  <h3>The ''target-counter'' and ''target-counters'' values</h3>
   1.208  
   1.209 @@ -718,7 +719,7 @@
   1.210  
   1.211  
   1.212  <div class="example">
   1.213 -<p>This style sheet specifies that a string like " (see section 1.3.5)" 
   1.214 +<p>This style sheet specifies that a string like " (see section 1.3.5)"
   1.215  is added after a link:
   1.216  
   1.217  <pre>
   1.218 @@ -759,7 +760,7 @@
   1.219  
   1.220  <pre>
   1.221  h2 { counter-increment: chapter }
   1.222 -a { content: "Chapter " target-counter(attr(href url), chapter) 
   1.223 +a { content: "Chapter " target-counter(attr(href url), chapter)
   1.224     ' ("'  target-text(attr(href url), content-element) '") on page '
   1.225     target-counter(attr(href url), page);
   1.226  </pre>
   1.227 @@ -790,7 +791,7 @@
   1.228  
   1.229  
   1.230  <div class=example>
   1.231 -<p>In its simplest form, making a footnote is simple. 
   1.232 +<p>In its simplest form, making a footnote is simple.
   1.233  
   1.234  <pre>
   1.235  &lt;style>
   1.236 @@ -822,7 +823,7 @@
   1.237  <pre>
   1.238  &lt;style>
   1.239  @media print {
   1.240 -  .footnote { 
   1.241 +  .footnote {
   1.242      float: footnote;
   1.243      content: target-pull(attr(href url)) }
   1.244    .call { display: none }
   1.245 @@ -856,7 +857,7 @@
   1.246  <p>The content of the "title" attribute can be turned into a footnote with this code:
   1.247  
   1.248  <pre>
   1.249 -span[title]::after { 
   1.250 +span[title]::after {
   1.251    content: attr(title);
   1.252    float: footnote;
   1.253  }
   1.254 @@ -872,7 +873,7 @@
   1.255  
   1.256  <div class="example">
   1.257  <pre>
   1.258 -span.footnote { 
   1.259 +span.footnote {
   1.260    float: footnote;
   1.261  }
   1.262  </pre>
   1.263 @@ -890,10 +891,10 @@
   1.264  <p>In this example, the footnotes are displayed inline:
   1.265  
   1.266  <pre>
   1.267 -@footnote { 
   1.268 +@footnote {
   1.269    display: inline;
   1.270  }
   1.271 -span.footnote { 
   1.272 +span.footnote {
   1.273    float: footnote;
   1.274  }
   1.275  </pre>
   1.276 @@ -901,16 +902,16 @@
   1.277  <p>Here is one possible presentation of inline footnotes:
   1.278  
   1.279  <pre>
   1.280 -&#xB9; The first footnote. &#xBA; The second footnote. 
   1.281 +&#xB9; The first footnote. &#xBA; The second footnote.
   1.282  </pre>
   1.283  </div>
   1.284  
   1.285  <!--
   1.286 -<p class=issue>Another way to achieve this would be to introduce different keywords for inline and block footnotes (e.g., float: footnote-inline, float: footnote-block). 
   1.287 +<p class=issue>Another way to achieve this would be to introduce different keywords for inline and block footnotes (e.g., float: footnote-inline, float: footnote-block).
   1.288  -->
   1.289  
   1.290  <p>For each new footnote element, the ''footnote'' counter is automatically
   1.291 -incremented. 
   1.292 +incremented.
   1.293  
   1.294  
   1.295  <h3>The footnote area</h3>
   1.296 @@ -919,7 +920,7 @@
   1.297  <p>All elements with ''float: footnote'' are moved to the <em>footnote
   1.298  area</em>. The footnote area is described by an @footnote-rule inside
   1.299  the @page-rule. By default, the footnote area appears at the bottom of
   1.300 -the page, but it can be positioned in other places. 
   1.301 +the page, but it can be positioned in other places.
   1.302  
   1.303  <p class=issue>Should the footnote are be positioned using page floats
   1.304  or (fixed?) absolute positioning? Or both?
   1.305 @@ -932,7 +933,7 @@
   1.306  
   1.307  <pre>
   1.308  @page {
   1.309 -  @footnote { 
   1.310 +  @footnote {
   1.311      float: bottom;
   1.312      column-span: all;
   1.313      width: 100%;
   1.314 @@ -948,7 +949,7 @@
   1.315  
   1.316  <pre>
   1.317  @page {
   1.318 -  @footnote { 
   1.319 +  @footnote {
   1.320      float: bottom;
   1.321      width: 100%;
   1.322    }
   1.323 @@ -962,7 +963,7 @@
   1.324  
   1.325  <pre>
   1.326  @page {
   1.327 -  @footnote { 
   1.328 +  @footnote {
   1.329      float: bottom-corner;
   1.330      width: 100%;
   1.331    }
   1.332 @@ -986,7 +987,7 @@
   1.333  div.figure { float: bottom page }
   1.334  </pre>
   1.335  
   1.336 -<p>If figures and footnotes are on the same page, the footnotes will appear below the figures as they are floated to the bottom before the figures. 
   1.337 +<p>If figures and footnotes are on the same page, the footnotes will appear below the figures as they are floated to the bottom before the figures.
   1.338  </div>
   1.339  
   1.340  
   1.341 @@ -998,7 +999,7 @@
   1.342  
   1.343  <p>These properties apply to the footnote area: 'content', 'border',
   1.344  'padding', 'margin', 'height', 'width', 'max-height', 'max-width',
   1.345 -'min-height', 'min-width', the background properties. 
   1.346 +'min-height', 'min-width', the background properties.
   1.347  
   1.348  <!--
   1.349  <p class="note">In published books, it is customary for the footnote
   1.350 @@ -1048,7 +1049,7 @@
   1.351  }
   1.352  </pre>
   1.353  
   1.354 -<p>The resulting note call is a super-script decimal number. 
   1.355 +<p>The resulting note call is a super-script decimal number.
   1.356  
   1.357  
   1.358  <h3>Footnote markers</h3>
   1.359 @@ -1171,17 +1172,17 @@
   1.360  
   1.361  <p class=note>The motivation for having another page-based area into
   1.362  which content can be floated is that footnotes and sidenotes are
   1.363 -often used in the same document. 
   1.364 +often used in the same document.
   1.365  
   1.366  <div class="example">
   1.367  <p>This example moves images to the outside margin of pages:
   1.368  
   1.369  <pre>
   1.370 -@page :left { 
   1.371 +@page :left {
   1.372    margin-left: 10em;
   1.373    @sidenote { position: fixed; left: -8em; width: 6em }
   1.374  }
   1.375 -@page :right { 
   1.376 +@page :right {
   1.377    margin-right: 10em;
   1.378    @sidenote { position: fixed; right: -8em; width: 6em }
   1.379  }
   1.380 @@ -1242,7 +1243,7 @@
   1.381  <!--
   1.382  <p>Hyphenation means splitting words to improve the layout of
   1.383  paragraphs. This specifications does not define the exact rules for
   1.384 -hyphenation, but describes six properties that influence hyphenation. 
   1.385 +hyphenation, but describes six properties that influence hyphenation.
   1.386  
   1.387  <h3>The 'hyphens' property</h3>
   1.388  
   1.389 @@ -1282,7 +1283,7 @@
   1.390  
   1.391  <dt>manual
   1.392  
   1.393 -<dd>Words are only broken at line breaks where there are characters inside the word that suggest line break opportunities. Characters can be explicit or conditional. 
   1.394 +<dd>Words are only broken at line breaks where there are characters inside the word that suggest line break opportunities. Characters can be explicit or conditional.
   1.395  
   1.396  <div class="example">
   1.397  <p>In Unicode, U+00AD is a conditional "soft hyphen" and U+2010 is an explicit hyphen. Unicode Standard Annex #14 describes the <a href="http://unicode.org/reports/tr14/#SoftHyphen">role of soft hyphens in the</a> Unicode Line breaking algorithm.
   1.398 @@ -1297,11 +1298,11 @@
   1.399  
   1.400  
   1.401  <dt>auto
   1.402 -<dd>Words can be broken at appropriate hyphenation points, as determined by characters inside the word, resources listed in 'hyphenate-resource', or other UA-dependent resources. Characters inside the word take priority over hyphenation points determined by other resources. 
   1.403 +<dd>Words can be broken at appropriate hyphenation points, as determined by characters inside the word, resources listed in 'hyphenate-resource', or other UA-dependent resources. Characters inside the word take priority over hyphenation points determined by other resources.
   1.404  
   1.405  <dt>all
   1.406  
   1.407 -<dd>All possible hyphenation points, as determined by characters inside the word, resources listed in 'hyphenate-resource', or other UA-dependent resources, are marked. The visual appearance of the mark is UA-dependent. 
   1.408 +<dd>All possible hyphenation points, as determined by characters inside the word, resources listed in 'hyphenate-resource', or other UA-dependent resources, are marked. The visual appearance of the mark is UA-dependent.
   1.409  
   1.410  
   1.411  </dl>
   1.412 @@ -1484,7 +1485,7 @@
   1.413  
   1.414  <p>This property specifies strings that are shown between parts of
   1.415  hyphenated words. The 'auto' value means that the user agent should
   1.416 -find an appropriate value. 
   1.417 +find an appropriate value.
   1.418  
   1.419  <div class="example">
   1.420  <p>In Latin scripts, the hyphen character (U+2010) is often used to
   1.421 @@ -1505,7 +1506,7 @@
   1.422        <td><dfn>hyphenate-last-line-avoid</dfn>
   1.423      <tr>
   1.424        <td><em>Value:</em>
   1.425 -      <td>auto | always | column | page | spread 
   1.426 +      <td>auto | always | column | page | spread
   1.427      <tr>
   1.428        <td><em>Initial:</em>
   1.429        <td>auto
   1.430 @@ -1535,7 +1536,7 @@
   1.431  
   1.432  <dt>always
   1.433  
   1.434 -<dd>the last full line of the element, or the last line before any column, page, or spread break inside the element should not be hyphenated. 
   1.435 +<dd>the last full line of the element, or the last line before any column, page, or spread break inside the element should not be hyphenated.
   1.436  
   1.437  <dt>column
   1.438  
   1.439 @@ -1545,9 +1546,9 @@
   1.440  
   1.441  <dd>the last line before page or spread break inside the element should not be hyphenated
   1.442  
   1.443 -<dt>spread 
   1.444 -
   1.445 -<dd>the last line before any spread break inside the element should not be hyphenated. 
   1.446 +<dt>spread
   1.447 +
   1.448 +<dd>the last line before any spread break inside the element should not be hyphenated.
   1.449  
   1.450  </dl>
   1.451  
   1.452 @@ -1573,7 +1574,7 @@
   1.453  <pre>
   1.454     This is just a
   1.455     simple example
   1.456 -   to        show 
   1.457 +   to        show
   1.458     Antarctica.
   1.459  <pre>
   1.460  </div>
   1.461 @@ -1622,7 +1623,7 @@
   1.462  
   1.463  <p>An @counter-style rule consists of the keyword ''@counter-style'',
   1.464  followed by the name of the symbol counter style, followed by a
   1.465 -space-separated list of strings. 
   1.466 +space-separated list of strings.
   1.467  
   1.468  <div class="example">
   1.469  
   1.470 @@ -1674,7 +1675,7 @@
   1.471  -->
   1.472  
   1.473  <!--
   1.474 -<div class="issue">Should we allow images in addition to strings? 
   1.475 +<div class="issue">Should we allow images in addition to strings?
   1.476  <pre>
   1.477    @counter-style graphic url("1.gif") url("2.gif") url("3.gif")
   1.478  </pre>
   1.479 @@ -1846,7 +1847,7 @@
   1.480  
   1.481  <dd>The resolution of the image is unknown, and UAs should not use the
   1.482  resolution found in the image. Instead, the image resolution will be
   1.483 -found by converting the dimension of the image into CSS pixels. 
   1.484 +found by converting the dimension of the image into CSS pixels.
   1.485  
   1.486  <dt>from-image
   1.487  
   1.488 @@ -1867,7 +1868,7 @@
   1.489  
   1.490  
   1.491  <div class="example">
   1.492 -<p>Using this rule, the image resolution is set to 300dpi and the resolution in the image, if any, is ignored. 
   1.493 +<p>Using this rule, the image resolution is set to 300dpi and the resolution in the image, if any, is ignored.
   1.494  <pre>
   1.495  img { image-resolution: 300dpi }
   1.496  </pre>
   1.497 @@ -1926,7 +1927,7 @@
   1.498  
   1.499  <dt>auto
   1.500  
   1.501 -<dd>The UA must look for the resolution in the image itself. If the image has no image resolution, the next value in the comma-separated list is evaluated. 
   1.502 +<dd>The UA must look for the resolution in the image itself. If the image has no image resolution, the next value in the comma-separated list is evaluated.
   1.503  
   1.504  <dt>&lt;dpi>
   1.505  
   1.506 @@ -1952,7 +1953,7 @@
   1.507  </div>
   1.508  
   1.509  <div class="example">
   1.510 -<p>Using this rule, the image resolution is set to 300dpi and the resolution in the image, if any, is ignored. 
   1.511 +<p>Using this rule, the image resolution is set to 300dpi and the resolution in the image, if any, is ignored.
   1.512  <pre>
   1.513  img { image-resolution: 300dpi }
   1.514  </pre>
   1.515 @@ -1965,7 +1966,7 @@
   1.516  <!--
   1.517  
   1.518  <div class="issue">
   1.519 -<p>Should there be a way of setting width, height, resolution on images that are referenced by a URL in the style sheet? E.g., 
   1.520 +<p>Should there be a way of setting width, height, resolution on images that are referenced by a URL in the style sheet? E.g.,
   1.521  <pre>
   1.522  background-image: url(image.png, width, height, resolution);
   1.523  background-image: image-url(image.png, width, height, resolution);
   1.524 @@ -2005,7 +2006,7 @@
   1.525  
   1.526  <p class=issue>Introducing one new property in all places where an image can be loaded may not be a scalable solution. Therefore this property is at risk.
   1.527  
   1.528 -<p>As 'image-resolution', except that it describes the resolution of the element's background image. 
   1.529 +<p>As 'image-resolution', except that it describes the resolution of the element's background image.
   1.530  
   1.531  -->
   1.532  
   1.533 @@ -2025,13 +2026,13 @@
   1.534        <td><dfn>marks</dfn>
   1.535      <tr>
   1.536        <td><em>Value:</em>
   1.537 -      <td>[ crop || cross ] | none 
   1.538 +      <td>[ crop || cross ] | none
   1.539      <tr>
   1.540        <td><em>Initial:</em>
   1.541        <td>none
   1.542      <tr>
   1.543        <td><em>Applies to:</em>
   1.544 -      <td>page context 
   1.545 +      <td>page context
   1.546      <tr>
   1.547        <td><em>Inherited:</em>
   1.548        <td>no
   1.549 @@ -2217,7 +2218,7 @@
   1.550        <td><dfn>bookmark-target</dfn>
   1.551      <tr>
   1.552        <td><em>Value:</em>
   1.553 -      <td>none | &lt;uri> 
   1.554 +      <td>none | &lt;uri>
   1.555      <tr>
   1.556        <td><em>Initial:</em>
   1.557        <td>none
   1.558 @@ -2238,7 +2239,7 @@
   1.559        <td>For URI values, the absolute URI; for 'none', as specified.
   1.560  </table>
   1.561  
   1.562 -<p>This property specifies the target of the bookmark link. 
   1.563 +<p>This property specifies the target of the bookmark link.
   1.564  
   1.565  <div class=example>
   1.566  <pre>
   1.567 @@ -2309,8 +2310,8 @@
   1.568  </pre>
   1.569  </div>
   1.570  
   1.571 -<p>The values representing the colors are between ''0'' and ''1''. 
   1.572 -Values outside this range are clipped. 
   1.573 +<p>The values representing the colors are between ''0'' and ''1''.
   1.574 +Values outside this range are clipped.
   1.575  
   1.576  <p>It is not expected that screen-centric user agents support CMYK
   1.577  colors and it is therefore important that existing CSS color values can
   1.578 @@ -2330,51 +2331,10 @@
   1.579  
   1.580  <h2>Styling blank pages</h2>
   1.581  
   1.582 -<p>Blank pages that appear as a result of forced page breaks can be
   1.583 -styled with the <code>:blank</code> pseudo-class. 
   1.584 -
   1.585 -<div class="example">
   1.586 -<p>In this example, forced page break may occur before <code>h1</code> elements. 
   1.587 -<pre>
   1.588 -h1 { page-break-before: left }
   1.589 -
   1.590 -@page :blank {
   1.591 -  @top-center { content: "This page is intentionally left blank" }
   1.592 -}
   1.593 -</pre>
   1.594 -</div>
   1.595 -
   1.596 -<p>The <code>:blank</code> pseudo-class has the same specificity as
   1.597 -the <code>:first</code> pseudo-class. A page matched
   1.598 -by <code>:blank</code> will still be matched by other page selectors.
   1.599 -
   1.600 -<div class="example">
   1.601 -
   1.602 -<p>If headers have been specified on all right pages, a blank right
   1.603 -page will be matched by both <code>:blank</code>
   1.604 -and <code>:right</code>. Therefore, margin boxes set on right pages
   1.605 -will have to be removed unless they are wanted on blank pages. Here is
   1.606 -an example where the top center header is removed from blank pages,
   1.607 -while the page number remains:
   1.608 -
   1.609 -<pre>
   1.610 -h1 { page-break-before: left }
   1.611 -
   1.612 -@page :blank {
   1.613 -  @top-center { content: none }
   1.614 -}
   1.615 -
   1.616 -@page :right {
   1.617 -  @top-center { content: "Preliminary edition" }
   1.618 -  @bottom-center { content: counter(page) }
   1.619 -}
   1.620 -</pre>
   1.621 -
   1.622 -<p>Due to the higher specificity of <code>:blank</code>
   1.623 -over <code>:right</code>, the top center header is removed even
   1.624 -if <code>content: none</code> comes before <code>content: "Preliminary
   1.625 -edition"</code>.
   1.626 -
   1.627 +<div class="note">
   1.628 +<p>
   1.629 +  This section has been moved to [[CSS3PAGE]].
   1.630 +</p>
   1.631  </div>
   1.632  
   1.633  
   1.634 @@ -2416,7 +2376,7 @@
   1.635  right.
   1.636  
   1.637  <pre>
   1.638 -  html { 
   1.639 +  html {
   1.640      overflow-style: paged-x;
   1.641      height: 100%;
   1.642    }
   1.643 @@ -2430,7 +2390,7 @@
   1.644  continous presentations.
   1.645  
   1.646  <pre>
   1.647 -  #content { 
   1.648 +  #content {
   1.649      overflow-style: paged-x-controls;
   1.650      height: 400px;
   1.651    }
   1.652 @@ -2445,9 +2405,9 @@
   1.653  naturally extended to navigation between web documents. To support
   1.654  this, a new @-rule is proposed: @navigation. The purpose of
   1.655  @navigation is to describe which documents the user can navigate to by
   1.656 -moving up, right, down, or left from the current document. 
   1.657 -
   1.658 -<p>Four new properties are allowed inside @navigation: nav-up, nav-right, nav-bottom, nav-right. 
   1.659 +moving up, right, down, or left from the current document.
   1.660 +
   1.661 +<p>Four new properties are allowed inside @navigation: nav-up, nav-right, nav-bottom, nav-right.
   1.662  
   1.663  <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>.
   1.664  
   1.665 @@ -2466,9 +2426,9 @@
   1.666  &lt;link rel=next href=g1.html>
   1.667  ...
   1.668  @navigation {
   1.669 -  nav-up: go(index); 
   1.670 -  nav-left: go(previous); 
   1.671 -  nav-right: go(next); 
   1.672 +  nav-up: go(index);
   1.673 +  nav-left: go(previous);
   1.674 +  nav-right: go(next);
   1.675  }
   1.676  </pre>
   1.677  </div>
   1.678 @@ -2482,7 +2442,7 @@
   1.679  <div class=example>
   1.680  <pre>
   1.681  @navigation {
   1.682 -  nav-left: back; 
   1.683 +  nav-left: back;
   1.684  }
   1.685  </pre>
   1.686  </div>
   1.687 @@ -2490,7 +2450,7 @@
   1.688  <dt>url()
   1.689  
   1.690  <dd>The funcation takes one argument: a URL. Relative URLs are
   1.691 -relative to the style sheet. 
   1.692 +relative to the style sheet.
   1.693  
   1.694  <div class=example>
   1.695  <pre>
   1.696 @@ -2504,7 +2464,7 @@
   1.697  <dt>url-doc()
   1.698  
   1.699  <dd>The function is identical to url(), except that relative URLs are
   1.700 -relative to the document, not to the style sheet. 
   1.701 +relative to the document, not to the style sheet.
   1.702  
   1.703  <div class=example>
   1.704  <pre>
   1.705 @@ -2617,11 +2577,11 @@
   1.706  
   1.707  <dt>snap(&lt;length> &lt;length>? [, top | bottom | near ]?)
   1.708  
   1.709 -<dd><p>Makes the element float to the top or bottom if it naturally appears within a certain distance from the top or bottom. The length value(s) specifies the maxium distance from the top/bottom that an element must be within in order to be floated; one length value specifies the distance from both the top and the bottom, two length values specify the distance from the top and  bottom, respectively. If an element is within the specified distance from both the top and the bottom, bottom wins. 
   1.710 +<dd><p>Makes the element float to the top or bottom if it naturally appears within a certain distance from the top or bottom. The length value(s) specifies the maxium distance from the top/bottom that an element must be within in order to be floated; one length value specifies the distance from both the top and the bottom, two length values specify the distance from the top and  bottom, respectively. If an element is within the specified distance from both the top and the bottom, bottom wins.
   1.711  
   1.712  <p>The optional keyword value specifies where the element is floated: top, bottom, or the nearest of the two. The initial value is 'near'.
   1.713  
   1.714 -<p>An element is considered to be a float if it has a snap() value, even if the element does not appear within the specified distance. This way, it can be determined whether an element is float or not without laying out the document. 
   1.715 +<p>An element is considered to be a float if it has a snap() value, even if the element does not appear within the specified distance. This way, it can be determined whether an element is float or not without laying out the document.
   1.716  
   1.717  <dt>snap
   1.718  
   1.719 @@ -2642,15 +2602,15 @@
   1.720  </pre>
   1.721  </div>
   1.722  
   1.723 -<p class=issue>Should we define a reasonable default (say, 3em) instead of relying on implementation-specific values? 
   1.724 +<p class=issue>Should we define a reasonable default (say, 3em) instead of relying on implementation-specific values?
   1.725  <p class=issue>Do numberic values (in addition to length values) make sense, like for orphans/widows
   1.726  
   1.727  
   1.728  <!--
   1.729 -The 'widows'/'orphans' properties may be consulted to determine if the box is near the top/bottom. 
   1.730 +The 'widows'/'orphans' properties may be consulted to determine if the box is near the top/bottom.
   1.731  -->
   1.732  
   1.733 -<p>These new keywords only apply in paged media; in continous media declarations with these keywords are ignored. 
   1.734 +<p>These new keywords only apply in paged media; in continous media declarations with these keywords are ignored.
   1.735  
   1.736  <div class=example>
   1.737  <p>Float figure to top of natural column:
   1.738 @@ -2696,7 +2656,7 @@
   1.739  <img alt="sample rendering" src=6.png>
   1.740  </div>
   1.741  
   1.742 -<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. 
   1.743 +<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.
   1.744  
   1.745  <div class=example>
   1.746  <p>In combination with 'column-span', the figure is floated to the top corner of the multicol element on that page:
   1.747 @@ -2716,7 +2676,7 @@
   1.748  <p>In this example, a commonly used newspaper layout is easily described:
   1.749  
   1.750  <pre>
   1.751 -body { columns: 3 } 
   1.752 +body { columns: 3 }
   1.753  img.A { column-span: 2; width: 100% }  /* image spans two columns */
   1.754  .one { column-span: 2 }                /* lead paragraph spans two columns */
   1.755  </pre>
   1.756 @@ -2733,7 +2693,7 @@
   1.757  
   1.758  <dt>next-page
   1.759  
   1.760 -<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. 
   1.761 +<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.
   1.762  
   1.763  <div class=example>
   1.764  
   1.765 @@ -2745,7 +2705,7 @@
   1.766  
   1.767  <dt>next-column
   1.768  
   1.769 -<dd>In paged media, float box to the next column. 
   1.770 +<dd>In paged media, float box to the next column.
   1.771  
   1.772  <div class=example>
   1.773  
   1.774 @@ -2759,7 +2719,7 @@
   1.775   !--
   1.776  <dt>unless-room
   1.777  
   1.778 -<dd>Only float the box if it otherwise would have lead to a column or page break. 
   1.779 +<dd>Only float the box if it otherwise would have lead to a column or page break.
   1.780  
   1.781  <div class=example>
   1.782  
   1.783 @@ -2881,7 +2841,7 @@
   1.784  
   1.785  <h2>Page and column floats, alternative syntax</h2>
   1.786  
   1.787 -<p>This section describes an alternative syntax for page and column floats. 
   1.788 +<p>This section describes an alternative syntax for page and column floats.
   1.789  
   1.790  <p>Four new keywords on 'float' have been added:
   1.791  
   1.792 @@ -2961,7 +2921,7 @@
   1.793  <dl>
   1.794  <dt>intrude
   1.795  
   1.796 -<dd>The element may intrude neighboring columns; if the element is not in a multi-column element, this keyword has no effect. 
   1.797 +<dd>The element may intrude neighboring columns; if the element is not in a multi-column element, this keyword has no effect.
   1.798  </dl>
   1.799  
   1.800  </dl>
   1.801 @@ -2995,10 +2955,10 @@
   1.802        <td><dfn>float-offset</dfn>
   1.803      <tr>
   1.804        <td><em>Value:</em>
   1.805 -    <td>&lt;length> &lt;length> ? 
   1.806 +    <td>&lt;length> &lt;length> ?
   1.807      <tr>
   1.808        <td><em>Initial:</em>
   1.809 -      <td>0 0 
   1.810 +      <td>0 0
   1.811      <tr>
   1.812        <td><em>Applies to:</em>
   1.813        <td>floated elements
   1.814 @@ -3020,15 +2980,15 @@
   1.815  it has been floated with 'float'. If one value is specified, it is
   1.816  the horizontal offset. If two values are specified, the first is the
   1.817  horizontal and the second is the vertical offset. If no vertical value
   1.818 -has been specified, the vertical offset is set to zero. 
   1.819 +has been specified, the vertical offset is set to zero.
   1.820  
   1.821  <p>This property can only influence a float along an axis it has been floated.
   1.822  
   1.823  <div class=example>
   1.824  <pre>
   1.825 -img { 
   1.826 +img {
   1.827    float: left;
   1.828 -  float-offset: 2em 3em; 
   1.829 +  float-offset: 2em 3em;
   1.830  }
   1.831  </pre>
   1.832  
   1.833 @@ -3043,7 +3003,7 @@
   1.834  naturally appear.
   1.835  
   1.836  <div class=example>
   1.837 -<pre>img { 
   1.838 +<pre>img {
   1.839    float: right;
   1.840    float-offset: 5px;
   1.841  }
   1.842 @@ -3056,8 +3016,8 @@
   1.843  <p>Percentage values are computed according to this formula:
   1.844  
   1.845  <pre>
   1.846 -  (containing-block-width - float-width) * percentage 
   1.847 -  (containing-block-height - float-height) * percentage 
   1.848 +  (containing-block-width - float-width) * percentage
   1.849 +  (containing-block-height - float-height) * percentage
   1.850  </pre>
   1.851  
   1.852  
   1.853 @@ -3079,11 +3039,11 @@
   1.854  <p>When negative values are set on this property, the column gap is also part of the calculation:
   1.855  
   1.856  <pre>
   1.857 -  ((containing-block-width + 2 * column-gap) - float-width) * percentage 
   1.858 +  ((containing-block-width + 2 * column-gap) - float-width) * percentage
   1.859  </pre>
   1.860  
   1.861  <div class=example>
   1.862 -<pre>img { 
   1.863 +<pre>img {
   1.864    float: top right;
   1.865    float-offset: -50% 3em;  /* 50% centers the box */
   1.866    width: 120%;
   1.867 @@ -3221,7 +3181,7 @@
   1.868  <!--
   1.869  <pre>
   1.870  .pullquote {
   1.871 -  float: center; 
   1.872 +  float: center;
   1.873    clear-side: none;
   1.874  }
   1.875  </pre>
   1.876 @@ -3240,7 +3200,7 @@
   1.877  .pullquote {
   1.878    float: positioned;
   1.879    left: 5em;
   1.880 -  clear-side: none; 
   1.881 +  clear-side: none;
   1.882  }
   1.883  </pre>
   1.884  
   1.885 @@ -3268,9 +3228,9 @@
   1.886    columns: 15em;
   1.887    background: url(nicecar.jpg);
   1.888    background-exclude-level: 0.5;
   1.889 -}  
   1.890 +}
   1.891  article h1 { column-span: all } /* Bonneville Speedway */
   1.892 -</pre>  
   1.893 +</pre>
   1.894  
   1.895  </div>
   1.896  
   1.897 @@ -3283,9 +3243,9 @@
   1.898    columns: 6em;
   1.899    background: url(nicecar.jpg);
   1.900    background-exclude-level: 0.5;
   1.901 -}  
   1.902 +}
   1.903  article h1 { column-span: all } /* Bonneville Speedway */
   1.904 -</pre>  
   1.905 +</pre>
   1.906  </div>
   1.907  
   1.908  <p>Background images can be repeated. Therefore exclusions based on images can be repeated.
   1.909 @@ -3309,7 +3269,7 @@
   1.910  
   1.911  <h3>Exclusions based on rendered content</h3>
   1.912  
   1.913 -<P>A new property. 'exclude-level', is introduced to allow wraps around the rendered content of the element. 
   1.914 +<P>A new property. 'exclude-level', is introduced to allow wraps around the rendered content of the element.
   1.915  
   1.916  <div class=example>
   1.917  <img src=exclusions-dropcap.png>
   1.918 @@ -3435,7 +3395,7 @@
   1.919  <div class=example>
   1.920  <img alt="sample rendering" src=regions.png>
   1.921  
   1.922 -<p>In this example, the multicol layout is changed so that the image (which appears first in the markup) spans two columns and is floated to the top, thereby escaping its natural column. The first column, which holds the start of the textual content is also floated to the top, spanning two columns, and therefore ends up just under the image. When the first column/region is floated away, the second column will move into its space. 
   1.923 +<p>In this example, the multicol layout is changed so that the image (which appears first in the markup) spans two columns and is floated to the top, thereby escaping its natural column. The first column, which holds the start of the textual content is also floated to the top, spanning two columns, and therefore ends up just under the image. When the first column/region is floated away, the second column will move into its space.
   1.924  
   1.925  <pre>
   1.926  article { columns: 3 }
   1.927 @@ -3444,7 +3404,7 @@
   1.928    column-span: 2;
   1.929    float: top;
   1.930    height: 3em;          /* sets preferred height of region */
   1.931 -}  
   1.932 +}
   1.933  
   1.934  &lt;article>
   1.935    &lt;img ...>
   1.936 @@ -3459,7 +3419,7 @@
   1.937  div.chapter::region(1) {
   1.938    transform: rotate(6.5deg);
   1.939  }
   1.940 -div.chapter::region(2) { 
   1.941 +div.chapter::region(2) {
   1.942    transform: rotate(-5.5deg) translate(0, 40px);
   1.943  }
   1.944  </pre>
   1.945 @@ -3510,8 +3470,8 @@
   1.946  <div class=example>
   1.947  <pre>
   1.948    article { columns: 14em; }
   1.949 -  article::column(1) { 
   1.950 -     position: absolute; 
   1.951 +  article::column(1) {
   1.952 +     position: absolute;
   1.953       font-size: 1.2em;
   1.954       visibility: collapse; /* makes space available others to use */
   1.955       ...
   1.956 @@ -3560,7 +3520,7 @@
   1.957  
   1.958  <h2>Selecting pages</h2>
   1.959  
   1.960 -<p>In CSS 2.0, <a href="http://www.w3.org/TR/CSS2/page.html#page-selectors">first, left and right pages</a> can be selected. This specification adds support for selecting a certain page generate by a certain element. 
   1.961 +<p>In CSS 2.0, <a href="http://www.w3.org/TR/CSS2/page.html#page-selectors">first, left and right pages</a> can be selected. This specification adds support for selecting a certain page generate by a certain element.
   1.962  
   1.963  <p>The 'first-page' pseudo-element is similar to the 'first-letter'
   1.964  and 'first-line' elements; it is used to apply styling to the part of
   1.965 @@ -3609,14 +3569,14 @@
   1.966  
   1.967  
   1.968  <!--
   1.969 -nth page in the document, or the nth named page. 
   1.970 +nth page in the document, or the nth named page.
   1.971  
   1.972  
   1.973  <div class=example>
   1.974  <p>This example sets the background color of the second page in the document:
   1.975  
   1.976  <pre>
   1.977 -@page :nth(2) { 
   1.978 +@page :nth(2) {
   1.979    background: green;
   1.980  }
   1.981  <pre>
   1.982 @@ -3629,7 +3589,7 @@
   1.983  @page chapter {
   1.984    background: yellow;
   1.985  }
   1.986 -@page chapter:nth(2) { 
   1.987 +@page chapter:nth(2) {
   1.988    background: green;
   1.989  }
   1.990  div.chapter {
   1.991 @@ -3642,7 +3602,7 @@
   1.992  
   1.993  <div class="example">
   1.994  <pre>
   1.995 -@page chapter:nth(2n+1) { 
   1.996 +@page chapter:nth(2n+1) {
   1.997    background: green;
   1.998  }
   1.999  </pre>
  1.1000 @@ -3672,7 +3632,7 @@
  1.1001  
  1.1002  <h2>Selecting lines</h2>
  1.1003  
  1.1004 -<p>The 'first-line' pseudo-element selects the first formatted line of an element. The 'first-lines(n)' pseudo-element selects the first n formatted lines of an element. 
  1.1005 +<p>The 'first-line' pseudo-element selects the first formatted line of an element. The 'first-lines(n)' pseudo-element selects the first n formatted lines of an element.
  1.1006  
  1.1007  <div class=example>
  1.1008  <img alt="sample rendering" src=regions.png>
  1.1009 @@ -3721,10 +3681,10 @@
  1.1010  
  1.1011  ::footnote-call {
  1.1012    counter-increment: footnote;
  1.1013 -  content: counter(footnote, super-decimal); 
  1.1014 +  content: counter(footnote, super-decimal);
  1.1015  }
  1.1016  ::footnote-marker {
  1.1017 -  content: counter(footnote, super-decimal); 
  1.1018 +  content: counter(footnote, super-decimal);
  1.1019  }
  1.1020  
  1.1021  

mercurial