Removed max-width (not compatible with pubrules) and redundant margin rule.

bert-github · bert-github · commit 3b5d3629d6f6 · 2012-03-07T01:03:08.000+01:00
diff --git a/css3-background/Makefile b/css3-background/Makefile
@@ -11,12 +11,12 @@ cdate = $(shell date +%Y%m%d)
 %.html: %.src.html
 	@echo "Calling post-processor to generate $@..."
 	@curl -F file=@$< -F group=CSS -F output=html -F method=file -s \
-	-F date=$(cdate) \
+	-F date=$(cdate) -F status=$(status) \
 	-K ~/.curl-w3.org http://cgi.w3.org/member-bin/process.cgi >$@
 %.err: %.src.html
 	@echo "Calling post-processor to check $<..."
 	@curl -F file=@$< -F group=CSS -F output=err -F method=file -s \
-	-F date=$(cdate) \
+	-F date=$(cdate) -F status=$(status) \
 	-K ~/.curl-w3.org http://cgi.w3.org/member-bin/process.cgi >$@
 
 
diff --git a/css3-break/Overview.src.html b/css3-break/Overview.src.html
@@ -3,7 +3,7 @@
 <head profile="http://www.w3.org/2006/03/hcard">
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>CSS Fragmentation Module Level 3</title>
-  <link rel="stylesheet" type="text/css" href="../default.css">
+  <link rel="stylesheet" type="text/css" href="default.css">
   <link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/TR/W3C-[STATUS].css">
 </head>
 <body>
@@ -13,8 +13,8 @@ <h1 id="css-fragmentation-module">CSS Fragmentation Module Level 3</h1>
     <h2 class="no-num no-toc">[LONGSTATUS] [DATE]</h2>
     <dl>
       <dt>This version:</dt>
-      <!-- <dd><a href="[VERSION]">http://www.w3.org/TR/[YEAR]/WD-[SHORTNAME]-[CDATE]/</a></dd> -->
-      <dd><a href="http://dev.w3.org/csswg/[SHORTNAME]/">http://dev.w3.org/csswg/[SHORTNAME]/</a></dd>
+      <dd><a href="[VERSION]">http://www.w3.org/TR/[YEAR]/WD-[SHORTNAME]-[CDATE]/</a></dd>
+      <!-- <dd><a href="http://dev.w3.org/csswg/[SHORTNAME]/">http://dev.w3.org/csswg/[SHORTNAME]/</a></dd> -->
 
       <dt>Latest version:</dt>
       <dd><a href="http://www.w3.org/TR/[SHORTNAME]/">http://www.w3.org/TR/css3-break/</a></dd>
diff --git a/css3-layout/Overview.src.html b/css3-layout/Overview.src.html
@@ -46,8 +46,8 @@ <h2 class="no-num no-toc" id=abstract>Abstract</h2>
   <p><img src="diagram.png" alt="Image: four elements move to four
   slots in a template" longdesc="diagram.desc">
 
-  <p class=caption>A grid with four slots defined by 'display:
-  "aaaaaaa" "bccccdd"'.
+  <p class=caption>Above: a typical Web page. Below: the underlying
+  grid template.
 </div>
 
 <p>CSS is a simple, declarative language for creating style sheets
@@ -61,8 +61,8 @@ <h2 class="no-num no-toc" id=abstract>Abstract</h2>
 complex shapes and it allows the visual order to be different from the
 order of the elements in the source document.
 
-<p>A '::slot' selector allows elements to be styled differently based
-on which slot they appear in.
+<p class=level4>A '::slot' selector allows elements to be styled
+differently based on which slot they appear in.
 
 <h2 class="no-num no-toc" id=status>Status of this document</h2>
 <!--status-->
@@ -150,8 +150,9 @@ <h2>Introduction</h2>
   <p><img src="diagram.png" alt="Image: four elements move to four
   slots in a template" longdesc="diagram.desc">
 
-  <p class=caption>Four regions, called a, b, c and d, each receive a
-  part of a document
+  <p class=caption>Above: a typical Web page. Below: the underlying
+  grid template. It has four slots, a, b, c and d and the grid
+  template is defined by 'grid: "aaaaaaa" "bccccdd"'.
 </div>
 
 <p class=mtb>The styling of a Web page, a form or a graphical user
@@ -169,11 +170,11 @@ <h2>Introduction</h2>
 
 <p>The properties in this specification work by associating a
 <em>layout policy</em> with an element. Rather than letting an element
