Drawing Keyboard Keys

Those of you who followed my recommendation and took at look at Xah Lee’s Increase Productivity Using Function Keys post, may have noticed some neat CSS magic that he uses when writing about keyboard keys. For example, he says that to switch apps on the Mac you use the 【⌘ Cmd+Tab】 key sequence. I like that a lot and decided to try it out on my own. As it turns out, it’s pretty simple to do and Org-mode makes it easy to enter them into a post with a macro.

If you look at the HTML for this post, you will see that the keys above are rendered as

<span class="key">⌘ Cmd</span>+<span class="key">Tab</span>

so to draw a key we merely enclose it in <span class="key"> </span> tags. We can implement that easily with an Org-mode macro:

#+MACRO: key @<span class="key">$1@</span>

and then call the macro for each key we want to draw. For example, the source code for the line with the keys is:

…use the 【{‍{{key(⌘ Cmd)}}}+{‍{{key(Tab)}}}】 key sequence. I like that a lot and…

That leaves only the CSS. Here’s what I’m using:

.key {
        border:solid 1px #989898;
        background-color: #F4F4F4;
        padding-left: .25ex;
        padding-right: .25ex;
        font-family: monospace;
}

You can experiment with the colors and spacing to get something that looks pleasing to you if you don’t like my scheme.

The only downside to this for me is that I have add the CSS directly to my site’s CSS file rather than include it in the post itself. That’s the proper thing to do, of course, but every time I upgrade WordPress they overwrite the template file with my extra CSS and I have to reapply it. Of course, it’s entirely likely that there’s some way to make a permanent addition but I haven’t found it yet.