The motivation for having another page-based area into which content can be floated is that footnotes and sidenotes are -often used in the same document. +often used in the same document.
This example moves images to the outside margin of pages:
-@page :left { 
+@page :left {
   margin-left: 10em;
   @sidenote { position: fixed; left: -8em; width: 6em }
 }
-@page :right { 
+@page :right {
   margin-right: 10em;
   @sidenote { position: fixed; right: -8em; width: 6em }
 }
@@ -1547,7 +1548,7 @@
    
    
 
@@ -2579,7 +2580,7 @@
       bookmark-target
     
       Value:
-      none | <uri> 
+      none | <uri>
     
       Initial:
       none
@@ -2600,7 +2601,7 @@
       For URI values, the absolute URI; for 'none', as specified.
 
 
-This property specifies the target of the bookmark link. 
+
This property specifies the target of the bookmark link.
 
 

 @@ -2710,50 +2711,9 @@
 
   9. Styling blank pages
 
-  Blank pages that appear as a result of forced page breaks can be styled
-   with the :blank pseudo-class.
-
-  

-   In this example, forced page break may occur before h1
-    elements.
-
-   
-h1 { page-break-before: left }
-
-@page :blank {
-  @top-center { content: "This page is intentionally left blank" }
-}
-
-  
-
-  The :blank pseudo-class has the same specificity as the
-   :first pseudo-class. A page matched by :blank
-   will still be matched by other page selectors.
-
-  

-   If headers have been specified on all right pages, a blank right page
-    will be matched by both :blank and :right.
-    Therefore, margin boxes set on right pages will have to be removed unless
-    they are wanted on blank pages. Here is an example where the top center
-    header is removed from blank pages, while the page number remains:
-
-   
-h1 { page-break-before: left }
-
-@page :blank {
-  @top-center { content: none }
-}
-
-@page :right {
-  @top-center { content: "Preliminary edition" }
-  @bottom-center { content: counter(page) }
-}
-
-
-   Due to the higher specificity of :blank over
-    :right, the top center header is removed even if
-    content: none comes before content: "Preliminary
-    edition".
+  

+    This section has been moved to [CSS3PAGE].
   
 
   10. Paged presentations
@@ -2806,7 +2766,7 @@
     in RTL languages this means left; in vertical-rl this means right.
 
    -  html { 
+  html {
     overflow-style: paged-x;
     height: 100%;
   }
@@ -2820,7 +2780,7 @@
     presentations.
 
    -  #content { 
+  #content {
     overflow-style: paged-x-controls;
     height: 400px;
   }
@@ -2859,9 +2819,9 @@
 <link rel=next href=g1.html>
 ...
 @navigation {
-  nav-up: go(index); 
-  nav-left: go(previous); 
-  nav-right: go(next); 
+  nav-up: go(index);
+  nav-left: go(previous);
+  nav-right: go(next);
 }
 
     
@@ -2878,7 +2838,7 @@
     
       @navigation {
-  nav-left: back; 
+  nav-left: back;
 }
 
     
@@ -3056,7 +3016,7 @@
 
   Do numberic values (in addition to length values) make
    sense, like for orphans/widows 
 
   
These new keywords only apply in paged media; in continous media
@@ -3114,7 +3074,7 @@
    
In this example, a commonly used newspaper layout is easily described:
 
    
-body { columns: 3 } 
+body { columns: 3 }
 img.A { column-span: 2; width: 100% }  /* image spans two columns */
 .one { column-span: 2 }                /* lead paragraph spans two columns */
 
@@ -3128,7 +3088,7 @@
 
 next-page
 
-
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. 
+
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.
 
 
 
@@ -3140,7 +3100,7 @@
 
 
next-column
 
-
In paged media, float box to the next column. 
+
In paged media, float box to the next column.
 
 
 
@@ -3154,7 +3114,7 @@
  !--
 
unless-room
 
-
Only float the box if it otherwise would have lead to a column or page break. 
+
Only float the box if it otherwise would have lead to a column or page break.
 
 
 
@@ -3458,9 +3418,9 @@
 
   
    -img { 
+img {
   float: left;
-  float-offset: 2em 3em; 
+  float-offset: 2em 3em;
 }
 
 
@@ -3478,7 +3438,7 @@
    naturally appear.
 
   
-   img { 
+   img {
   float: right;
   float-offset: 5px;
 }
@@ -3488,8 +3448,8 @@
   Percentage values are computed according to this formula:
 
   
-  (containing-block-width - float-width) * percentage 
-  (containing-block-height - float-height) * percentage 
+  (containing-block-width - float-width) * percentage
+  (containing-block-height - float-height) * percentage
 
 
    Pull quotes are often centered in a column. In this
@@ -3507,11 +3467,11 @@
    part of the calculation:
 
   -  ((containing-block-width + 2 * column-gap) - float-width) * percentage 
+  ((containing-block-width + 2 * column-gap) - float-width) * percentage
 
 
   
-   img { 
+   img {
   float: top right;
   float-offset: -50% 3em;  /* 50% centers the box */
   width: 120%;
@@ -3658,7 +3618,7 @@
     
 
 -h2:before { content: "Chapter " counter(header) } 
-h2 { 
+h2:before { content: "Chapter " counter(header) }
+h2 {
   string-set: header content-before content-element;
-  counter-increment: header } 
- 
+  counter-increment: header }
+
 
 
 
@@ -293,7 +294,7 @@
 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:
 
 
-title { 
+title {
   display: none;
   string-set: header contents;
 }
@@ -322,7 +323,7 @@
 on the ''string()'' value. This argument can have one of four keywords:
 
 
-''start'': the named string's entry value for that page is used. 
+
''start'': the named string's entry value for that page is used.
 
''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.
 
''last'': the named string's exit value for that page is used
 
''first-except'': similar to ''first'', except on the page where the value was assigned. On that page, the empty string is used.
@@ -331,7 +332,7 @@
 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.
 
 

-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. 
+
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.
 
 @page { @top-left { content: string(term, first) }}
 @page { @top-right { content: string(term, last) }}
@@ -342,7 +343,7 @@
 
 
 
-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. 
+
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.
 
 @page { @top-center { content: string(chapter, first-except) }}
 h1 { string-set: chapter contents }
@@ -373,7 +374,7 @@
 the style sheet author, and the names have a separate name space. A
 running element can hold one element, including its pseudo-elements
 and its descendants. Whenever a new element is assigned to a running
-element, the old element is lost. 
+element, the old element is lost.
 
 User agents, however, must be able to remember the
 result of more than one assignment as the ''element()'' value
@@ -481,7 +482,7 @@
 with a corresponding code. For example, there are often leaders between
 titles and page numbers in a table of contents (TOC). Another example is the
 phone book where there are leaders between a name and a telephone
-number. 
+number.
 
 
In CSS3, a leader is composed of series of glyphs through the
 ''leader()'' value on the 'content' property. The functional notation
@@ -507,7 +508,7 @@
 
 
 
 
@@ -529,7 +530,7 @@
 space, the leader string is repeated as many times as possible in the
 writing direction. At the end of the leader, a partial string pattern
 may be shown.  White space in leaders is collapsed according to the
-values on white-space properties. 
+values on white-space properties.
 
 
 
@@ -616,14 +617,14 @@
 
 

 Lay out the content with leaders of minimum lengths
-
Determine the empty space left on the line. 
+
Determine the empty space left on the line.
 
 
Distribute the empty space between the leaders on the line. Glyphs
 must not be shown partially. All leaders on the line should, to the
 extent possible, have the same length. This may not always be possible
-as the minimum leader length must be honored. 
-
-
Fill the empty space with the specified leader pattern. 
+as the minimum leader length must be honored.
+
+
Fill the empty space with the specified leader pattern.
 
 
 
@@ -647,7 +648,7 @@
    Bla great bla bla world bla bla
   empire bla bla color bla bla
-  history bla bla forever.   John 
+  history bla bla forever.   John
   Johnson
 
 
@@ -677,7 +678,7 @@
 
    Bla great bla bla world bla bla empire
-  bla bla color bla bla history bla bla 
+  bla bla color bla bla history bla bla
   forever.                  John Johnson
 
 
@@ -691,7 +692,7 @@
 way of a section number (e.g., "See section 3.4.1"), a page number
 (e.g., "See discussion on page 72"), or a string (e.g., "See the
 chapter on Europe"). Being able to resolve these cross-references
-automatically saves time and reduces the number of errors. 
+automatically saves time and reduces the number of errors.
 
 The ''target-counter'' and ''target-counters'' values
 
@@ -718,7 +719,7 @@
 
 
 
-This style sheet specifies that a string like " (see section 1.3.5)" 
+
This style sheet specifies that a string like " (see section 1.3.5)"
 is added after a link:
 
 
@@ -759,7 +760,7 @@
 
  h2 { counter-increment: chapter }
-a { content: "Chapter " target-counter(attr(href url), chapter) 
+a { content: "Chapter " target-counter(attr(href url), chapter)
    ' ("'  target-text(attr(href url), content-element) '") on page '
    target-counter(attr(href url), page);
 
@@ -790,7 +791,7 @@
 
 
 
-In its simplest form, making a footnote is simple. 
+
In its simplest form, making a footnote is simple.
 
 
 <style>
@@ -822,7 +823,7 @@
  <style>
 @media print {
-  .footnote { 
+  .footnote {
     float: footnote;
     content: target-pull(attr(href url)) }
   .call { display: none }
@@ -856,7 +857,7 @@
 The content of the "title" attribute can be turned into a footnote with this code:
 
 
-span[title]::after { 
+span[title]::after {
   content: attr(title);
   float: footnote;
 }
@@ -872,7 +873,7 @@
 
 
 -span.footnote { 
+span.footnote {
   float: footnote;
 }
 
@@ -890,10 +891,10 @@
 In this example, the footnotes are displayed inline:
 
 
-@footnote { 
+@footnote {
   display: inline;
 }
-span.footnote { 
+span.footnote {
   float: footnote;
 }
 
@@ -901,16 +902,16 @@
 Here is one possible presentation of inline footnotes:
 
 
-¹ The first footnote. º The second footnote. 
+¹ The first footnote. º The second footnote.
 
 
 
 
 
 For each new footnote element, the ''footnote'' counter is automatically
-incremented. 
+incremented.
 
 
 
The footnote area
@@ -919,7 +920,7 @@
 All elements with ''float: footnote'' are moved to the footnote
 area. The footnote area is described by an @footnote-rule inside
 the @page-rule. By default, the footnote area appears at the bottom of
-the page, but it can be positioned in other places. 
+the page, but it can be positioned in other places.
 
 
Should the footnote are be positioned using page floats
 or (fixed?) absolute positioning? Or both?
@@ -932,7 +933,7 @@
 
 
 @page {
-  @footnote { 
+  @footnote {
     float: bottom;
     column-span: all;
     width: 100%;
@@ -948,7 +949,7 @@
 
  @page {
-  @footnote { 
+  @footnote {
     float: bottom;
     width: 100%;
   }
@@ -962,7 +963,7 @@
 
  @page {
-  @footnote { 
+  @footnote {
     float: bottom-corner;
     width: 100%;
   }
@@ -986,7 +987,7 @@
 div.figure { float: bottom page }
 
 
-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. 
+
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.
 
 
 
@@ -998,7 +999,7 @@
 
 These properties apply to the footnote area: 'content', 'border',
 'padding', 'margin', 'height', 'width', 'max-height', 'max-width',
-'min-height', 'min-width', the background properties. 
+'min-height', 'min-width', the background properties.
 
 
 
 
 
@@ -2025,13 +2026,13 @@
       marks
     
       Value:
-      [ crop || cross ] | none 
+      [ crop || cross ] | none
     
       Initial:
       none
     
       Applies to:
-      page context 
+      page context
     
       Inherited:
       no
@@ -2217,7 +2218,7 @@
       bookmark-target
     
       Value:
-      none | <uri> 
+      none | <uri>
     
       Initial:
       none
@@ -2238,7 +2239,7 @@
       For URI values, the absolute URI; for 'none', as specified.
 
 
-
This property specifies the target of the bookmark link. 
+
This property specifies the target of the bookmark link.
 
 

 @@ -2309,8 +2310,8 @@
 
 
 
-The values representing the colors are between ''0'' and ''1''. 
-Values outside this range are clipped. 
+
The values representing the colors are between ''0'' and ''1''.
+Values outside this range are clipped.
 
 
It is not expected that screen-centric user agents support CMYK
 colors and it is therefore important that existing CSS color values can
@@ -2330,51 +2331,10 @@
 
 
Styling blank pages
 
-Blank pages that appear as a result of forced page breaks can be
-styled with the :blank pseudo-class. 
-
-

-In this example, forced page break may occur before h1 elements. 
-
-h1 { page-break-before: left }
-
-@page :blank {
-  @top-center { content: "This page is intentionally left blank" }
-}
-
-
-
-The :blank pseudo-class has the same specificity as
-the :first pseudo-class. A page matched
-by :blank will still be matched by other page selectors.
-
-

-
-If headers have been specified on all right pages, a blank right
-page will be matched by both :blank
-and :right. Therefore, margin boxes set on right pages
-will have to be removed unless they are wanted on blank pages. Here is
-an example where the top center header is removed from blank pages,
-while the page number remains:
-
-
-h1 { page-break-before: left }
-
-@page :blank {
-  @top-center { content: none }
-}
-
-@page :right {
-  @top-center { content: "Preliminary edition" }
-  @bottom-center { content: counter(page) }
-}
-
-
-Due to the higher specificity of :blank
-over :right, the top center header is removed even
-if content: none comes before content: "Preliminary
-edition".
-
+

+
+  This section has been moved to [[CSS3PAGE]].
+
 
 
 
@@ -2416,7 +2376,7 @@
 right.
 
 -  html { 
+  html {
     overflow-style: paged-x;
     height: 100%;
   }
@@ -2430,7 +2390,7 @@
 continous presentations.
 
 -  #content { 
+  #content {
     overflow-style: paged-x-controls;
     height: 400px;
   }
@@ -2445,9 +2405,9 @@
 naturally extended to navigation between web documents. To support
 this, a new @-rule is proposed: @navigation. The purpose of
 @navigation is to describe which documents the user can navigate to by
-moving up, right, down, or left from the current document. 
-
-Four new properties are allowed inside @navigation: nav-up, nav-right, nav-bottom, nav-right. 
+moving up, right, down, or left from the current document.
+
+
Four new properties are allowed inside @navigation: nav-up, nav-right, nav-bottom, nav-right.
 
 
The name of the properties inside @navigation are borrowed from CSS3 Basic User Interface Module.
 
@@ -2466,9 +2426,9 @@
 <link rel=next href=g1.html>
 ...
 @navigation {
-  nav-up: go(index); 
-  nav-left: go(previous); 
-  nav-right: go(next); 
+  nav-up: go(index);
+  nav-left: go(previous);
+  nav-right: go(next);
 }
 
 
@@ -2482,7 +2442,7 @@
 
  @navigation {
-  nav-left: back; 
+  nav-left: back;
 }
 
 
@@ -2490,7 +2450,7 @@
 url()
 
 
The funcation takes one argument: a URL. Relative URLs are
-relative to the style sheet. 
+relative to the style sheet.
 
 
 @@ -2504,7 +2464,7 @@
 url-doc()
 
 
The function is identical to url(), except that relative URLs are
-relative to the document, not to the style sheet. 
+relative to the document, not to the style sheet.
 
 
 @@ -2617,11 +2577,11 @@
 
 snap(<length> <length>? [, top | bottom | near ]?)
 
-
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. 
+
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.
 
 
The optional keyword value specifies where the element is floated: top, bottom, or the nearest of the two. The initial value is 'near'.
 
-
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. 
+
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.
 
 
snap
 
@@ -2642,15 +2602,15 @@
 
 
 
-Should we define a reasonable default (say, 3em) instead of relying on implementation-specific values? 
+
Should we define a reasonable default (say, 3em) instead of relying on implementation-specific values?
 
Do numberic values (in addition to length values) make sense, like for orphans/widows
 
 
 
 
-
These new keywords only apply in paged media; in continous media declarations with these keywords are ignored. 
+
These new keywords only apply in paged media; in continous media declarations with these keywords are ignored.
 
 

 Float figure to top of natural column:
@@ -2696,7 +2656,7 @@
 
 
 
-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. 
+
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.
 
 

 In combination with 'column-span', the figure is floated to the top corner of the multicol element on that page:
@@ -2716,7 +2676,7 @@
 
In this example, a commonly used newspaper layout is easily described:
 
 
-body { columns: 3 } 
+body { columns: 3 }
 img.A { column-span: 2; width: 100% }  /* image spans two columns */
 .one { column-span: 2 }                /* lead paragraph spans two columns */
 
@@ -2733,7 +2693,7 @@
 
 
next-page
 
-
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. 
+
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.
 
 
 
@@ -2745,7 +2705,7 @@
 
 
next-column
 
-
In paged media, float box to the next column. 
+
In paged media, float box to the next column.
 
 
 
@@ -2759,7 +2719,7 @@
  !--
 
unless-room
 
-
Only float the box if it otherwise would have lead to a column or page break. 
+
Only float the box if it otherwise would have lead to a column or page break.
 
 
 
@@ -2881,7 +2841,7 @@
 
 Page and column floats, alternative syntax
 
-This section describes an alternative syntax for page and column floats. 
+
This section describes an alternative syntax for page and column floats.
 
 
Four new keywords on 'float' have been added:
 
@@ -2961,7 +2921,7 @@
 

 intrude
 
-
The element may intrude neighboring columns; if the element is not in a multi-column element, this keyword has no effect. 
+
The element may intrude neighboring columns; if the element is not in a multi-column element, this keyword has no effect.
CSS Generated Content for Paged Media Module

Editor's Draft 10 February 2013

Editor's Draft 11 February 2013

9. Styling blank pages

10. Paged presentations

The ''target-counter'' and ''target-counters'' values

The footnote area

Styling blank pages

Page and column floats, alternative syntax
