8000 [css-tables] Added alignment examples · w3c/csswg-drafts@6a18bf9 · GitHub
Skip to content

Commit 6a18bf9

Browse files
FremyCompanyFremyCompany
committed
[css-tables] Added alignment examples
1 parent 2ae5e47 commit 6a18bf9

3 files changed

Lines changed: 41 additions & 9 deletions

File tree

‎css-tables-3/Overview.bs‎

Lines changed: 41 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2145,7 +2145,7 @@ spec:css21; type:property; text:max-width
21452145
an hypothetical linebox containing the cells originating in the row
21462146
and where cells spanning multiple rows are considered having a height of 0px
21472147
(but their correct baseline).
2148-
In this hypothetical linebox, cells heights are considered auto,
2148+
In this hypothetical linebox, cell heights are considered auto,
21492149
but their other properties are conserved.
21502150

21512151
<p>
@@ -2162,6 +2162,32 @@ spec:css21; type:property; text:max-width
21622162
If there is no such line box or table-row,
21632163
the baseline is the bottom of content edge of the cell box.
21642164

2165+
<div class="example">
2166+
<p>
2167+
Here is how this works out in practice:
2168+
2169+
<pre>
2170+
td { vertical-align: baseline; outline: 3px solid silver; }
2171+
img { float: left; clear: left; width: 32px; height: 32px; }
2172+
img[title] { float: none; }
2173+
2174+
&lt;table>&lt;tr>
2175+
&lt;td>Baseline&lt;/td>
2176+
&lt;td>Baseline&lt;table>&lt;tr>&lt;td>After&lt;/td>&lt;/tr>&lt;/table>&lt;/td>
2177+
&lt;td>&lt;table>&lt;tr>&lt;td>Baseline&lt;/td>&lt;/tr>&lt;/table>After&lt;/td>
2178+
&lt;td>&lt;table align=right>&lt;tr>&lt;td>Before&lt;/td>&lt;/tr>&lt;/table>&lt;p>Baseline&lt;/p>&lt;/td>
2179+
&lt;td>&lt;img src="http://w3.org/favicon.ico" />&lt;p>Baseline&lt;/p>&lt;/td>
2180+
&lt;td>&lt;img src="http://w3.org/favicon.ico" title="Baseline"/>&lt;br/>&lt;img src="http://w3.org/favicon.ico" title="After"/>&lt;/td>
2181+
&lt;td>&lt;img src="http://w3.org/favicon.ico" />&lt;img src="http://w3.org/favicon.ico" />&lt;!--Baseline-->&lt;/td>
2182+
&lt;/tr>&lt;/table>
2183+
</pre>
2184+
2185+
<figure>
2186+
<img src="images/td-baseline-example-rendering.png" width="585" height="185" />
2187+
<figcaption>Rendering of <a href="https://jsfiddle.net/x8sh0f60/3/">this example</a> in a compliant browser</figcaption>
2188+
</figure>
2189+
</div>
2190+
21652191
<p class="advisement">
21662192
For the purposes of finding a baseline,
21672193
in-flow boxes with a scrolling mechanisms (see the 'overflow' property)
@@ -2220,13 +2246,7 @@ spec:css21; type:property; text:max-width
22202246
is used to set the baseline of the row.
22212247
If a row has no cell box aligned to its baseline,
22222248
the baseline of that row is the bottom content edge of the lowest cell in the row.
2223-
2224-
<div class="example">
2225-
<span class="issue">TODO</span><span class="hint">Example of vertically aligning the cells</span>
2226-
Diagram showing the effect of various values of 'vertical-align' on table cells.
2227-
Cell boxes 1 and 2 are aligned at their baselines. Cell box 2 has the largest height above the baseline, so that determines the baseline of the row.
2228-
</div>
2229-
2249+
22302250
<div class="advisement">
22312251
<p>
22322252
To avoid ambiguous situations,
@@ -2237,13 +2257,25 @@ spec:css21; type:property; text:max-width
22372257
<li>Next the cells with 'vertical-align: top' are positioned.
22382258
The row now has a top, possibly a baseline, and a provisional height,
22392259
which is the distance from the top to the lowest bottom of the cells positioned so far.
2240-
<li>If the row has an assigned height at the beginning of the algorithm
22412260
<li>If any of the remaining cells, those aligned at the bottom or the middle,
22422261
have a height that is larger than the current height of the row,
22432262
the height of the row will be increased to the maximum of those cells,
22442263
by lowering the bottom.
22452264
<li>Finally, assign their position to the remaining cells.
22462265
</div>
2266+
2267+
<div class="example">
2268+
<p>
2269+
Example showing how the previous algorithm creates the various alignment lines of a row.
2270+
2271+
<figure>
2272+
<a href="http://www.w3.org/TR/CSS2/images/longdesc/cell-align-desc.html"><img src="images/cell-align-explainer.png" width="375" height="241"></a>
2273+
<figcaption>
2274+
Diagram showing the effect of various values of 'vertical-align' on table cells.
2275+
Cell boxes 1 and 2 are aligned at their baselines. Cell box 2 has the largest height above the baseline, so that determines the baseline of the row.
2276+
</figcaption>
2277+
</figure>
2278+
</div>
22472279

22482280
<p>
22492281
Since cells that were spanning more than one rows have not been sized correctly during row layout,

‎css-tables-3/images/cell-align-explainer.png‎

19.5 KB
Loading

‎css-tables-3/images/td-baseline-example-rendering.png‎

24.9 KB
Loading

0 commit comments

Comments
 (0)