-lay out its descendants in their normal order as inline text or as
-blocks of text (the policies available in CSS level&nbsp;1), the
-policy defined in this module, called <em>template-based
-positioning,</em> gives an element an invisible grid for aligning
-descendant elements.
+lay out its descendants in a single flow, the policy defined in this
+module gives an element a <span>grid template,</span> which is a set
+of <span>slots</span> aligned to an invisible grid, where each slot is
+a <em>separate</em> flow. The descendants are given a 'flow' property
+to designate the slot into which they flow.
 
 <p>Because layouts on the Web have to adapt to different window and
 paper sizes, the rows and columns of the grid can be made fixed or
@@ -193,12 +194,12 @@ <h2>Introduction</h2>
   in complex ways and have to stay aligned (and not wrap, for example)
   when the window is resized.
 
-  <li>Paged displays (e.g., printed media) where each page is divided
-  in fixed areas for different kinds of content.
+  <li class=level4>Paged displays (e.g., printed media) where each
+  page is divided in fixed areas for different kinds of content.
 
-  <li>Complex pages with multiple regions, where the style of the text
-  does not only depend on the type of element it comes from, but also
-  on the region it is displayed in.
+  <li class=level4>Complex pages with multiple regions, where the
+  style of the text does not only depend on the type of element it
+  comes from, but also on the region it is displayed in.
 </ul>
 
 <p>Template-based positioning is an alternative to absolute
@@ -2002,8 +2003,14 @@ <h2>Floating elements inside templates</h2>
   <li>Page-based floats &ndash; In paged media (see [[!CSS3PAGE]]), if
   the value of 'float' specifies that the element floats to the top or
   bottom of the page (in a horizontal writing mode) or the left or
