{
  "$type": "site.standard.document",
  "content": "---\ntitle: \"Command/Control: giving OS aware keybinding hints\"\ndescription: \"A small JS snippet that auto-swaps Ctrl/Cmd in keyboard shortcut hints based\n  on the reader's OS.\"\n---\n\nAs someone who writes a lot of [web-based](https://extemporelang.github.io)\n[documentation for](https://cs.anu.edu.au/courses/comp1720/)\n[using](https://cs.anu.edu.au/courses/comp2300/)\n[computers](https://comp.anu.edu.au/courses/laptop-ensemble/), it's often useful\nto give people hints about keybindings which could make their lives easier.\nHowever, this is tricky when it comes to the control key/command key keybinding\nconvention on macOS vs Windows/Linux.\n\nIn the past, I've just written things like:\n\n> To save the file, hit <kbd class=\"nopretty\">CTRL</kbd>+<kbd>S</kbd> to save\n> (or <kbd class=\"nopretty\">⌘</kbd>+<kbd>S</kbd> if you're on macOS)\n\nwhich gets _really tedious_ when you have to repeat it every time.\n\nSo, I wrote a little bit of javascript which\n\n1. scans the document for any <kbd class=\"nopretty\">control</kbd> elements\n2. if it detects[^detection] you're viewing the site on macOS, changes it to\n   <kbd class=\"nopretty\">⌘</kbd>\n\nIt actually searches for all of <kbd class=\"nopretty\">control</kbd>, <kbd\nclass=\"nopretty\">command</kbd>, <kbd class=\"nopretty\">ctrl</kbd>, <kbd\nclass=\"nopretty\">ctl</kbd> or <kbd class=\"nopretty\">cmd</kbd> and \"normalises\"\nthem to <kbd class=\"nopretty\">⌘</kbd> (macOS) or <kbd\nclass=\"nopretty\">CTRL</kbd> (otherwise).\n\nOn the off chance that I actually don't want it to do this, the script will skip\nany `<kbd>` element with a `nopretty` class.\n\n[^detection]: it'll work in _most_ cases; foolproof OS autodetection is really hard\n\nIf you're interested, the script looks like this:\n\n```js\nwindow.addEventListener(\"DOMContentLoaded\", (event) => {\n  // replace all these with the appropriate modifier for the platform\n  let modKeys = [\"control\", \"command\", \"ctrl\", \"ctl\", \"cmd\"];\n\n  let modifier = navigator.appVersion.indexOf(\"Mac\") != -1 ? \"⌘\" : \"CTRL\";\n\n  for (const kbdElement of document.querySelectorAll(\"kbd\")) {\n    if (\n      modKeys.includes(kbdElement.textContent.toLowerCase()) &&\n      !kbdElement.classList.contains(\"nopretty\")\n    ) {\n      kbdElement.textContent = modifier;\n    }\n  }\n});\n```\n\nIn case I make any tweaks, you can always find the latest version in my\n[blog source on GitHub](https://github.com/benswift/benswift.github.io/blob/source/assets/js/os-aware-modifiers.js).\n",
  "createdAt": "2026-05-13T23:14:54.863Z",
  "description": "A small JS snippet that auto-swaps Ctrl/Cmd in keyboard shortcut hints based on the reader's OS.",
  "path": "/blog/2020/02/14/command-control-giving-os-aware-keybinding-hints",
  "publishedAt": "2020-02-14T00:00:00.000Z",
  "site": "at://did:plc:tevykrhi4kibtsipzci76d76/site.standard.publication/self",
  "textContent": "A small JS snippet that auto-swaps Ctrl/Cmd in keyboard shortcut hints based on the reader's OS.",
  "title": "Command/Control: giving OS aware keybinding hints"
}