Label and format each key value table.
authorGary Kacmarcik <garykac@google.com>
Tue, 09 Jul 2013 17:35:20 -0700
changeset 431 b0a660a549a2
parent 430 351755b47b30
child 432 852cd5bacd38
Label and format each key value table.
html/DOM3-Events.html
html/key-table-builder.js
html/override.css
--- a/html/DOM3-Events.html	Tue Jul 09 17:08:15 2013 -0700
+++ b/html/DOM3-Events.html	Tue Jul 09 17:35:20 2013 -0700
@@ -6383,6 +6383,7 @@
 						attributes, though not all values MAY be available on all platforms or devices.</p>
 
 					<!-- Key tables. Note that all keys must be defined within a <div class="key-table"> -->
+					<p>General keys</p>
 					<div id="keys-general" class="key-table">
 						<key name="Attn" cat="General">The Attention (Attn) key.</key>
 						<key name="Apps" cat="General">Toggle display of available (interactive) application list.</key>
@@ -6422,6 +6423,7 @@
 						<key name="Soft3" cat="General">General purpose virtual function key, as index 3.</key>
 						<key name="Soft4" cat="General">General purpose virtual function key, as index 4.</key>
 					</div>
+					<p>UI keys</p>
 					<div id="keys-ui" class="key-table">
 						<key name="Accept" cat="UI">The Accept (Commit, OK) key. Accept current option or input method sequence conversion.</key>
 						<key name="Again" cat="UI">The Again key, to redo or repeat an action.</key>
@@ -6441,6 +6443,7 @@
 						<key name="Exit" cat="UI">Exit current state or current application (as appropriate).</key>
 						<key name="Zoom" cat="UI">Toggle between full-screen and scaled content, or alter magnification level.</key>
 					</div>
+					<p>Character and Math keys</p>
 					<div id="keys-character" class="key-table">
 						<key name="Separator" cat="Character">The Separator key, for context-sensitive text separators.</key>
 						<key name="Spacebar" cat="Character" char="0020">The Space (Spacebar) key (<code class="glyph">'&nbsp;'</code>).</key>
@@ -6473,6 +6476,7 @@
 								(FULL STOP, <code class="glyph">'.'</code>) or <code class="char">'\u00B7'</code> (MIDDLE DOT, <code class="glyph">'ยท'</code>).</p>
 							</key>
 					</div>
+					<p>Device keys</p>
 					<div id="keys-device" class="key-table">
 						<key name="BrightnessDown" cat="Device">The Brightness Down key. Typically controls the display brightness.</key>
 						<key name="BrightnessUp" cat="Device">The Brightness Up key. Typically controls the display brightness.</key>
@@ -6483,6 +6487,7 @@
 							</key>
 						<key name="PrintScreen" cat="Device">The Print Screen (PrintScrn, SnapShot) key, to initiate print-screen function.</key>
 					</div>
+					<p>Browser keys</p>
 					<div id="keys-browser" class="key-table">
 						<key name="BrowserFavorites" cat="Browser">The Browser Favorites key.</key>
 						<key name="BrowserHome" cat="Browser">The Browser Home key, used with keyboard entry, to go to the home page.</key>
@@ -6492,6 +6497,7 @@
 						<key name="BrowserBack" cat="Browser">Navigate to previous content or page in current history.</key>
 						<key name="BrowserForward" cat="Browser">Navigate to next content or page in current history.</key>
 					</div>
+					<p>Navigation keys</p>
 					<div id="keys-navigation" class="key-table">
 						<key name="Left" cat="Navigation">The left arrow key, to navigate or traverse leftward.</key>
 						<key name="PageDown" cat="Navigation">The Page Down key, to scroll down or display next page of content.</key>
@@ -6508,6 +6514,7 @@
 						<key name="Select" cat="Edit / Navigation">The Select key.</key>
 						<key name="Tab" cat="Edit / Navigation"char="0009">The Horizontal Tabulation (Tab) key.</key>
 					</div>
+					<p>Editing keys</p>
 					<div id="keys-edit" class="key-table">
 						<key name="Backspace" cat="Edit" char="0008">The Backspace key.</key>
 						<key name="Clear" cat="Edit">The Clear key, for removing current selected input.</key>
@@ -6522,6 +6529,7 @@
 						<key name="Paste" cat="Edit">The Paste key.</key>
 						<key name="Undo" cat="Edit">The Undo key.</key>
 					</div>
