[css-display] Add a table summarizing the 'display' values, so it's easier to understand for mortals.

Author: fantasai

css-display/Overview.bs

@@ -113,8 +113,8 @@ Box Layout Modes: the 'display' property</h2>
 	Media: all
 	</pre>
 
-	The 'display' property defines two basic qualities
-	of how an element generates boxes:
+	The 'display' property defines box's <dfn>display type</dfn>,
+	which consists of the two basic qualities of how an element generates boxes:
 
 	* the <dfn export local-lt="inner">inner display type</dfn>,
 		which defines the kind of <a>formatting context</a> it generates,
@@ -142,6 +142,119 @@ Box Layout Modes: the 'display' property</h2>
 	                     inline-table | inline-flex | inline-grid ;
 	</pre>
 
+	The following informative table summarizes the values of 'display':
+
+	<table class='data'>
+		<style scoped>
+			td, th { text-align: left; }
+		</style>
+		<thead>
+			<tr>
+				<th>Short 'display'
+				<th>Full 'display'
+				<th>Generated box
+		<tbody title="Box Suppression Display Types">
+			<tr>
+				<td>''none''
+				<td>&#x3003;
+				<td>subtree omitted from <a>box tree</a>
+			<tr>
+				<td>''contents''
+				<td>&#x3003;
+				<td>element replaced by contents in <a>box tree</a>
+		<tbody title="Flow Layout Display Types">
+			<tr>
+				<td>''block''
+				<td>''block flow''
+				<td><a>block-level</a> <a>block container</a>
+				    <abbr title="also known as">aka</abbr> <a>block box</a>
+			<tr>
+				<td>''flow-root''
+				<td>''block flow-root''
+				<td><a>block-level</a> <a>block container</a>
+				    that establishes a new <a>block formatting context</a> (<a>BFC</a>)
+			<tr>
+				<td>''inline''
+				<td>''inline flow''
+				<td><a>inline box</a>
+			<tr>
+				<td>''inline-block''
+				<td>''inline flow-root''
+				<td><a>inline-level</a> <a>block container</a>
+			<tr>
+				<td>''run-in''
+				<td>''run-in flow''
+				<td><a>run-in box</a> (<a>inline box</a> with special box-tree-munging rules)
+			<tr>
+				<td>''list-item''
+				<td>''list-item block flow''
+				<td><a>block box</a>
+				    with additional <a href="http://www.w3.org/TR/CSS21/generate.html#lists">marker box</a>
+			<tr>
+				<td>''inline list-item''
+				<td>''list-item inline flow''
+				<td><a>inline box</a>
+				    with additional <a href="http://www.w3.org/TR/CSS21/generate.html#lists">marker box</a>
+		<tbody title="Formatting Context Root Display Types">
+			<tr>
+				<td>''flex''
+				<td>''block flex''
+				<td><a>block-level</a> <a>flex container</a>
+			<tr>
+				<td>''inline-flex''
+				<td>''inline flex''
+				<td><a>inline-level</a> <a>flex container</a>
+			<tr>
+				<td>''grid''
+				<td>''block grid''
+				<td><a>block-level</a> <a>grid container</a>
+			<tr>
+				<td>''inline-grid''
+				<td>''inline grid''
+				<td><a>inline-level</a> <a>grid container</a>
+			<tr>
+				<td>''ruby''
+				<td>''inline ruby''
+				<td><a>inline-level</a> <a>ruby container</a>
+			<tr>
+				<td>''block ruby''
+				<td>''block ruby''
+				<td><a>block box</a> containing <a>ruby container</a>
+			<tr>
+				<td>''table''
+				<td>''block table''
+				<td><a>block-level</a> <i>table wrapper box</i> containing <i>table box</i>
+			<tr>
+				<td>''inline-table''
+				<td>''inline table''
+				<td><a>inline-level</a> <i>table wrapper box</i> containing <i>table box</i>
+		<tbody title="Layout-internal display types">
+			<tr>
+				<td>''table-cell''
+				<td>''table-cell flow''
+				<td>table cell <a>block container</a>
+			<tr>
+				<td>''table-caption''
+				<td>''table-caption flow''
+				<td>table cell <a>block container</a>
+			<tr>
+				<td>''ruby-base''
+				<td>''ruby-base flow''
+				<td><a href="#layout-specific-display">layout-specific internal box</a>
+			<tr>
+				<td>''ruby-text''
+				<td>''ruby-text flow''
+				<td><a href="#layout-specific-display">layout-specific internal box</a>
+			<tr>
+				<td>other <<display-internal>>
+				<td>&#x3003;
+				<td><a href="#layout-specific-display">layout-specific internal box</a>
+	</table>
+
+	Note: Following the precedence rules of “most backwards-compatible, then shortest”,
+	serialization of equivalent 'display' values uses the “Short 'display'” column.
+	[[CSSOM]]
+
 <h3 id="outer-role">
 Outer Display Roles for Flow Layout: the ''block'', ''inline'', and ''run-in'' keywords</h3>
 
@@ -637,6 +750,13 @@ Appendix A: Glossary</h2>
 		<dd>
 			Block and inline formatting contexts are defined in
 			<a href="http://www.w3.org/TR/CSS21/visuren.html#normal-flow">CSS 2.1 Section 9.4</a>.
+
+		<dt><dfn>BFC</dfn>
+		<dd>
+			Informal abbreviation for <a>block formatting context</a>.
+			Often used to refer to a <a>block formatting context</a> <em>root</em>,
+			that is, a <a>block box</a> that establishes a new <a>block formatting context</a>
+			for its contents.
 	</dl>
 
 	See [[!CSS21]] <a href="http://www.w3.org/TR/CSS21/visuren.html">Chapter 9</a> for a fuller definition of these terms.