Cleanup formatting of legacy key value tables.
authorGary Kacmarcik <garykac@google.com>
Mon, 19 Aug 2013 13:32:45 -0700
changeset 462 04ddf321b43c
parent 461 e9ad06720cda
child 463 1b4e14ed10f6
Cleanup formatting of legacy key value tables.
html/DOM3-Events.html
html/override.css
--- a/html/DOM3-Events.html	Mon Aug 19 13:04:52 2013 -0700
+++ b/html/DOM3-Events.html	Mon Aug 19 13:32:45 2013 -0700
@@ -6794,83 +6794,30 @@
 
 				<p>The virtual key codes for the following keys do not usually change with keyboard layouts on desktop systems:</p>
 
-				<table class="data-table">
-					<tr>
-						<th><strong>Key</strong></th>
-						<th><strong>Virtual Key Code</strong></th>
-					</tr>
-					<tr>
-						<th><code class="key">'Backspace'</code></th>
-						<td>8</td>
-					</tr>
-					<tr>
-						<th><code class="key">'Tab'</code></th>
-						<td>9</td>
-					</tr>
-					<tr>
-						<th><code class="key">'Enter'</code></th>
-						<td>13</td>
-					</tr>
-					<tr>
-						<th><code class="key">'Shift'</code></th>
-						<td>16</td>
-					</tr>
-					<tr>
-						<th><code class="key">'Control'</code></th>
-						<td>17</td>
-					</tr>
-					<tr>
-						<th><code class="key">'Alt'</code></th>
-						<td>18</td>
-					</tr>
-					<tr>
-						<th><code class="key">'CapsLock'</code></th>
-						<td>20</td>
-					</tr>
-					<tr>
-						<th><code class="key">'Esc'</code> (Escape)</th>
-						<td>27</td>
-					</tr>
+				<table class="legacy-key-table">
 					<tr>
-						<th><code class="key">'Spacebar'</code> (Space)</th>
-						<td>32</td>
-					</tr>
-					<tr>
-						<th><code class="key">'PageUp'</code></th>
-						<td>33</td>
-					</tr>
-					<tr>
-						<th><code class="key">'PageDown'</code></th>
-						<td>34</td>
-					</tr>
-					<tr>
-						<th><code class="key">'End'</code></th>
-						<td>35</td>
-					</tr>
-					<tr>
-						<th><code class="key">'Home'</code></th>
-						<td>36</td>
+						<th>Key</th>
+						<th class="cell-center">Virtual Key</br/>Code</th>
+						<th>Notes</th>
 					</tr>
-					<tr>
-						<th><code class="key">'Left'</code></th>
-						<td>37</td>
-					</tr>
-					<tr>
-						<th><code class="key">'Up'</code></th>
-						<td>38</td>
-					</tr>
-					<tr>
-						<th><code class="key">'Right'</code></th>
-						<td>39</td>
-					</tr>
-					<tr>
-						<th><code class="key">'Down'</code></th>
-						<td>40</td>
-					</tr>
-					<tr>
-						<th><code class="key">'Del'</code> (Delete)</th>
-						<td>46</td>
-					</tr>
+					<tr><td><code class="key">'Backspace'</code></td>		<td class="cell-center">8</td>		<td></td>	</tr>
+					<tr><td><code class="key">'Tab'</code></td>				<td class="cell-center">9</td>		<td></td>	</tr>
+					<tr><td><code class="key">'Enter'</code></td>			<td class="cell-center">13</td>		<td></td>	</tr>
+					<tr><td><code class="key">'Shift'</code></td>			<td class="cell-center">16</td>		<td></td>	</tr>
+					<tr><td><code class="key">'Control'</code></td>			<td class="cell-center">17</td>		<td></td>	</tr>
+					<tr><td><code class="key">'Alt'</code></td>				<td class="cell-center">18</td>		<td></td>	</tr>
+					<tr><td><code class="key">'CapsLock'</code></td>		<td class="cell-center">20</td>		<td></td>	</tr>
+					<tr><td><code class="key">'Esc'</code></td>				<td class="cell-center">27</td>		<td><em>Escape</em></td>	</tr>
+					<tr><td><code class="key">'Spacebar'</code></td>		<td class="cell-center">32</td>		<td><em>Space</em></td>	</tr>
+					<tr><td><code class="key">'PageUp'</code></td>			<td class="cell-center">33</td>		<td></td>	</tr>
+					<tr><td><code class="key">'PageDown'</code></td>		<td class="cell-center">34</td>		<td></td>	</tr>
+					<tr><td><code class="key">'End'</code></td>				<td class="cell-center">35</td>		<td></td>	</tr>
+					<tr><td><code class="key">'Home'</code></td>			<td class="cell-center">36</td>		<td></td>	</tr>
+					<tr><td><code class="key">'Left'</code></td>			<td class="cell-center">37</td>		<td></td>	</tr>
+					<tr><td><code class="key">'Up'</code></td>				<td class="cell-center">38</td>		<td></td>	</tr>
+					<tr><td><code class="key">'Right'</code></td>			<td class="cell-center">39</td>		<td></td>	</tr>
+					<tr><td><code class="key">'Down'</code></td>			<td class="cell-center">40</td>		<td></td>	</tr>
+					<tr><td><code class="key">'Del'</code></td>				<td class="cell-center">46</td>		<td><em>Delete</em></td>	</tr>
 				</table>
 			</section>
 
