Photo Corners headlinesarchivemikepasini.com
A S C R A P B O O K O F S O L U T I O N S F O R T H E P H O T O G R A P H E R
Enhancing the enjoyment of taking pictures with news that matters, features that entertain and images that delight. Published frequently.
Site Tweak: Keyboard Glyphs as Keys
8 August 2022
We don't have much occasion for it on Photo Corners but we have now and then had to represent elsewhere a keyboard glyph (like ⌃⌥⇧) to explain some process. Here we usually mention menu commands (or sometimes code) in navy blue Courier to avoid the confusion of using quotes.
Since we moved to the utf-8 character set on the site, this became easier from an author's perspective. We quickly put together a Keyboard Maestro macro with all the Apple keyboard glyphs on a popup list so we could see what they were before dropping them in as glyphs rather than obscure character codes.
But a glyph by itself seems a bit naked.
It needs some graphic representation of a key cap. And that's where the fun comes in.
To start with, you wrap the glyph in the
kbdtag for HTML. That doesn't get you far, though. It just employs a monospace font for the glyph (which doesn't do anything, frankly).But with a tag assigned to the glyph, you can style the tag. And that's really when the fun starts.
It's a lot harder to devise a successful key cap style that you might think. We spent several days being prematurely satisfied with a series of attempts that, one after another, we eventually found wanting.
We got a headstart with some CSS we found online but for one reason or another, we found them all a bit short of what we needed. Either the keycap was variable in width (depending on the character) or too tall (screwing up the line height) or the color wasn't distinct enough.
We eventually resorted to a button design we've used elsewhere that worked out quite well, providing a small but legible and uniformly-sized keycap we colored to reflect our code's navy color. The letter or glyph enjoys a slight engraving effect and the button itself has a shadow. And line height is not affected.
We folded that into our site's CSS so the next time we need a keycap, we can use it. But we won't make you wait. Here's our sample text:
Press ⌘ A or use the
Editmenu commandSelect Allto select all of the text. To copy that text, press ⌘ C or select theEditmenu commandCopy.Could be simpler but not clearer.