Automatic "keyboard-ification" of detected keyboard shortcuts


I’ve noticed that a lot of posts here have keyboard shortcuts in them, e.g.:

ctrl-c, command+num, ctrl+tab, cmd+opt+left, ctrl+shift+tab, cmd-shift-{

I wonder if we could automatically detect these sorts of strings and convert them to their keyboard-ed equivalents, e.g.

ctrl-c, command+num, ctrl+tab, cmd+opt+left, ctrl+shift+tab, cmd-shift-{

It’s a lot of typing to do it manually:

ctrl-c vs <kbd>ctrl</kbd>-<kbd>c</kbd>

So how about if we detect it and do it for you on these keyboard shortcuts?

This seems very regex friendly for a couple reasons:

  • the starts-with trigger strings are all fairly unique: cmd, ctrl, alt, shift.
  • must be connected by + or -

Although very few discussion sites make as much use of keyboard shortcuts as this one does, I don’t feel like this would be risky to enable globally for all forums.


I like the idea! And what about also detecting Mac special characters? Like ⌘, ⌥, ⌃, …


Perhaps support the Emacs syntax too? Though I’m not sure how many false positives there would be …

C-c, s-num, C-TAB, s-M-<left>, C-S-TAB, s-S-{


You should add super and meta to the list of triggers.


That’s fine, but I usually see them spelled out, rarely as glyphs. I guess some of those you can’t spell out, how does one spell out ⌘ or ⌥?


Those are the Command and Option (or Alt) keys.


Yep, OS X has odd notation for keyboard shortcuts here’s most of them:

  • for Command
  • for Option
  • ^ for Control
  • for Shift
  • for Escape
  • for Tab
  • :leftwards_arrow_with_hook: for Return
  • for Delete
  • for Forward Delete
  • for Page Up
  • for Page Down
  • :arrow_upper_left: for Home
  • :arrow_lower_right: for End

While these are awkward to type out, it might be a good idea to wrap those characters in <kbd> tags as well?

Also a bit of trivia, the symbol used for the Mac’s Command key is taken from Swedish campground maps


I wonder if it would be useful to also add hover text (or some kind of tap-activated tooltip) so that if you hovered over or tapped the key, it would show it’s spelled-out name.

For instance, if I tapped or hovered over I would see “Command”. That way, maybe fewer people would be confused and have to wonder things like “What in the world is ?”


So what you’re asking is that we convert to <abbr title="Command"><kbd>⌘</kbd></abbr> which displays as ?


Yes, something similar to that! That particular implementation doesn’t appear to be “touch friendly” for non-mouse devices, but you understood the spirit of it.


Yeah <abbr> tags kind of break down on devices where there’s no concept of tooltips. Seems like a perfect use case for some simple JS.