Define a meta style for key names, render as small caps

Author: marijnh

01_values.md

@@ -257,7 +257,7 @@ match.
 Almost anything can be put between quotes, and JavaScript will make a
 string value out of it. But a few characters are more difficult. You
 can imagine how putting quotes between quotes might be hard.
-_Newlines_ (the characters you get when you press Enter) can be
+_Newlines_ (the characters you get when you press [enter]{keyname}) can be
 included without escaping only when the string is quoted with backticks
 (`` ` ``).
 

02_program_structure.md

@@ -277,7 +277,7 @@ systems (including all modern web ((browser))s and Node.js) provide a
 `console.log` function that writes out its arguments to _some_ text
 output device. In browsers, the output lands in the ((JavaScript
 console)). This part of the browser interface is hidden by default,
-but most browsers open it when you press F12 or, on a Mac, command-option-I.
+but most browsers open it when you press F12 or, on a Mac, [command]{keyname}-[option]{keyname}-I.
 If that does not work, search through the menus for an item named Developer
 Tools or similar.
 

15_event.md

@@ -280,7 +280,7 @@ behavior is broken.
 
 Depending on the browser, some events can't be intercepted at all. On
 Chrome, for example, the ((keyboard)) shortcut to close the current
-tab (Ctrl-W or Command-W) cannot be handled by JavaScript.
+tab ([control]{keyname}-W or [command]{keyname}-W) cannot be handled by JavaScript.
 
 ## Key events
 
@@ -321,22 +321,22 @@ longer.
 The example looked at the `key` property of the event object to see
 which key the event is about. This property holds a string that, for
 most keys, corresponds to the thing that pressing that key would type.
-For special keys like Enter, it holds a string that names the key
-(`"Enter"`, in this case). If you hold shift while pressing a key,
+For special keys like [enter]{keyname}, it holds a string that names the key
+(`"Enter"`, in this case). If you hold [shift]{keyname} while pressing a key,
 that might also influence the name of the key—`"v"` becomes `"V"`,
-`"1"` may become `"!"`, if that is what pressing Shift-1 produces on
+`"1"` may become `"!"`, if that is what pressing [shift]{keyname}-1 produces on
 your keyboard.
 
 {{index "modifier key", "shift key", "control key", "alt key", "meta key", "command key", "ctrlKey property", "shiftKey property", "altKey property", "metaKey property"}}
 
-Modifier keys such as Shift, Ctrl, Alt, and Meta (Command on Mac)
+Modifier keys such as [shift]{keyname}, [control]{keyname}, [alt]{keyname}, and [meta]{keyname} ([command]{keyname} on Mac)
 generate key events just like normal keys. But when looking for key
 combinations, you can also find out whether these keys are held down
 by looking at the `shiftKey`, `ctrlKey`, `altKey`, and `metaKey`
 properties of keyboard and mouse events.
 
 ```{lang: "text/html", focus: true}
-<p>Press Ctrl-Space to continue.</p>
+<p>Press Control-Space to continue.</p>
 <script>
   window.addEventListener("keydown", event => {
     if (event.key == " " && event.ctrlKey) {

18_http.md

@@ -619,7 +619,7 @@ user has focused something else.
 {{index "tab key", keyboard, "tabindex attribute", "a (HTML tag)"}}
 
 Browsers traditionally also allow the user to move the focus
-through the document by pressing the Tab key. We can influence the
+through the document by pressing the [tab]{keyname} key. We can influence the
 order in which elements receive focus with the `tabindex` attribute.
 The following example document will let focus jump from the text input to
 the OK button, rather than going through the help link first:
@@ -702,10 +702,10 @@ acts both as an array-like object (accessible by number) and a ((map))
 </script>
 ```
 
-{{index "button (HTML tag)", "type attribute", submit, "Enter key"}}
+{{index "button (HTML tag)", "type attribute", submit, "enter key"}}
 
 A button with a `type` attribute of `submit` will, when pressed,
-cause the form to be submitted. Pressing Enter when a form field is
+cause the form to be submitted. Pressing [enter]{keyname} when a form field is
 focused has the same effect.
 
 {{index "submit event", "event handling", "preventDefault method", "page reload", "GET method", "POST method"}}
@@ -922,7 +922,7 @@ deselect an option.
 
 This example extracts the selected values from a `multiple` select
 field and uses them to compose a binary number from individual bits.
-Hold Ctrl (or Command on a Mac) to select multiple options.
+Hold [control]{keyname} (or [command]{keyname} on a Mac) to select multiple options.
 
 ```{lang: "text/html"}
 <select multiple>

19_paint.md

@@ -1032,7 +1032,7 @@ more features as exercises.
 {{index "keyboard bindings (exercise)"}}
 
 Add ((keyboard)) shortcuts to the application. The first letter of a
-tool's name selects the tool, and Ctrl-Z or Command-Z activates undo.
+tool's name selects the tool, and [control]{keyname}-Z or [command]{keyname}-Z activates undo.
 
 {{index "PixelEditor class", "tabindex attribute", "elt function", "keydown event"}}
 
@@ -1094,8 +1094,8 @@ if}}
 {{index "keyboard bindings (exercise)", "key property", "shift key"}}
 
 The `key` property of events for letter keys will be the lower case
-letter itself, if Shift isn't being held. And we're not interested in
-key events with Shift here.
+letter itself, if [shift]{keyname} isn't being held. And we're not interested in
+key events with [shift]{keyname} here.
 
 {{index "keydown event"}}
 

20_node.md

@@ -535,7 +535,7 @@ _localhost_, which would use the default port 80.
 When you run this script, the process just sits there and waits. When
 a script is listening for events—in this case, network
 connections—`node` will not automatically exit when it reaches the end
-of the script. To close it, press Ctrl-C.
+of the script. To close it, press {{control}}-C.
 
 A real web ((server)) usually does more than the one in the example—it
 looks at the request's ((method)) (the `method` property) to see what

epub/style.css

@@ -120,6 +120,8 @@ figure.framed img {
   border: 2px solid black;
 }
 
+span.keyname { font-variant: small-caps }
+
 td {
   vertical-align: top;
 }

html/css/ejs.css

@@ -399,6 +399,8 @@ figure.square-framed img {
   border: 4px double #666;
 }
 
+span.keyname { font-variant: small-caps }
+
 @media screen and (max-width: 500px) {
   figure {
     margin: 0;

src/render_html.js

@@ -151,6 +151,8 @@ let renderer = {
     return (author ? `\n\n<footer>${escape(author)}${title ? `, <cite>${escape(title)}</cite>` : ""}</footer>` : "") +
       "\n\n</blockquote>"
   },
+  meta_keyname_open() { return "<span class=\"keyname\">" },
+  meta_keyname_close() { return "</span>" },
 
   meta_hint_open() { return "\n\n<div class=\"solution\"><div class=\"solution-text\">" },
   meta_hint_close() { return "\n\n</div></div>" }

src/render_latex.js

@@ -161,6 +161,9 @@ let renderer = {
   meta_latex_open() { raw = true; return "" },
   meta_latex_close() { raw = false; return "" },
 
+  meta_keyname_open() { return "\\textsc{" },
+  meta_keyname_close() { return "}" },
+
   link_open(token) {
     let href= token.attrGet("href")
     let maybeChapter = /^(\w+)(?:#(.*))?$/.exec(href)