@@ -6880,99 +6827,34 @@
 				<p>The following punctuation characters MAY change virtual codes between keyboard layouts, but reporting these values will likely be more compatible with legacy content
 					expecting US-English keyboard layout:</p>
 
-				<table class="data-table">
-					<tr>
-						<th><strong>Key</strong></th>
-						<th><strong>Virtual Key Code</strong></th>
-					</tr>
-					<tr>
-						<th>Semicolon (<code class="glyph">';'</code>)</th>
-						<td>186</td>
-					</tr>
-					<tr>
-						<th>Colon (<code class="glyph">':'</code>)</th>
-						<td>186</td>
-					</tr>
-					<tr>
-						<th>Plus (<code class="glyph">'+'</code>)</th>
-						<td>187</td>
-					</tr>
-					<tr>
-						<th>Equals sign (<code class="glyph">'='</code>)</th>
-						<td>187</td>
-					</tr>
-					<tr>
-						<th>Comma (<code class="glyph">','</code>)</th>
-						<td>188</td>
-					</tr>
-					<tr>
-						<th>Less than sign (<code class="glyph">'&lt;'</code>)</th>
-						<td>188</td>
-					</tr>
-					<tr>
-						<th>Minus (<code class="glyph">'-'</code>)</th>
-						<td>189</td>
-					</tr>
-					<tr>
-						<th>Underscore (<code class="glyph">'_'</code>)</th>
-						<td>189</td>
-					</tr>
-					<tr>
-						<th>Period (<code class="glyph">'.'</code>)</th>
-						<td>190</td>
-					</tr>
-					<tr>
-						<th>Greater than sign (<code class="glyph">'&gt;'</code>)</th>
-						<td>190</td>
-					</tr>
+				<table class="legacy-key-table">
 					<tr>
-						<th>Question mark (<code class="glyph">'?'</code>)</th>
-						<td>191</td>
-					</tr>
-					<tr>
-						<th>Forward slash (<code class="glyph">'/'</code>)</th>
-						<td>191</td>
-					</tr>
-					<tr>
-						<th>Backtick (<code class="glyph">'`'</code>)</th>
-						<td>192</td>
-					</tr>
-					<tr>
-						<th>Tilde (<code class="glyph">'~'</code>)</th>
-						<td>192</td>
-					</tr>
-					<tr>
-						<th>Opening square bracket (<code class="glyph">'['</code>)</th>
-						<td>219</td>
-					</tr>
-					<tr>
-						<th>Opening curly bracket (<code class="glyph">'{'</code>)</th>
-						<td>219</td>
+						<th>Key</th>
+						<th class="cell-center">Character</th>
+						<th class="cell-center">Virtual Key</br/>Code</th>
 					</tr>
