css-grid-position/overview.src.html

<!DOCTYPE html public '-//W3C//DTD HTML 4.01//EN'
  'http://www.w3.org/TR/html4/strict.dtd'>
<html lang="en" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
  <title>CSS Grid Positioning Module Level 3</title>
  <link rel="stylesheet" type="text/css" href="../default.css">

  <style type="text/css">
    .cols { width: 500px; height: 200px; background: #fff; position: relative; border: solid 10px blue; margin: 0.5em 2em 1em 0; font: bold 14px/19px Arial, sans-serif }
    .cols p { padding: 3px; margin: 0;  }
    .gap { position: absolute; background: black; width: 5px; bottom: 0px; top: 0px; border: 10px solid red; border-top-width: 0; border-bottom-width: 0;  }
    .rep { position: absolute; background: #333; height: 110px; width: 100px;  color: white; z-index: 4 }

    .issue { color:red;    font-style:italic;}
    .todo  { background:yellow; font-style:italic;}
  </style>

  <link rel="stylesheet" type="text/css"
    href="https://www.w3.org/StyleSheets/TR/W3C-ED.css">
</head>

<body>

<div class="head">
<!--logo-->

<h1>CSS Grid Positioning Module Level 3</h1>

<h2 class="no-num no-toc">[LONGSTATUS] [DATE]</h2>

<dl>
  <dt>This version:</dt>
    <dd><a
      href="[VERSION]">https://www.w3.org/TR/[YEAR]/MO-[SHORTNAME]-[CDATE]</a></dd>
  <dt>Latest version:</dt>
    <dd><a
      href="[LATEST]">https://www.w3.org/TR/css3-grid</a></dd>
  <dt>Previous version:</dt>
    <dd>none
  <dt>Feedback:</dt>
    <dd><a href="mailto:www-style@w3.org?subject=%5B[css-grid-position]%5D%20feedback"
         >www-style@w3.org</a>
         with subject line &ldquo;<kbd>[css-grid-position]
         <var>&hellip; message topic &hellip;</var></kbd>&rdquo;
         (<a rel="discussion" href="http://lists.w3.org/Archives/Public/www-style/"
           >archives</a>)
  <dt>Editors:</dt>
    <dd>Alex Mogilevsky, Microsoft, <a href="mailto:alexmog@microsoft.com">alexmog@microsoft.com</a></dd>
  <dt>Authors:</dt>
    <dd>Alex Mogilevsky, Microsoft, <a href="mailto:alexmog@microsoft.com">alexmog@microsoft.com</a></dd>
    <dd>Markus Mielke, Microsoft, <a href="mailto:alexmog@microsoft.com">mmielke@microsoft.com</a></dd>
</dl>
<!--begin-copyright-->
<p>[If you keep the &lt;!--comment--&gt;, the copyright will be included
here automatically]</p>
<!--end-copyright-->

<hr title="Separator for header">
</div>

<details class="annoying-warning" open>
  <summary>Obsoletion Notice</summary>
  This specification is not being actively maintained, and should not be used as a guide for implementations.  It may be revived in the future, but for now should be considered obsolete.  <br>If you have questions or comments on this specification, please send an email to the CSS Working Group's mailing list at <a href="mailto:www-style@w3.org">www-style@w3.org</a>.  (Before sending mail for the first time, you have to subscribe at <a href="http://lists.w3.org/Archives/Public/www-style/">http://lists.w3.org/Archives/Public/www-style/</a>.)
</details>

<h2  class="no-num no-toc" id=abstract>Abstract</h2>
<p>This module describes integration of grid-based layout (similar to the grids
traditionally used in books and newspapers) with CSS sizing and positioning. </p>

<h2  class="no-num no-toc" id=status>Status of this document</h2>

<!--begin-status-->
<p>[If you keep the &lt;!--comment--&gt;, the status boilerplate will be
included here automatically.]</p>
<!--end-status-->

<p>This is the first public working draft of this module.

<h2 class="no-num no-toc" id="contents">Table of contents</h2>

<!--begin-toc-->
<p>[If you keep the &lt;!--comment--&gt; the table of contents will be
included here automatically.]</p>
<!--end-toc-->


<h2 id=dependencies>Dependencies on other modules</h2>

<p>This CSS3 module depends on the following other CSS3 modules:</p>
<ul>
  <li>[[!CSS3VAL]] </li>
</ul>
<p>It has non-normative (informative) references to the following other CSS3
modules:</p>
<ul>
  <li>[[CSS3COL]]</li>
  <li>[[CSS3GCPM]]</li>
	<li>[[MEDIAQ]]</li>
	<li>[[CSS3LAYOUT]]</li>
</ul>

<h2>Introduction</h2>

<p>Grid systems have provided great value to print designers for many years
[[THEGRID]]. Now same concepts are applied to online content [[SXSWGRIDS]],
[[AGBDL]].
Unlike print media however, dimensions of online devices vary broadly; a single
fixed-sized grid that worked perfectly for print pages only works in a subset of
web scenarios. Really adaptable solutions require dealing with a grid that
adapts to fit devices of varying form factors.</p>
<p>This module adds capabilities for sizing and positioning in terms of a
scalable grid
. The grid can be specified directly by
author, or can be implied from existing two-dimensional structures (tables or
multi-column elements).</p>
<p>Grid positioning addresses layout in continuous media and in paged media.</p>
<h2>Examples</h2>
<p>Let&#39;s start with an illustration of grid in action.</p>

<h3>Example 1</h3>

<div class="figure">
<img src="grid1_small.jpg" alt="example of a 3-column layout with an image that spans the whole page and a 2-column box in bottom left corner">
<p class="caption">Floats in multi-column layout</p>
</div>

<p style="height: 18px">Figure 1 shows a 3-column layout in paged media. It can
be seen as a grid with 6 vertical lines (at each column boundary) and horizontal
lines at margins.</p>

<div class="example">
<pre>body { columns:3; column-gap:2em; }
float1 { float:page bottom left; <strong>width:3gr;</strong> }
/* Figure 1 */
</pre>
</div>

<p>The statement &quot;float:page bottom left&quot; positions the image at the
bottom left corner of the page (as defined in [[CSS3GCPM]])</p>
<p>Property &quot;width:3gr&quot; makes it 3 &quot;grid units&quot; wide, where a &quot;grid unit&quot; is the
distance between two adjacent grid lines. Each boundary between a column and a
gap automatically produces a grid line, therefore to specify &quot;two columns,
including the gap between columns, but not including any gaps outside the
columns&quot; we can just say &quot;3gr&quot;.</p>
<p>Also, in this example the author has added a horizontal line to align
illustrations with. This can be done by explicitly defining grid lines:</p>


<div class="example">
<pre>
body { columns:3; column-gap:2em;
       <strong>grid-rows: 1.5in 1fr;</strong> }

div.illustrations
     { float:page top left; width:5gr; height:1gr;}

float1 { float:page bottom left; width:3gr; }

/* Figure 2 */
</pre>
</div>

<p>In this example, &quot;grid-rows&quot; divides vertical space with explicit grid lines. </p>
<p>&quot;1fr&quot; is a flex unit (&#39;fr&#39; for &#39;fraction&#39;). If multiple flex units are used,
they take space proportional to their values. If we wanted to define
vertical lines that would exactly match the 3-column layout with 2em gaps we
could say</p>


<div class="example">
<pre>
       grid-columns: 1fr 2em 1fr 2em 1fr;
</pre>
</div>

<p>When only one value has a &#39;fr&#39; unit (as in &quot;grid-rows: 1.5in 1fr&quot; above), it
just takes all remaining space regardless of the number.</p>


<h3>Example 2 </h3>
<p>The following example illustrates the use of a grid in construction of a complex web site
(see [[SXSWGRIDS]] for how exactly this was built).
Note how groups of elements are aligned with different sets of grid lines.</p>
<div class="figure">
<img src="Yeeaahh_grid.png" style="float:left; width:9cm;"
 alt="[image of a complex page with overlaid grid]">
<img src="Yeeaahh.png"  style="float:left; width:9cm;" alt="[image of complex page]">
<p class="caption" style="clear:left">Complex site designed with a grid</p>

</div>

<h2>Grid
declarations</h2>

<p>There are two ways to define a grid.</p>

<ol>
	<li>Explicit grid: defined  with &#39;grid-columns&#39;, &#39;grid-rows&#39; properties.</li>
	<li>Implicit grid: automatically created by elements with a natural grid
	structure (multi-column elements and tables). </li>
</ol>


<h3>Explicit grid</h3>

<p>Grid lines can be defined in terms of rows and columns.&nbsp;Rows are always
horizontal and columns are always vertical (this doesn&#39;t change in vertical
writing modes)</p>
<h4>'grid-columns' and 'grid-rows' properties</h4>

<table class="propdef">
 <tr>
  <td>Name: </td>
  <td>
  <dfn>grid-columns</dfn>
  </td>
 </tr>
 <tr>
  <td>Value: </td>
  <td>[[&lt;length&gt;|&lt;percentage&gt;|&lt;fraction&gt;] | <br />
     repeat([&lt;length&gt;|&lt;percentage&gt;|&lt;fraction&gt; ]+)]+ | <br />
      none | inherit
  </td>
 </tr>
 <tr>
  <td>Initial: </td>
  <td>none</td>
 </tr>
 <tr>
  <td>Applies to: </td>
  <td>non-replaced block-level elements </td>
 </tr>
 <tr>
  <td>Inherited: </td>
  <td>no </td>
 </tr>
 <tr>
  <td>Percentages: </td>
  <td><span>refer to width of the block</span></td>
 </tr>
 <tr>
  <td>Media: </td>
  <td>visual, paged </td>
 </tr>
 <tr>
  <td>Computed value:
  </td>
  <td>specified value </td>
 </tr>
</table>


<table class="propdef">
 <tr>
  <td>Name: </td>
  <td>
  <dfn>grid-rows</dfn>
  </td>
 </tr>
 <tr>
  <td>Value: </td>
  <td>[[&lt;length&gt;|&lt;percentage&gt;|&lt;fraction&gt;] | <br />
     ([&lt;length&gt;|&lt;percentage&gt;|&lt;fraction&gt; ]+)['['&lt;integer&gt;']']? ]+ | <br />
      none | inherit
  </td>
 </tr>
 <tr>
  <td>Initial: </td>
  <td>none</td>
 </tr>
 <tr>
  <td>Applies to: </td>
  <td>non-replaced block-level elements </td>
 </tr>
 <tr>
  <td>Inherited: </td>
  <td>no </td>
 </tr>
 <tr>
  <td>Percentages: </td>
  <td><span>refer to height of block</span></td>
 </tr>
 <tr>
  <td>Media: </td>
  <td>visual, paged </td>
 </tr>
 <tr>
  <td>Computed value:
  </td>
  <td>specified value </td>
 </tr>
</table>

<p >When grid-rows or grid-columns are specified, grid lines are defined as
follows:</p>
<ol>
	<li>&#39;start&#39; edge of content box (logical start according to writing mode)
defines a grid line</li>
	<li>each row or column of specified grid adds one line at the specified
distance from previous line </li>
	<li>if the last specified row or column does not reach the &#39;end&#39; edge of the
content box, another grid line is added at the edge of the content box</li>
</ol>
<p >&nbsp;</p>
<p >Space for each column or row of the grid can be defined as</p>

<ul>
    <li><b>Length</b>.<ul>
		<li>Note that gr
unit can also be used here (it refers to grid of the containing block)</li>
	</ul>
	</li>
    <li><b>Percentage</b> of containing block height and width<ul>
		<li>Exact behavior of percentage when mixed with other units and/or
		total percentage not equal to 100% is UA-specific. If possible UA should
		apply the same distribution algorithm as for column widths of an empty
		table</li>
	</ul>
	</li>
    <li><strong>Fraction</strong> is a non-negative floating-point number
	followed by &#39;fr&#39;. Each fraction value takes portion of available space
	proportional to the number. </li>
</ul>


<p>For example this rule </p>

<div class="example">
<pre>div { grid-columns: 50% 1fr 1fr 4em }
</pre>
</div>

<ul>
    <li>adds one grid line in the middle of containing block, </li>
    <li>another one 4em from the right</li>
    <li>another one in the middle of remaining space</li>
</ul>

<p class="issue">&#39;fr&#39; needs a precise definition. It is possible that there
isn&#39;t any space to distribute between fractions, what happens then? fr
becomes zero?</p>
<p>Grid lines can be defined in repeating groups using &quot;repeat()&quot;
construct. Nested repeating groups are not allowed.</p>
<p>For example this rule</p>

<div class="example">
<pre>div { grid-rows: 4em repeat(0.25em 1em); }
</pre>
</div>

<ul>
    <li>defines a header row of 4em</li>
    <li>adds as many additional rows as necessary, alternating heights of 0.25em
	and 1em.
	</li>
</ul>


<p class="issue">It was proposed that property names refer to horizontalvertical
lines instead of rows/columns (because they in fact define lines, not rows and
columns). Possible alternatives: <strong>
grid-horizontal-lines/grid-vertical-lines; </strong>or perhaps simply <strong>
grid-horizontal/grid-vertical.</strong></p>
<p class="issue">It was proposed to have syntax for repeating a certain number
of times. It is not strictly necessary (if the number of times is known the
values can be repeated inline) but handy.</p>

<h3>Implicit grid</h3>

<p>Elements with a natural grid structure automatically define a grid that aligns with the
structure. It is called an<em> implicit grid</em>.<em> </em>Such elements are</p>

<h4>Multi-column
element</h4>

<p>Left and right edges of each column form a grid line. There
are twice as many grid lines as there are columns.</p>

<h4>Table</h4>

<p>Border box of each table column defines two vertical lines; border box of
each table row defines two horizontal lines. In collapsing border model there is
always a pair of identical grid lines between each pair of rows and columns.
Maintaining same amount of lines per column keeps the definition consistent
across all table models and multi-column elements (e.g. a span over 2 columns is
always 3gr)</p>
<p class="issue">Definition of a grid for a table is only meaningful if there is
something that can use it. Currently there are no table floats. Should there be?
Something like &quot;float:top left table; float-offset:2gr 4gr&quot; would use the table
grid. Is there a use case for such floats? There is still absolute positioning
that can target at table of course...</p>

<h4>Viewport</h4>
<p>Viewport always defines a single-cell grid with the size of the viewport. </p>
<h4>Priority
of explicit grid definition</h4>

<p>If explicit grid properties grid-columns or grid-rows are
specified on an element with an implicit grid, the explicit properties have
priority.</p>


<h2>Grid units</h2>

<p><b>'gr'</b> is used to position in
relation to the grid lines. Actual value of each gr depends on the grid cell
in which it is used. </p>

<p>Example</p>

<div class="example">
<pre>div { columns:3; }
div img { float: top left column;
          float-offset: 2gr;
          width: 1gr }
</pre>
</div>

<p>The image is positioned over the 2<sup>nd</sup>
column (left edge of second column is 2<sup>nd</sup> grid line from left; its
width is the distance to the next grid line).</p>
<div class=cols>

<p>Lorem ipsum dolor<br>sit amet. Nam at jus.<br>
Sed imp er di et ris.<br>Cur abi tur et sapen.<br>
Vivamus a metus.<br> Aenean at risus<br> pharetra ante
luctu<br> feugiat quis enim.<br> Cum sociis natoque<br>
penatibus et magni.

<div style="position: absolute; left: 175px; top: 115px; z-index: 6">
<p>Lorem ipsum dolor<br>sit amet. Nam at jus.<br>
Sed imp er di et ris.<br>Cur abi tur et sapen.
</div>

<div style="position: absolute; left: 350px; top: 0px; z-index: 6">
<p>Lorem ipsum dolor<br>sit amet. Nam at jus.<br>
Sed imp er di et ris.<br>Cur abi tur et sapen.<br>
Vivamus a metus.<br> Aenean at risus<br> pharetra ante
luctu<br> feugiat quis enim.<br> Cum sociis natoque<br>
penatibus et magni.
</div>


<div class=rep style="top: 0; left: 175px; width: 150px"></div>
<div class=gap style="left: 150px"></div>
<div class=gap style="left: 325px"></div>
</div>

<p>Fractions of gr unit can be used too. In this example</p>

<div class="example">
<pre>div img { float:left column; float-offset: 0.5gr; width: 2gr; }
</pre>
</div>

<p>the image takes exactly the width required to stretch from
the middle of first column to the middle of second column. width:2gr in the
example doesn&#39;t start from exactly a grid line, therefore it is calculated as a
sum of grid parts (2gr = 0.5gr + 1gr + 0.5gr),
which ends in the middle of second column.</p>

<div class=cols>

<p style="width:140px;">Lorem ipsum dolor sit amet. Nam at jus.
<span style="float:right; width: 68px; height:110px; "></span>
Sed imp er di et ris. Cur abi tur et sapen. Fusce sed ligula a turpis.
Vivamus a metus.
</p>

<div style="position: absolute; left: 175px; width:140px; top: 0; z-index:4;">
<p style="width:140px">
Lorem ipsum dolor sit amet. Nam jus.
<br><span style="float:left; width: 78px; height:110px; "></span>
<span class=rep style="left: -100px; top:auto; width: 175px"></span>
Sed imp er di et ris. Cur abi
tur et sapen. Fusce
sed ligula a turpis.&nbsp;
</p>
</div>

<div style="position: absolute; left: 350px; top: 0; z-index: 6;">
<p style="width:140px;">Lorem ipsum dolor<br>sit amet. Nam at jus.<br>
Sed imp er di et ris.<br>Cur abi tur et sapen.<br>
Aenean at risus<br> pharetra ante
luctu<br> feugiat quis enim.<br> Cum sociis natoque<br>
penatibus et magni.</div>


<div class=gap style="left: 150px"></div>
<div class=gap style="left: 325px"></div>
</div>


<h3>Applicability of grid units</h3>
<p>Grid units are applicable to all properties of block elements that take
values of type <a href="https://www.w3.org/TR/css3-values/#lengths">&lt;length&gt;</a>.</p>
<p>When applied to margins, borders and padding, grid units refer to grid lines
in the direction of line progression (horizontal in layout with horizontal
lines).</p>
<p>Grid units never apply to inline elements, including inline blocks.</p>


<h3>Grid container</h3>

<p>Since separate grids can be defined on nested elements, it must be defined
which grid is referred to for every use of &#39;gr&#39; unit.</p>
<p>For all cases where &#39;gr&#39; unit is applicable the grid is taken from the
containing block (which is found as defined as defined in CSS2.1
section 10.1).</p>

<p>In this example, div1 is the positioning parent and
therefore grid of div1 is used for positioning:</p>

<div class="example">
<pre>&lt;style&gt;
 <strong>.div1 { position:absolute; grid-columns:4em repeat(1em 4em); }</strong> /* this grid is used */
 .div2 { columns-width:10em; column-gap:1em; }
 img { position:absolute; left:2gr; width:3gr; }
&lt;/style&gt;
&lt;div class=&quot;div1&quot;&gt;
 &lt;div class=&quot;div2&quot;&gt;
  &lt;img /&gt;
 &lt;/div&gt;
&lt;/div&gt;
</pre>
</div>

<p>However in the next example, grid of div2 is used by the float, because it is
the float&#39;s containing block:</p>

<div class="example">
<pre>&lt;style&gt;
 .div1 { position:absolute; grid-columns:4.5em (1em 4.5em); }
 <strong>.div2 { columns-width:10em; column-gap:1em; }</strong> /* this grid is used */
 img { float:left; float-offset:2gr; width:3gr; }
&lt;/style&gt;
&lt;div class=&quot;div1&quot;&gt;
  &lt;div class=&quot;div2&quot;&gt;
   &lt;img /&gt;
  &lt;/div&gt;
&lt;/div&gt;
</pre>
</div>


<h3>Reference point for grid units</h3>
<p class="issue">Calculating grid units require a
reference point within the grid and direction. This needs a precise definition.
For the same element, grid units for position and size may have different
reference points (but probably not different directions).</p>
<p class="issue">Define how &#39;gr&#39; is used on in-flow blocks. Is &#39;1gr&#39; generally
equivalent to &#39;100%&#39; there?</p>

<h2>Grid in overflow</h2>
<p>When a measure defined in grid units extends outside the boundaries of grid
container, grid lines are repeated according to the following rules</p>
<ul>
	<li>If overflow is in positive direction (right/bottom in
	left-to-right/top-to-bottom flow, direction of text and block progression in
	other flows)<ul>
		<li>Explicit grid<ul>
			<li>If the grid definition ends with a repeat pattern (regardless of
			repeat count), the same pattern continues indefinitely</li>
			<li>Otherwise, the last column or row size is repeated </li>
		</ul>
		</li>
		<li>Multi-column element<ul>
			<li>Additional (gap, column) pairs are added.
			<ul>
				<li>Current definition of multi-column layout doesn&#39;t allow
				variable-width columns; when it does, the last column with the
				last column gap should be repeated</li>
			</ul>
			</li>
		</ul>
		</li>
		<li>Table<ul>
			<li>The last column is repeated</li>
		</ul>
		</li>
		<li>Viewport<ul>
			<li>Additional lines are added, separated by the size of the
			viewport</li>
		</ul>
		</li>
	</ul>
	</li>
	<li>If overflow is in negative direction<ul>
		<li>The same sequence is used as in positive direction, but mirrored.
		</li>
	</ul>
	</li>
</ul>

<p class="issue">Add an example</p>
<p class="issue">How important is an overflow grid? What use cases would suffer
if &#39;gr&#39; is just set to zero in overflow?</p>

<h2>Issues</h2>

<h3>Grid on shrink-to-fit elements</h3>
<p class="issue">Specifying a grid on an element with shrink-to-fit sizing can
create difficult or unsolvable problems, similar to use percentages within
shrink to fit but even more complicated. Consider ignoring grid definition on
anything shrink-to-fit.</p>
<h3>Additional implicit grid lines</h3>
<p class="issue">On the implicit grids for
multi-column elements, it might be useful to have one grid line on the left and
right edge of each column, as well as a single grid line between each pair of
columns. Perhaps doing the same thing for tables, one line on each side of the
border spacing and another at the row/column boundary.</p>
<h3>Snap to grid</h3>

<p class="issue">Should there be an option to align flow content to next
available gridline? It opens really cool scenarios. But are they compelling
enough to create a next available notion?</p>

<h3>Undefined grid and notion of &#39;default&#39; grid</h3>
<p class="issue">When a grid unit is used in context where there isn&#39;t an
explicit or implicit grid specified, what should it be? Reaching to nearest
parent with a defined grid may or may not be the right choice. There is an
option to give any element a &quot;default grid&quot; of one cell.</p>
<h3>Page grid</h3>
<p>It must be possible to define different grids for left and right pages. Also,
any page with different dimensions (such as named pages) should be able to
define its own grid. </p>
<p class="issue">Add grid-columns/grid-rows to @page rule</p>
<h3>Named grid lines and cells</h3>

<p class="issue">If grid is used extensively, named grid locations would be
quite helpful. Defining named grid lines could look for example like this:</p>

<div class="example">
<pre>body { grid-columns: "left-edge" 1fr 1em 1fr 0.5em "center" 0.5em 1fr 1em 1fr "right-edge";
</pre>
</div>

<p class="issue">This syntax doesn&#39;t easily extend to named cells. It was
noted however that named cells also open a possibility for named flows (by
providing a sequence of named cells to fill) which makes the feature quite
attractive and further approaches Advanced Layout scenarios.</p>

<h3>Templates in CSS3 Advanced Layout module</h3>
<p class="issue">"Template-based positioning" in CSS3 Advanced Layout module [[CSS3LAYOUT]]
defines scalable templates for content to fill and also used the term "grid".
</p>
<p><span class="issue">The relationship between these modules certainly needs to
be well defined. </span></p>
<p><span class="issue">Note that technically these modules are not contradictory
(as long as is defined how an advanced-layout template produces an implicit
grid).</span> </p>
<h2 class="no-num" id=acknowledgments>Acknowledgments</h2>

<p class="MsoNormal">This specification is made possible by input from Håkon
Wium Lie, Steve Zilles, Mike Duggan, Bill Hill, Geraldine Wade, Rikkert Koppes,
Peter Linss [to be added].</p>
<p>Thanks to Khoi Vinh for the “Yeeaahh!” Example.</p>

<p>&nbsp;</p>

<h2 class="no-num" id=references>References</h2>


<h3 class="no-num" id="normative-references">Normative references</h3>
<!--begin-normative-->


<p>[Here will be inserted the file "normative.inc"]</p>
<p>&nbsp;</p>
<!--end-normative-->


<h3 class="no-num" id="other-references">Other references</h3>
<!--begin-informative-->
<p>[Here will be inserted the file "informative.inc"]</p>
<!--end-informative-->

<h2 class="no-num" id="index">Index</h2>
<!--index-->


<h2 class="no-num" id="property-index">Property index</h2>
<!-- properties -->
</body>
</html>
<!-- Keep this comment at the end of the file
Local variables:
mode: sgml
sgml-declaration:"~/SGML/HTML4.decl"
sgml-default-doctype-name:"html"
sgml-minimize-attributes:t
sgml-nofill-elements:("pre" "style" "br")
sgml-live-element-indicator:t
sgml-omittag:nil
sgml-shorttag:nil
sgml-namecase-general:t
sgml-general-insert-case:lower
sgml-always-quote-attributes:t
sgml-indent-step:nil
sgml-indent-data:t
sgml-parent-document:nil
sgml-exposed-tags:nil
sgml-local-catalogs:nil
sgml-local-ecat-files:nil
End:
-->