Merge pull request #13041 from quarto-dev/bugfix/5879

Improve font rendering of `kbd` shortcode on macOS

Author: cscheid

news/changelog-1.8.md

@@ -18,6 +18,7 @@ All changes included in 1.8:
 - ([#678](https://github.com/quarto-dev/quarto-cli/issues/678)): a11y - Provide appropriate `aria-label` to search button.
 - ([#726](https://github.com/quarto-dev/quarto-cli/issues/726)): a11y - Provide `.screen-reader-only` callout type when callout text doesn't naturally include the type.
 - ([#5538](https://github.com/quarto-dev/quarto-cli/issues/5538)): Fix code-copy button style so that scrolling behaves properly.
+- ([#5879](https://github.com/quarto-dev/quarto-cli/issues/5879)): Improve font rendering of `kbd` shortcode on macOS. `kbd` will now also be stricter in converting keyboard shortcuts to macOS icons.
 - ([#10983](https://github.com/quarto-dev/quarto-cli/issues/10983)): Fix spacing inconsistency between paras and first section headings.
 - ([#12259](https://github.com/quarto-dev/quarto-cli/issues/12259)): Fix conflict between `html-math-method: katex` and crossref popups (author: @benkeks).
 - ([#12341](https://github.com/quarto-dev/quarto-cli/issues/12341)): Enable light and dark logos for html formats (sidebar, navbar, dashboard).

src/resources/extensions/quarto/kbd/resources/kbd.css

@@ -1,2 +1,5 @@
-kbd.kbd {
+kbd.kbd.mac {
+  /* When rendering keyboard icons on macOS, we revert the font family to the 
+     system font to ensure the icons render with the same X-height as upper case letters. */
+  font-family: inherit;
 }

src/resources/extensions/quarto/kbd/resources/kbd.js

@@ -17,21 +17,43 @@
   }
   const os = guessOS();
 
+  const macosModifiers = {
+    "command": "⌘",
+    "cmd": "⌘",
+    "shift": "⇧",
+    "ctrl": "⌃",
+    "control": "⌃",
+    "option": "⌥",
+  };
+  const keyRegex = /^[a-z0-9_]+$/;
+    // use a non-capturing group to avoid capturing the key names
+
+  const macosModifiersRegex = new RegExp(
+    // use a non-capturing group to avoid capturing the key names
+    `^(?:${Object.keys(macosModifiers).join("|")})-`,
+    "gi"
+  );
+  const shortcutParses = (text) => {
+    text = text.toLocaleLowerCase();
+    while (text.match(macosModifiersRegex)) {
+      text = text.replace(macosModifiersRegex, "");
+    }
+    return text.match(keyRegex) !== null;
+  }
+
   // deno-lint-ignore no-window-prefix
   window.addEventListener("DOMContentLoaded", (_) => {
     for (const el of Array.from(document.querySelectorAll("kbd"))) {
       el.classList.add("kbd");
       if (el.dataset[os.name] !== undefined) {
         el.innerText = el.dataset[os.name];
       }
-      if (os.name === "mac") {
-        el.innerText = el.innerText
-          .replaceAll(/command-?/gi, "⌘")
-          .replaceAll(/cmd-?/gi, "⌘")
-          .replaceAll(/shift-?/gi, "⇧")
-          .replaceAll(/ctrl-?/gi, "⌃")
-          .replaceAll(/control-?/gi, "⌃")
-          .replaceAll(/option-?/gi, "⌥");
+      if (os.name === "mac" && shortcutParses(el.innerText)) {
+        el.classList.add("mac");
+        for (const [key, value] of Object.entries(macosModifiers)) {
+          el.innerText = el.innerText.replaceAll(new RegExp(`${key}-`, "gi"), value);
+        }
+        el.innerText = el.innerText.toLocaleUpperCase();
       }
     }
   });