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>[[ <identifier> <content-list>] [, <identifier> <content-list>]* ] | none 1.25 + <td>[[ <identifier> <content-list>] [, <identifier> <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 <style> 1.236 @@ -822,7 +823,7 @@ 1.237 <pre> 1.238 <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 -¹ The first footnote. º The second footnote. 1.281 +¹ The first footnote. º 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><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 | <uri> 1.554 + <td>none | <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 <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(<length> <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><length> <length> ? 1.806 + <td><length> <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 <article> 1.935 <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