+					<p>Composition keys</p>
 					<div id="keys-composition" class="key-table">
 						<key name="DeadGrave" cat="Composition" char="0300">The Combining Grave Accent (Greek Varia, Dead Grave) key.</key>
 						<key name="DeadAcute" cat="Composition" char="0301">The Combining Acute Accent (Stress Mark, Greek Oxia, Tonos, Dead Eacute) key.</key>
@@ -6540,6 +6548,7 @@
 						<key name="DeadVoicedSound" cat="Composition" char="3099">The Combining Katakana-Hiragana Voiced Sound Mark (Dead Voiced Sound) key.</key>
 						<key name="DeadSemivoicedSound" cat="Composition" char="309A">The Combining Katakana-Hiragana Semi-Voiced Sound Mark (Dead Semivoiced Sound) key.</key>
 					</div>
+					<p>Modifier keys</p>
 					<div id="keys-modifier" class="key-table">
 						<key name="Alphanumeric" cat="Modifier">The Alphanumeric key.</key>
 						<key name="Alt" cat="Modifier">The Alternative (Alt, Option, Menu) key.  Enable alternate modifier function for interpreting concurrent or subsequent keyboard input.
@@ -6562,6 +6571,7 @@
 							key</a>, triggering a mode where subsequent key presses are combined to produce a different character.
 							</key>
 					</div>
+					<p>IME keys</p>
 					<div id="keys-ime" class="key-table">
 						<key name="AllCandidates" cat="IME">The All Candidates key, to initate the multi-candidate mode.</key>
 						<key name="NextCandidate" cat="IME">The Next Candidate function key.</key>
@@ -6582,6 +6592,7 @@
 						<key name="KanjiMode" cat="IME">The Kanji (Japanese name for ideographic characters of Chinese origin) Mode key.</key>
 						<key name="Katakana" cat="IME">The Katakana (Japanese Kana characters) key.</key>
 					</div>
+					<p>Media keys</p>
 					<div id="keys-media" class="key-table">
 						<key name="AudioFaderFront" cat="Media">Adjust audio fader towards front.</key>
 						<key name="AudioFaderRear" cat="Media">Adjust audio fader towards rear.</key>
--- a/html/key-table-builder.js	Tue Jul 09 17:08:15 2013 -0700
+++ b/html/key-table-builder.js	Tue Jul 09 17:35:20 2013 -0700
@@ -20,20 +20,17 @@
 
 function create_key_table(tablediv) {
 	var table = document.createElement('table');
-	table.setAttribute('class', 'data-table');
-	table.setAttribute('width', '100%');
+	table.setAttribute('class', 'data-table key-value-table');
 
 	var row = table.insertRow(-1);
 	var cell;
 
 	// Build the header row.
 	cell = document.createElement('th');
+	cell.setAttribute('width', '20%');
 	cell.appendChild(document.createTextNode('Key'));
 	row.appendChild(cell);
 	cell = document.createElement('th');
-	cell.appendChild(document.createTextNode('Char'));
-	row.appendChild(cell);
-	cell = document.createElement('th');
 	cell.appendChild(document.createTextNode('Typical Usage (Informative)'));
 	row.appendChild(cell);
 	cell = document.createElement('th');
@@ -61,16 +58,6 @@
 		cell.appendChild(code);
 
 		cell = row.insertCell(-1);
-		code = document.createElement('code');
-		code.id = 'key-U-' + keyname;
-		code.setAttribute('class', 'char');
-		if (keychar != '') {
-			keychar = "'\\u" + keychar + "'";
-		}
-		code.appendChild(document.createTextNode(keychar));
-		cell.appendChild(code);
-
-		cell = row.insertCell(-1);
 		while (key.hasChildNodes()) {
 			var child = key.removeChild(key.firstChild);
 			cell.appendChild(child);
--- a/html/override.css	Tue Jul 09 17:08:15 2013 -0700
+++ b/html/override.css	Tue Jul 09 17:35:20 2013 -0700
@@ -93,7 +93,7 @@
 	font-style: italic;
 }
 
-	/* Suppress auto-generated IDL sections in the Appendix.
+/* Suppress auto-generated IDL sections in the Appendix.
    These tables simply restate the info in the IDL so they're not needed.
  */
 
@@ -132,3 +132,13 @@
 #idl-interface-CompositionEvent-initializers > h4 + pre + section {
 	display: none;
 }
+
+/* Formatting for the key value tables.
+ */
+.key-table {
+	padding: 0 15px 0 30px;	
+}
+
+.key-value-table {
+	width: 100%;
+}