Automatic "keyboard-ification" of detected keyboard shortcuts


#1

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.


#2

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


#3

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-{

#4

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


#5

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 ⌥?


#6

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


#7

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


#8

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 ?”


#9

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


#10

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.


#11

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.