-  right of the page (in a vertical writing mode), the 'position'
-  property doesn't apply.
+  right of the page (in a vertical writing mode), the slot act as the
+  page. (I.e., the element floats to the top, bottom, etc. of the
+  slot, not of the page.
+
+  <li>Footnotes &ndash; Likewise, the footnote area for elements with
+  'float: footnote' is at the bottom of the slot, not of the page. The
+  @footnote at-rule can position the footnote area at other places,
+  such as the top, but always inside the slot.
 
   <li>Normal floats &ndash; In other cases, the element floats
   normally within its containing block, which in this case is its slot
diff --git a/css3-layout/new.src.html b/css3-layout/new.src.html
@@ -1653,8 +1653,8 @@ <h3 id="slot-sizes">
 
      <pre>div {
   height: 16em;
-  grid: "a.b"/*
-        "ac."/* }</pre>
+  grid: "a.b" / *
+        "ac." / * }</pre>
     </div>
 
    <li>
@@ -1712,10 +1712,11 @@ <h3 id="slot-sizes">
     largest <var>PREFH</var> of all slots in the row.
 
     <div class=example>
-     <p>For example, the second row in this grid
+     <p>For example, the third row in this grid
 
      <pre>grid: "a.c.." / 5em
-      "....b" / fit-content</pre>
+      "a...."
+      "....b"</pre>
 
      <p>must not be taller than the height (<span>block
      dimension</span>) of slot b. The first row contains a slot that
@@ -1774,7 +1775,7 @@ <h3 id="slot-sizes">
   <div class=example>
    <p>For example, there would be multiple solutions for this grid:
 
-   <pre>&lt;DIV STYLE="float: left; grid: "a.b">
+   <pre>&lt;DIV STYLE="float: left; grid: 'a.b'">
  &lt;P STYLE="flow: a">Two words
  &lt;P STYLE="flow: b">Only three words
 &lt;/DIV></pre>
@@ -1905,9 +1906,9 @@ <h2 id=positioning>
 
   <p>The second way is to absolutely position elements using four
   <em>grid lines</em> to specify the positions of the four margin
-  edges of the element. Like other positioned elements (''absolute''
-  or ''relative'', see [[!CSS21]]), these elements can overlap each
-  other and the 'z-index' property applies to them.
+  edges of the element. As positioned elements [[!CSS21]], these
+  elements can overlap each other and the 'z-index' property applies
+  to them.
 
 
 
@@ -2097,9 +2098,9 @@ <h3>
 P {grid-row: a; grid-column: d}
    </pre>
 
-   <p>are valid and mean that any P spans the same rows as slot a and
-   spans the same columns as slot c. (In this case, that means it
-   coincides with slot b.)
+   <p>mean that any P spans the same rows as slot a and spans the same
+   columns as slot c. (In this case, that means it coincides with slot
+   b.)
   </div>
 
   <p>If the value is given as ''<var>&lt;grid-track&gt;</var>'' and
@@ -2131,6 +2132,70 @@ <h3>
   'max-content'.
 
 
+<h3>
+Absolute positioning using a grid: 'top', 'right', 'bottom', 'right'</h3>
+
+  <p class=issue>Instead of introducing properties 'grid-column' and
+  'grid-row' that override 'top', 'right', 'bottom' and 'right', it
+  might be better to extend those properties.
+
+  <table class=propdef-extra>
+    <tr>
+      <th>Name:
+      <td><dfn>top</dfn>, <dfn>right</dfn>, <dfn>bottom</dfn>, <dfn>left</dfn>
+    <tr>
+      <th><a href="#values">Value</a>:
+      <td><var>&lt;identifier&gt;</var> | '*' | <var>&lt;integer&gt;</var>
+  </table>
+
+  <p>The new values for these properties refer to <em>grid lines</em>
+  of the element's <span>grid ancestor</span> as follows:
+
+  <p>An identifier or '*' refers to an edge of the slot of that name:
+  the top edge if used on 'top', the right edge if used on 'right',
+  the bottom edge if used on 'bottom', and the left edge if used on
+  'left'. ('*' refers to the <span>default slot.</span>)
+
+  <div class=example>
+   <p>For example, these rules
+
+   <pre>
+DIV {grid: "ab"
+           "cd"}
+P {position: absolute; top: a; left: d}</pre>
+
+   <p>mean that any P is positioned with its top at the top of the
+   first row and its left at the left of the second column, i.e., at
+   the top left corner of slot b. In other words, the declarations
+   'top: b; left: b' would have meant the same thing.
+  </div>
+
+  <div class=example>
+   <p>This example positions all four sides of an element at grid
+   lines, so that the element will exactly overlap a given slot. (This
+   assumes 'width' and 'height' have their default value of ''auto'.)
+
+   <pre>
+DIV {grid: "aaa"
+           "bbb"}
+DIV H2 {position: absolute; top: a; right: a;
+  bottom: a; left: a}</pre>
+  </div>
+
+  <p>A number value refers to row grid lines (on 'top' and 'bottom')
+  or to column grid lines (on 'left' and 'right').
+
+  <p class=issue>Use negative number to count from the right/bottom?
+  Then 'left: 1; right: -1' would make the element as wide as the
+  grid, no matter how many columns it had.
+
+  <p>A number '0' is an error.
+
+  <p>If the value refers to a slot or grid line that does not exist in
+  the <span>grid ancestor,</span> or if there is no grid ancestor, the
+  value is treated as ''auto''.
+
+
 
 <h3 id=grid-position>
 The 'grid-position' shorthand property</h3>
@@ -2400,7 +2465,7 @@ <h2 id=slot-layout>
 
   <div class=example>
     <p>The next three figures illustrate the placement and orientation of
-    the <i>grid element</i>'s rows, columns, and <i>grid items</i> using
+    the <i title="grid element">grid element's</i> rows, columns, and <i>grid items</i> using
     different writing modes on the <i>grid element</i>. In each of the
     figures, the markup shown in the following example is used to place
     <i>grid item</i> A in column 1, row 1, and <i>grid item</i> B in
@@ -2409,7 +2474,7 @@ <h2 id=slot-layout>
     its row and column.  
     <i>Grid item</i> B is aligned in each figure to the ending edges of
     its row and column.
-    <pre class="example">&lt;style type="text/css"&gt;
+    <pre>&lt;style type="text/css"&gt;
     #grid { display: grid; grid-columns: 1fr 1fr; grid-rows: 1fr 1fr }
     #A { grid-column: 1; grid-row: 1; grid-column-align: start; grid-row-align: start }
     #B { grid-column: 2; grid-row: 2; grid-column-align: end; grid-row-align: end }
@@ -2583,7 +2648,7 @@ <h3 id=vertical-alignment>
 
   <dl>
 
-  <dt>''bottom''
+  <dt>bottom
 
   <dd>The content of the slot is aligned to the bottom of the slot:
   the bottom margin edge of the anonymous block coincides with the
diff --git a/default.css b/default.css
@@ -19,8 +19,6 @@
 
 body {
 	counter-reset: exampleno figure issue; 
-	margin: 0 auto !important;
-	max-width: 50em;
 }
 
 /* Pagination */

Original file line number	Diff line number	Diff line change
`@@ -19,8 +19,6 @@`
`19`	`19`
`20`	`20`	`body {`
`21`	`21`	`counter-reset: exampleno figure issue;`
`22`		`- margin: 0 auto !important;`
`23`		`- max-width: 50em;`
`24`	`22`	`}`
`25`	`23`
`26`	`24`	`/* Pagination */`