-					<tr>
-						<th>Backslash (<code class="glyph">'\'</code>)</th>
-						<td>220</td>
-					</tr>
-					<tr>
-						<th>Pipe (<code class="glyph">'|'</code>)</th>
-						<td>220</td>
-					</tr>
-					<tr>
-						<th>Closing square bracket (<code class="glyph">']'</code>)</th>
-						<td>221</td>
-					</tr>
-					<tr>
-						<th>Closing curly bracket (<code class="glyph">'}'</code>)</th>
-						<td>221</td>
-					</tr>
-					<tr>
-						<th>Single quote (<code class="glyph">'''</code>)</th>
-						<td>222</td>
-					</tr>
-					<tr>
-						<th>Double quote (<code class="glyph">'"'</code>)</th>
-						<td>222</td>
-					</tr>
+					<tr><td>Semicolon</td>				<td class="cell-center"><code class="glyph">';'</code></td>		<td class="cell-center">186</td>	</tr>
+					<tr><td>Colon</td>					<td class="cell-center"><code class="glyph">':'</code></td>		<td class="cell-center">186</td>	</tr>
+					<tr><td>Equals sign</td>			<td class="cell-center"><code class="glyph">'='</code></td>		<td class="cell-center">187</td>	</tr>
+					<tr><td>Plus</td>					<td class="cell-center"><code class="glyph">'+'</code></td>		<td class="cell-center">187</td>	</tr>
+					<tr><td>Comma</td>					<td class="cell-center"><code class="glyph">','</code></td>		<td class="cell-center">188</td>	</tr>
+					<tr><td>Less than sign</td>			<td class="cell-center"><code class="glyph">'&lt;'</code></td>	<td class="cell-center">188</td>	</tr>
+					<tr><td>Minus</td>					<td class="cell-center"><code class="glyph">'-'</code></td>		<td class="cell-center">189</td>	</tr>
+					<tr><td>Underscore</td>				<td class="cell-center"><code class="glyph">'_'</code></td>		<td class="cell-center">189</td>	</tr>
+					<tr><td>Period</td>					<td class="cell-center"><code class="glyph">'.'</code></td>		<td class="cell-center">190</td>	</tr>
+					<tr><td>Greater than sign</td>		<td class="cell-center"><code class="glyph">'>'</code></td>		<td class="cell-center">190</td>	</tr>
+					<tr><td>Forward slash</td>			<td class="cell-center"><code class="glyph">'/'</code></td>		<td class="cell-center">191</td>	</tr>
+					<tr><td>Question mark</td>			<td class="cell-center"><code class="glyph">'?'</code></td>		<td class="cell-center">191</td>	</tr>
+					<tr><td>Backtick</td>				<td class="cell-center"><code class="glyph">'`'</code></td>		<td class="cell-center">192</td>	</tr>
+					<tr><td>Tilde</td>					<td class="cell-center"><code class="glyph">'~'</code></td>		<td class="cell-center">192</td>	</tr>
+					<tr><td>Opening square bracket</td>	<td class="cell-center"><code class="glyph">'['</code></td>		<td class="cell-center">219</td>	</tr>
+					<tr><td>Opening curly brace</td>	<td class="cell-center"><code class="glyph">'{'</code></td>		<td class="cell-center">219</td>	</tr>
+					<tr><td>Backslash</td>				<td class="cell-center"><code class="glyph">'\'</code></td>		<td class="cell-center">220</td>	</tr>
+					<tr><td>Pipe</td>					<td class="cell-center"><code class="glyph">'|'</code></td>		<td class="cell-center">220</td>	</tr>
+					<tr><td>Closing square bracket</td>	<td class="cell-center"><code class="glyph">']'</code></td>		<td class="cell-center">221</td>	</tr>
+					<tr><td>Closing curly brace</td>	<td class="cell-center"><code class="glyph">'}'</code></td>		<td class="cell-center">221</td>	</tr>
+					<tr><td>Single quote</td>			<td class="cell-center"><code class="glyph">'''</code></td>		<td class="cell-center">222</td>	</tr>
+					<tr><td>Double quote</td>			<td class="cell-center"><code class="glyph">'"'</code></td>		<td class="cell-center">222</td>	</tr>
 				</table>
 			</section>
 		</section>
--- a/html/override.css	Mon Aug 19 13:04:52 2013 -0700
+++ b/html/override.css	Mon Aug 19 13:32:45 2013 -0700
@@ -169,6 +169,26 @@
   color:#333399;
 }
 
+/* Formatting for the legacy key tables in the Appendix.
+ */
+.legacy-key-table th {
+	background:none repeat scroll 0 0 #E8EDFF;
+	color:#003399;
+	font-weight:normal;
+	padding: 0.25em 0.5em 0.25em 0.5em;
+}
+
+.legacy-key-table td {
+	background:none repeat scroll 0 0 #ffffff;
+	color:#666699;
+	padding: 0 0.5em 0 0.5em;
+}
+
+.legacy-key-table tr:hover td {
+  background:none repeat scroll 0 0 #E8EDFF;
+  color:#333399;
+}
+
 .cell-center {
 	text-align: center;
 }