8000 csswg-drafts/css3-tables-algorithms/Overview.src.htm at 0c7d3bcdf7797d39aa5badc52096126ad95b0cc1 · w3c/csswg-drafts · GitHub
Skip to content

Overview.src.htm

Latest commit

 

History

History
2254 lines (1912 loc) · 66.6 KB

Overview.src.htm

File metadata and controls

2254 lines (1912 loc) · 66.6 KB
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=windows-1252">
<meta name=Generator content="Microsoft Word 12 (filtered)">
<style>
</style>
<link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/W3C-ED.css" type="text/css">
</head>
<body lang=EN-US>
<div class=Section1>
<div >
<H1>CSS 3 Tables Algorithms</H1>
</div>
<p ><b><span >This version: </span></b></p>
<p ><a
href="http://www.w3.org/Style/Group/css3-src/css3-template/%5bVERSION%5d"><span>http://www.w3.org/Style/Group/css3-src/css3-template/[VERSION]</span></a><span
> </span></p>
<p ><b><span lang=DE >Latest version: </span></b></p>
<p ><a
href="http://www.w3.org/TR/css3-template"><span lang=DE >http://www.w3.org/TR/css3-template</span></a><span
> </span></p>
<p ><b><span >Previous version: </span></b></p>
<p ><a
href="http://www.w3.org/Style/Group/css3-src/css3-template/%5bhttp:/www.w3.org/PreviousVersionURI%5d"><span
>[http://www.w3.org/PreviousVersionURI]</span></a><span
> </span></p>
<p ><b><span >Editors: </span></b></p>
<p ><a
href="mailto:salonir@microsoft.com"><span >Saloni Mira Rai</span></a><span >
&nbsp;&nbsp;&nbsp;&nbsp;
&lt;salonir@microsoft.com&gt; </span></p>
<p ><b><span >Authors: </span></b></p>
<p ><a
href="mailto:shuodong@microsoft.com"><span >Shuo Dong</span></a><span >
&nbsp;&nbsp;&nbsp;&nbsp;
&lt;shuodong@microsoft.com&gt; </span></p>
<p ><a
href="mailto:edoyle@microsoft.com"><span lang=DE >Erika Doyle</span></a><span lang=DE
>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&lt;edoyle@microsoft.com&gt;</span></p>
<p ><b><span >Former Editors: </span></b></p>
<p ><a
href="mailto:mmielke@microsoft.com"><span lang=DE >Markus Mielke</span></a><span
> </span><span
lang=DE >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&lt;mmielke@microsoft.com&gt; </span></p>
<p ><span >&nbsp;&nbsp;
</span></p>
<details class="annoying-warning">
<summary>This document is obsolete.</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>
<h1>Abstract</h1>
<p >The intent of this document is to provide a set of 77F3 detailed
algorithms which describe certain table layout behaviors that are common to most
major browsers today and propose additional standard behaviors in order to
achieve full browser interoperability in table layout.&nbsp; The Table layout
algorithm is one of the most used and most difficult to understand features in
HTML, as there are no common behavior descriptions in either HTML or CSS. The
goal of this document is to introduce a focused discussion around a unified
table behavior with the goal of getting agreement on a set of scenarios for
integration into the CSS 3 Tables specification.&nbsp; </p>
<p >This document is not complete but it tries to capture the
most common scenarios in which browsers have achieved interoperability. Our
hope is that this document is seen as a starting point to provide at least a
partial definition of table layout behavior, ten years after its introduction
into the market.&nbsp; </p>
<h1>Captions in visual formatting model</h1>
<p >Captions above or below a 'table' element are formatted very
much as if they were a block element before or after the table, except that (1)
they inherit inheritable properties from the table, (2) they are not considered
to be a block box for the purposes of any 'compact' or 'run-in' element that
may precede the table, and (3) they use the width of the anonymous box as input
for its available width calculations. </p>
<p >The width of the anonymous box is the border-edge width of
the table box inside it, as described by CSS 2.1 section 17.4. Percentages on
'width' and 'height' properties of the table are relative to the anonymous
box's containing block, not the anonymous box itself.</p>
<p >This algorithm follows the CSS 2.1 specification of the
caption-side property, where the only possible values are top, bottom and
inherit. CSS 3 will also add left and right. Thus in the algorithm
presented here, the caption width will not affect the table auto layout
algorithm in any way. However, the output of the table auto layout algorithm
may affect the sizing of table caption, since it determines the anonymous table
box size.</p>
<p ><span >In
the following example, the </span><a href=""><span
>'caption-side'</span></a><span > property places captions on top of tables.
The caption will be as wide as the anonymous box of the table, and caption text
will be left-justified. </span></p>
<pre class="example"><span >caption { caption-side: top;<br>
<br>
width: auto;<br>
<br>
text-align: left }</span></pre>
<p><span >Example of
the visual model:</span></p>
<p><span ><img border=0
width=533 height=483
src="image002.jpg"
alt="A table with a caption above&#10;it"></span></p>
<p><span >Note: CSS3
might want to define a property that enables the developer to use the table's
parent width instead of the anonymous box width as an input in the caption
width algorithm.</span></p>
<h3>Considerations for the caption width algorithm</h3>
<ol start=1 type=1>
<li >Caption has either auto width
or a specified width unit value.</li>
<li >Padding, margin and border
should behave like a normal block box and are covered by the CSS Box Model
calculations. </li>
</ol>
<h3>Inputs</h3>
<ol start=1 type=1>
<li >Table used width </li>
<li >Caption specified width (if
any) </li>
</ol>
<h3>Output</h3>
<p >Caption's used width</p>
<h3>Naming conventions<span >&nbsp;</span></h3>
<table Table border=1 cellspacing=0 cellpadding=0 width="100%"
>
<tr >
<td width="21%" valign=top >
<p ><b>Name</b></p>
</td>
<td width="78%" valign=top >
<p ><b>Explanation</b></p>
</td>
</tr>
<tr >
<td width="21%" valign=top >
<p >captionSpecifiedWidth</p>
</td>
<td width="78%" valign=top >
<p >Input provided by the width property.</p>
</td>
</tr>
<tr >
<td width="21%" valign=top >
<p >captionUsedWidth</p>
</td>
<td width="78%" valign=top >
<p >Output that determines the width of the caption algorithm.</p>
</td>
</tr>
<tr >
<td width="21%" valign=top >
<p >contentMinWidth</p>
</td>
<td width="78%" valign=top >
<p >The minimal unit of breakable text (in most cases, the smallest
word in the caption).</p>
</td>
</tr>
<tr >
<td width="21%" valign=top >
<p >tableUsedWidth</p>
</td>
<td width="78%" valign=top >
<p >Input provided by table auto layout algorithm. This is the
width actually used by the table.</p>
</td>
</tr>
</table>
<p><span >&nbsp;</span></p>
<h3 >Algorithm</h3>
<p ><span >The
caption sizing algorithm can be summarized like this (ignoring possible constraints
set by the min-width and max-width properties)</span><span
class=MsoFootnoteReference><span > <a name="_ftnref1"></a><a href="#_ftn1" title=""><span
>[1]</span></a></span></span><span >:</span></p>
<p><span >&nbsp;</span></p>
<p ><span >IF
captionSpecifiedWidth exist&nbsp;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; captionUsedWidth =
captionSpecifiedWidth<br>
ELSE<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; captionUsedWidth
=&nbsp;tableUsedWidth</span></p>
<h3 >Observations</h3>
<ol start=1 type=1>
<li >If&nbsp; captionSpecifiedWidth &lt; contentMinWidth, caption's
content&nbsp;may stick out of the caption's box (overflow will then
apply).&nbsp; </li>
<li >When captionSpecifiedWidth &gt;
tableUsedWidth, caption and its content may stick out of the table's inner
box (i.e., the caption will be wider than the table). </li>
<li >If tableUsedWidth &lt;
contentMinWidth overflow will occur. This is the same as with normal block
level elements </li>
<li >Specified Percentage width will
be calculated based on tableUsedWidth </li>
</ol>
<p><span >In the
absence of a specified width, the caption is sized to the tableUsedWidth, which
in general follows the behavior of block level elements as described in 10.3.3
in the CSS2.1 specifications:</span></p>
<p><span >&nbsp;</span></p>
<p ><a
href="http://www.w3.org/TR/CSS21/box.html#propdef-margin-left"><span
>'margin-left'</span></a> + <a
href="http://www.w3.org/TR/CSS21/box.html#propdef-border-left-width"><span
>'border-left-width'</span></a> + <a
href="http://www.w3.org/TR/CSS21/box.html#propdef-padding-left"><span
>'padding-left'</span></a> + <a
href="http://www.w3.org/TR/CSS21/visudet.html#propdef-width"><span
>'width'</span></a> + <a
href="http://www.w3.org/TR/CSS21/box.html#propdef-padding-right"><span
>'padding-right'</span></a> + <a
href="http://www.w3.org/TR/CSS21/box.html#propdef-border-right-width"><span
>'border-right-width'</span></a> +
<a href="http://www.w3.org/TR/CSS21/box.html#propdef-margin-right"><span
>'margin-right'</span></a> +
scrollbar width (if any) = tableUsedWidth</p>
<p><span >If 'width'
is not 'auto' and 'border-left-width' + 'padding-left' + 'width' +
'padding-right' + 'border-right-width' + scrollbar width (if any) (plus any of
'margin-left' or 'margin-right' that are not 'auto') is larger than the width
of the tableUsedWidth, then any 'auto' values for 'margin-left' or
'margin-right' are, for the following rules, treated as zero. </span></p>
<p><span >&nbsp;If
all of the above have a computed value other than 'auto', the values are said
to be &quot;over-constrained&quot; and one of the used values will have to be
different from its computed value. If the </span><a
href="http://www.w3.org/TR/CSS21/visuren.html#propdef-direction"><span
>'direction'</span></a><span > property of the containing block has the
value 'ltr', the specified value of </span><a
href="http://www.w3.org/TR/CSS21/box.html#propdef-margin-right"><span
>'margin-right'</span></a><span > is ignored and the value is calculated so
as to make the equality true. If the value of </span><a
href="http://www.w3.org/TR/CSS21/visuren.html#propdef-direction"><span
>'direction'</span></a><span > is 'rtl', this happens to </span><a
href="http://www.w3.org/TR/CSS21/box.html#propdef-margin-left"><span
>'margin-left'</span></a><span > instead. </span></p>
<p><span >&nbsp;If
there is exactly one value specified as 'auto', its used value follows from
the equality. </span></p>
<p><span >If </span><a
href="http://www.w3.org/TR/CSS21/visudet.html#propdef-width"><span
>'width'</span></a><span > is set to 'auto', all other 'auto' values
become '0' and </span><a
href="http://www.w3.org/TR/CSS21/visudet.html#propdef-width"><span
>'width'</span></a><span > follows from the resulting equality. </span></p>
<p><span >If both </span><a
href="http://www.w3.org/TR/CSS21/box.html#propdef-margin-left"><span
>'margin-left'</span></a><span > and </span><a
href="http://www.w3.org/TR/CSS21/box.html#propdef-margin-right"><span
>'margin-right'</span></a><span > are 'auto', their used values are equal.
This horizontally centers the element with respect to the edges of the
tableUsedWidth. </span></p>
<p><span >The
&quot;scrollbar width&quot; value is only relevant if the user agent uses a
scrollbar as its scrolling mechanism. See the definition of the </span><a
href="http://www.w3.org/TR/CSS21/visufx.html#propdef-overflow"><span
>'overflow'</span></a><span > property. &nbsp;</span></p>
<h1>Automatic Table Layout Algorithm Overview</h1>
<p >The design of the following algorithm is based upon the CSS
2.1 recommended algorithm (http://www.w3.org/TR/CSS21/tables.html#width-layout),
the HTML 4.1 recommended algorithm
(http://www.w3.org/TR/REC-html40/appendix/notes.html#h-B.5.2 ), and an
interoperability analysis of Internet Explorer 7, Firefox 3 Alpha, Opera 9,
&nbsp;and Safari 3 Beta. The goal of this design is to stick to the CSS 2.1 and
HTML 4.1 recommendations as close as possible while also accommodating the
common behaviors of the major browsers. </p>
<p >The algorithm proposed in this document uses several types of
inputs: &nbsp;the intrinsic characteristics of table cells (i.e., the minimum
and maximum widths of their content), the value of each cells column-spanning
(colspan) attribute (if any is set), and the specified width, minimum width
(min-width) and maximum width (max-width) of each table cell and the table
itself. The output of the algorithm is the final used width of the table and
each of its columns. </p>
<h1>List of scenarios handled by this algorithm</h1>
<p >This document is considering the following author <b>inputs</b>
into the algorithm:</p>
<table Table border=0 cellspacing=0 cellpadding=0
>
<tr>
<td width=160 valign=top >
<p ><b><span >Cell</span></b></p>
</td>
<td width=160 valign=top >
<p ><b><span >Unit value</span></b></p>
</td>
<td width=160 valign=top >
<p ><b><span >Percentage</span></b></p>
</td>
<td width=160 valign=top >
<p ><b><span >Auto</span></b></p>
</td>
</tr>
<tr>
<td width=160 valign=top >
<p ><b><span >min-width</span></b></p>
</td>
<td width=160 valign=top >
<p ><span ></span></p>
</td>
<td width=160 valign=top >
<p >N/A*</p>
</td>
<td width=160 valign=top >
<p ><span ></span></p>
</td>
</tr>
<tr>
<td width=160 valign=top >
<p ><b><span >max-width</span></b></p>
</td>
<td width=160 valign=top >
<p ><span ></span></p>
</td>
<td width=160 valign=top >
<p >N/A*</p>
</td>
<td width=160 valign=top >
<p ><span ></span></p>
</td>
</tr>
<tr>
<td width=160 valign=top >
<p ><b><span >Width</span></b></p>
</td>
<td width=160 valign=top >
<p ><span ></span></p>
</td>
<td width=160 valign=top >
<p ><span ></span></p>
</td>
<td width=160 valign=top >
<p ><span ></span></p>
</td>
</tr>
</table>
<p >* Due to the current lack of implementations, percentage
values are not defined</p>
<table Table border=0 cellspacing=0 cellpadding=0
>
<tr >
<td width=160 valign=top >
<p ><b><span >Col/ColGroup</span></b></p>
</td>
<td width=160 valign=top >
<p ><b><span >Unit value</span></b></p>
</td>
<td width=160 valign=top >
<p ><b><span >Percentage</span></b></p>
</td>
<td width=160 valign=top >
<p ><b><span >Auto</span></b></p>
</td>
</tr>
<tr>
<td width=160 valign=top >
<p ><b><span >min-width</span></b></p>
</td>
<td width=160 valign=top >
<p >Cascaded **</p>
</td>
<td width=160 valign=top >
<p >Cascaded</p>
</td>
<td width=160 valign=top >
<p >Cascaded</p>
</td>
</tr>
<tr>
<td width=160 valign=top >
<p ><b><span >max-width</span></b></p>
</td>
<td width=160 valign=top >
<p >Cascaded</p>
</td>
<td width=160 valign=top >
<p >Cascaded</p>
</td>
<td width=160 valign=top >
<p >Cascaded</p>
</td>
</tr>
<tr>
<td width=160 valign=top >
<p ><b><span >Width</span></b></p>
</td>
<td width=160 valign=top >
<p >Cascaded</p>
</td>
<td width=160 valign=top >
<p >Cascaded</p>
</td>
<td width=160 valign=top >
<p >Cascaded</p>
</td>
</tr>
</table>
<p >** A Cell value will overwrite Col value, which will overwrite
ColGroup as part of the cascade. This is an alternative proposal to the current
CSS2.1 definition</p>
<table Table border=0 cellspacing=0 cellpadding=0
>
<tr>
<td width=160 valign=top >
<p ><b><span >Table</span></b></p>
</td>
<td width=160 valign=top >
<p ><b><span >Unit value</span></b></p>
</td>
<td width=160 valign=top >
<p ><b><span >Percentage</span></b></p>
</td>
<td width=160 valign=top >
<p ><b><span >Auto</span></b></p>
</td>
</tr>
<tr>
<td width=160 valign=top >
<p ><b><span >min-width</span></b></p>
</td>
<td width=160 valign=top >
<p ><span ></span></p>
</td>
<td width=160 valign=top >
<p ><span ></span></p>
</td>
<td width=160 valign=top >
<p ><span ></span></p>
</td>
</tr>
<tr>
<td width=160 valign=top >
<p ><b><span >max-width</span></b></p>
</td>
<td width=160 valign=top >
<p ><span ></span></p>
</td>
<td width=160 valign=top >
<p ><span ></span></p>
</td>
<td width=160 valign=top >
<p ><span ></span></p>
</td>
</tr>
<tr>
<td width=160 valign=top >
<p ><b><span >Width</span></b></p>
</td>
<td width=160 valign=top >
<p ><span ></span></p>
</td>
<td width=160 valign=top >
<p ><span ></span></p>
</td>
<td width=160 valign=top >
<p ><span ></span></p>
</td>
</tr>
</table>
<p >The <b>output</b>
will be:</p>
<p class=MsoListParagraph ><span
></span><span >
</span>The tables final used width</p>
<p class=MsoListParagraph ><span
></span><span >
</span>Each columns final used width</p>
<p >&nbsp;</p>
<p >This will enable the following <b>scenarios</b>:</p>
<p class=MsoListParagraph ><span ></span><span >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</span>Table with the above specified inputs</p>
<p class=MsoListParagraph ><span ></span><span >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</span>Column-spanning scenarios, where the width on column spans can be expressed
in a unit value, auto or percentages</p>
<p class=MsoListParagraph ><span ></span><span >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</span>Simple nested table scenarios, as long as the intrinsic content width
can be determined</p>
<p >Still open issues:</p>
<div class="issue">
<p class="issue">Issue #1: <span >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>Overlapping
spans (these work but do not produce an exact result) </p>
<p class="issue">Issue #2: <span >&nbsp;&nbsp;&nbsp;&nbsp; </span>Border
width(not taken into account, as it should be an easy addition)</p>
<p class="issue">Issue #3: <span >&nbsp;&nbsp;&nbsp;&nbsp; </span>Cell
padding (in both specified unit and percent values)</p>
<p class="issue">Issue #4: <span >&nbsp;&nbsp;&nbsp;&nbsp; </span>Cellspacing
/ border-spacing</p>
</div>
<h1>&nbsp;</h1>
<p >&nbsp;</p>
<p >&nbsp;</p>
<h1>Algorithm Summary </h1>
<p >Table auto layout calculation is achieved with the following
steps. </p>
<p class=MsoListParagraph >1.<span >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</span><b>Calculate each cells minimum width, preferred width and preferred
percent</b> by examining the cells content and its width/min-with/max-width
properties.</p>
<p class=MsoListParagraph >2.<span >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</span><b>Identify the minimum width, preferred width and preferred percent of
each column</b> in the table by finding the largest minimum width, largest
preferred width and largest preferred percent among all cells in the column. In
this step, the algorithm first goes over all cells with colspan equal to one,
and then distributes the minimum width, preferred width and preferred percent
of each cell with colspan &gt; 1 among the columns it spans over. </p>
<p class=MsoListParagraph >3.<span >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</span>With each columns minimum width, preferred width<b> </b>and preferred
percent,<b> calculate the tables minimum width and preferred width</b></p>
<p class=MsoListParagraph >4.<span >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</span><b>Determine the tables final used width</b> by attempting to satisfy
each columns preferred width (or preferred percent if it has one) to the
greatest extent possible.</p>
<p class=MsoListParagraph >5.<span >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</span>Decide how to <b>distribute the tables final used width among all the
columns</b>. During this process, columns with specified percentage width are
given first priority, followed by the columns with specified unit value width.
Columns with unspecified width (or width set to auto) has the lowest
priority.</p>
<p class=MsoListParagraph >6.<span >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</span><b>Distribute any rounding errors</b> introduced during distribution in
the previous step and adjust each columns width accordingly. (This step is
currently not part of this proposal.)</p>
<p >&nbsp;</p>
<p >What follows is the proposed algorithm in finer detail.</p>
<p >We will <span >color code</span>
Terms that we will introduce for the first time.&nbsp; </p>
<span ><br
clear=all >
</span>
<p ><b><span >&nbsp;</span></b></p>
<h1 ><span >1.</span><span
>&nbsp;
</span>Calculate each cells minimum and preferred width </h1>
<p >This step calculates table width
limitation and preference at the cell level. These values are computed for each
cell based on its intrinsic minimum and preferred widths and its specified
width, min-width and max-width (if any). </p>
<p class=MsoListParagraph ><b>1.1</b><b><span
>&nbsp;&nbsp;
</span>Cell Intrinsic Min width (cellIntrinsicMinWidth) and Cell Intrinsic
Preferred Width (<span >cellIntrinsicPreferredWidth</span>)</b></p>
<p class=MsoListParagraph >cellIntrinsicMinWidth and cellIntrinsicPreferedWidth
should be calculated based on the regular CSS2.1 shrink to fit block model
calculations (see sections 10.3.5 and 10.3.7 for further details).</p>
<p class=MsoListParagraph ><b>1.2</b><b><span
>&nbsp;&nbsp;
</span>Cell Min Width (cellMinWidth)</b></p>
<p class=MsoListParagraph ><b>cellMinWidth = max(cellIntrinsicMinWidth,
cellSpecifiedMinWidth )</b></p>
<p class=MsoListParagraph >. . . where cellSpecifiedMinWidth is a cells specified
unit-value min-width.</p>
<p class=MsoListParagraph >Each cells minimum width sets the lower limit for that
cell. (A cell can never be narrower than its minimum width.) </p>
<p class=MsoListParagraph ><i>This is a design decision drawn from a backwards
compatibility / interoperability analysis. It could be argued that display:
table-cell does have an overflow property and that it is thus not necessary to
always honor minimum width. The algorithm here, however, suggests ignoring
overflow property on table cell in auto layout table and respect minimum width
for best backward compatibility and readability. This of course, is open for
discussion.</i></p>
<p class=MsoListParagraph >The cells minimum width is calculated before the cells
preferred width, so that the minimum width can set a lower limit for the
preferred width.</p>
<p class=MsoListParagraph ><b>1.3</b><b><span
>&nbsp;&nbsp;
</span>Cell Preferred Width (<span >cellPreferredWidth</span>)</b></p>
<p class=MsoListParagraph >When a cell has specified unit value width, its
preferred width is:</p>
<p class=MsoListParagraph ><b>cellPreferredWidth = max(cellMinWidth,
min(cellSpecifiedMaxWidth, cellSpecifiedWidth ))</b></p>
<p class=MsoListParagraph >When a cell has no specified unit value width, its
preferred width is:</p>
<p class=MsoListParagraph ><b>cellPreferredWidth = max(cellMinWidth,
min(cellSpecifiedMaxWidth, cellIntrinsicPreferredWidth ))</b></p>
<p class=MsoListParagraph >&nbsp;. . . where cellSpecifiedMaxWidth is a cells
specified unit value max-width and cellSpecifiedWidth is a cells specified
unit value width. </p>
<p >Each cells preferred width is
the width the algorithm tries its best to satisfy. The preferred width is not
an upper limit of the cell because other cells in the same column and the
tables overall preferred width could cause the cell to be assigned a width
exceeding this value.</p>
<p class=MsoListParagraph ><b>1.4</b><b><span
>&nbsp;&nbsp;
</span>Cell Preferred Percent (<span >cellPreferredPercent</span>)</b></p>
<p ><b>cellPreferredPercent =
cellSpecifiedWidth in percent</b></p>
<p >. . .where cellPreferredPercent
is only defined when the cell has specified width in percent. </p>
<p ><b>Issues</b></p>
<div >
<p class=issue >Issue #5: <span
>&nbsp;&nbsp;&nbsp;&nbsp;
</span><i>&nbsp;&nbsp;Specified percentage min-width and max-width are not
taken into consideration here. Their impact on the algorithm will be defined in
a future version of the document. Step 1.3 presents itself as a good place to
add in their impact</i></p>
<p class=issue >Issue #6: <span
>&nbsp;&nbsp;&nbsp;&nbsp;
</span><i>At the current stage, the algorithm hasnt considered any padding,
borders or border-spacing. These things will impact the calculation of
cellMinWidth / cellMaxWidth according to the CSS box model and can be added in
a future version of this document</i></p>
</div>
<p > 7E4C <i>&nbsp;</i></p>
<h1 >2<span >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>Identify
the minimum width, preferred width and preferred<sup> </sup>percent of each
column </h1>
<p >In this step, the algorithm collects
the width limitation and preference on a cell level and aggregates them up to
the column level. The goal of this step is to identify the minimum width,
preferred width and preferred percent of each column. </p>
<p >The algorithm first calculates
columnMinWidth, columnPreferredWidth, columnPreferredPercent based solely on
cells with colspan ==1. It then adjusts these three values with the minimum,
preferred width and preferred percent of colspan &gt; 1 cells.</p>
<p class=MsoListParagraph ><b>2.1</b><b><span
>&nbsp;&nbsp;
</span>Calculate columnMinWidth, columnPreferredWidth, columnPreferredPercent
based on colspan == 1 cells</b></p>
<p class=MsoListParagraph ><b>2.1.1</b><b><span
>
</span>Column Mininum Width (<span >columnMinWidth</span>)</b></p>
<p class=MsoListParagraph ><b>columnMinWidth = max (cellMinWidth </b>of all
colspan == 1 cells in the column<b>)</b></p>
<p >The columns minimum width sets the lower limit on columns
used width. The column can never be smaller than its minimum width, in order to
prevent overflow of the text into neighboring cells. This is a design decision
to enable better readability. </p>
<p class=MsoListParagraph ><b>2.1.2</b><b><span
>
</span>Column Preferred Width (<span >columnPreferredWidth</span>)</b></p>
<p class=MsoListParagraph ><b>columnPreferredWidth = max
(cellPreferredWidth </b>of all colspan ==1 cells in the column<b>)</b></p>
<p >The columns preferred width defines the
width which the algorithm tries to honor.</p>
<p class=MsoListParagraph ><b>2.1.3</b><b><span >
</span>Column Preferred Percent (<span >columnPreferredPercent</span>)</b></p>
<p class=MsoListParagraph >Only columns with at least one cell with specified
width in percent will have a columnPreferredPercent value It is found by taking
the largest specified percent cell width:</p>
<p class=MsoListParagraph ><b>columnPreferredPercent = max (cellPreferredPercent </b>of
all colspan == 1cells in the column<b>)</b></p>
<p >To better understand the behavior, the algorithm defines
three types of columns:</p>
<p class=MsoListParagraph ><b>a.</b><b><span
>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</span>auto column</b>: all cells in the column have either&nbsp; width: auto
or no specified width</p>
<p >b.<span
>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</span><b>specified unit value column:</b> at least one cell in the column has
a specified width in unit value and no cell has specified width in percent.
(Specified width can be cascaded or inline.)</p>
<p >c.<span
>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</span><b>specified percent column:</b> at least one cell in the column has a
specified width in percent</p>
<p class=MsoListParagraph >A specified percentage cell has a higher priority than
a specified unit value cell. For instance, one specified percentage width cell
will make the column a specified percent column even if all the other cells
have specified unit value width. </p>
<p class=MsoListParagraph ><i>Only non-negative percentage values are taken into
consideration. It may happen that the percentage value exceeds 100%, or the sum
of all columns specified percentage value exceeds 100%. Cases like these will
be handled in step 5, when columns are assigned their final used widths.</i></p>
<p class=MsoListParagraph ><b>2.2</b><b><span
>&nbsp;&nbsp;
</span>adjust columnMinWidth, columnPreferredWidth, columnPreferredPercent</b></p>
<p class=MsoListParagraph >The proposed algorithm handles cell with colspan &gt;
1 one by one without any optimization for overlapping colspan scenarios. An
optimized algorithm will be proposed in a future version of this document.</p>
<p >The algorithm first checks to see if any cells spanning
multiple columns will affect the minimum width, preferred width, or preferred
percent widths of the columns they span. If such is the case, theses widths of
the multi-column cell are distributed among the corresponding width values of
each of the columns it spans. There are several ways how this can be done, but
the method outlined in this spec was chosen based on browser interoperability.</p>
<p >&nbsp;In general, the algorithm will distribute the impact
evenly or proportionally with either (1) each columns preferred width, (2) the
difference between each columns preferred width and minimum width (i.e.,
preferred width&nbsp; min width), or (3) each columns minimum width,
depending on the case. When the algorithm distributes the impact of a
multi-column cell, the columns minimum and preferred widths are the sole
contributors to the distributionits specified width is not directly figured
in.&nbsp; This is because the impact of a multi-column cells specified unit
value width has already been calculated into its columns preferred width. The
impact of a multi-column cells specified percentage width will be distributed
proportionally to each non-percentage column that is spanned by the
multi-column cell.</p>
<p >When calculating the impact of the multi-column cell on the
columns, the algorithm adjusts the columns minimum width first, preferred
width second and preferred percent last.<b> </b>This follows the guidelines for
min/max width calculations of CSS2.1 (section 10.4). This enables the preferred
width to be restricted by the minimum width. The distribution of a multi-column
cells preferred percentage width will now depend on the newly adjusted minimum
and preferred widths of its columns. </p>
<p ><b><i>Issues</i></b></p>
<div >
<p class=issue >Issue #7: <span
>&nbsp;&nbsp;&nbsp;&nbsp;
</span><i>&nbsp;&nbsp;As mentioned above, the algorithm hasnt considered any
padding, borders or border-spacing. These inputs will impact the calculation of
columnMinWidth, columnPreferredWidth and columnSpecifiedWidth according to CSS
box model, and can be added in future version of this document</i></p>
</div>
<p ><b><i>&nbsp;</i></b></p>
<h1 >3.<span >&nbsp;&nbsp;&nbsp;&nbsp; </span>Calculate
tableMinWidth/tablePreferredWidth</h1>
<p >This step calculates the tables
minimum and preferred widths.</p>
<p class=MsoListParagraph ><b>3.1</b><b><span
>&nbsp;&nbsp;
</span>Table Minimum Width (<span >tableMinWidth</span>)</b></p>
<p ><b>tableMinWidth =
sum(columnMinWidth)</b></p>
<p class=MsoListParagraph ><b>3.2</b><b><span
>&nbsp;&nbsp;
</span>Table Preferred Width (<span >tablePreferredWidth</span>)</b></p>
<p ><i>As the following steps demonstrate,
tablePreferredWidth is only used in the absence of a table specified width,
when the table is sized according to the shrink-to-fit equation. The
calculation of tablePreferredWidth could therefore be ignored in some cases to
optimize performance.</i></p>
<p >There are three cases to address
when calculating tablePreferredWidth:</p>
<p class=MsoListParagraph ><b>a.</b><b><span
>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</span>When there is no specified percent columns,</b></p>
<p class=MsoListParagraph >The preferred table width is simply
the sum of columnPreferredWidths.</p>
<p class=MsoListParagraph ><b>tablePreferredWidth =
sum(columnPreferredWidth)</b></p>
<p class=MsoListParagraph ><b>b.</b><b><span
>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</span>When there is at least one specified percent column,</b></p>
<p class=MsoListParagraph >When there are specified percent
columns, the algorithm uses the largest column
columnPreferredWidth-to-columnPreferredPercent ratio to determine the table
width preferred by the percent columns: </p>
<p class=MsoListParagraph ><b>percentColumnPreferredTableWidth =
max (columnPreferredWidth/columnPreferredPercent). </b></p>
<p class=MsoListParagraph >Next the algorithm pretends that
the non-percent columns (i.e., the auto and specified unit value columns) were
just one big percent column with a preferred percentage equal to (100% -
percentColumnTotalSpecifiedPercent), and uses that value to find the ratio of
columnPreferredWidth-to-columnPreferredPercent, which represents the table
preferred width of the non-percent columns:</p>
<p class=MsoListParagraph ><b>NonPercentColumnPreferredTableWidth
= nonPercentColumnTotalPreferredWidth / (100% -
percentColumnTotalPreferredPercent)</b></p>
<p class=MsoListParagraph >The final tablePreferredWidth is the
larger one of the two values above</p>
<p class=MsoListParagraph ><b>tablePreferredWidth = max
(percentColumnPreferredTableWidth, nonPercentColumnPreferredTableWidth)</b></p>
<p >When the sum
of preferred percentages exceeds 100%, the algorithm recommends that the
browser ignore all specified percentages coming after the sum reaches 100% and
regard them as having 0% specified percent width (though this doesnt
necessarily prevent them from being rendered).</p>
<p >When there
are only specified percent columns and the sum of the percent is smaller than
100%, step 5 will provide a solution to distribute extra table used width.</p>
<p class=MsoListParagraph ><b>c.</b><b><span
>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</span>When percent columns are demanding the full table width (100%) and there
are also non-percent columns</b></p>
<p class=MsoListParagraph >Because the algorithm does not allow
the sum of specified percentages to be larger than 100%, a special case might
arise where the percent columns are demanding the full table width (100%) but
there are also non-percent columns which require at least their minimum<span
> </span>width. In this case, the tables preferred
width could never be satisfied. The algorithm treats tables preferred width as
infinitely large</p>
<p class=MsoListParagraph ><b>tablePreferredWidth = INFINITE</b></p>
<p ><b>Issue:</b></p>
<div >
<p class=issue >Issue #8: <span >&nbsp;&nbsp;&nbsp;&nbsp; </span><i>Again
in this step, the CSS padding, margin, border and border-spacing
properties and HTML cellpadding and cellspacing attributes will all have an
impact on the calculations, and need to be detailed in a future version of this
document</i></p>
</div>
<h1 >4.<span >&nbsp;&nbsp;&nbsp;&nbsp; </span>Determine
the tables final used width (<span >tableUsedWidth</span>)</h1>
<p >This step must differentiate two
cases: (1) when the table has a specified width, and (2) when the table is
auto-sized. </p>
<p class=MsoListParagraph ><b>4.1</b><b><span
>&nbsp;&nbsp; </span>When
the table has a specified width</b></p>
<p class=MsoListParagraph >In this case, the tables specified
width is taken as its used width, unless that width is smaller than the tables
minimum width, in which case its minimum width becomes the tables final used
width. If the table has a specified width in percentage, the algorithm converts
this to a unit value based on the tables available width.</p>
< 470F /div>
<p class=MsoListParagraph ><b>tableUsedWidth = max
(tableMinWidth, tableSpecifiedWidth)<a name="_ftnref2"></a><a href="#_ftn2"
title=""><span class=MsoFootnoteReference>[2]</span></a></b></p>
<p class=MsoListParagraph ><b>4.2</b><b><span
>&nbsp;&nbsp; </span>when
the table has auto (non-specified) width</b></p>
<p class=MsoListParagraph >In this case, the algorithm uses the
shrink-to-fit rule (using the tableminWidth and tablePreferredWidth values
found in step 3) to determine the tables used width:</p>
<p ><b>tableUsedWidth
= min(max(tableMinWidth, tableAvailableWidth), tablePreferredWidth)<a
name="_ftnref3"></a><a href="#_ftn3" title=""><span class=MsoFootnoteReference>[3]</span></a></b></p>
<p >. . . where tableAvailableWidth
is the width of the tables containing block.</p>
<p class=MsoListParagraph ><b>4.3</b><b><span
>&nbsp;&nbsp; </span>Adjust
tableUsedWidth against specified min-width/max-width</b></p>
View remainder of file in raw view