BLOGS BY TOPIC
BLOGS BY AUTHOR
BLOGS BY YEAR
Posted by Andy Brown on 21 July 2011
You need a minimum screen resolution of about 700 pixels width to see our blogs. This is because they contain diagrams and tables which would not be viewable easily on a mobile phone or small laptop. Please use a larger tablet, notebook or desktop computer, or change your screen resolution settings.
Creating In-line Short-cut Keys
I've been trying to find the best way to display short-cut keys. For example, how to get a web page to display something like:
The answer - as always - is to make good use of CSS. This blog shows a couple of false trails I went down, then a final answer which seems to solve the problem.
I hope someone finds this useful. If you know of any improvements to make to this procedure, please share them with the world by adding a comment below.
False Trail 1 - Standard ASCII Keys
My initial thought was to find out the ASCII key for a character, and use that. So for example, you can display a down arrow key like this ↓ using the HTML sequence ↓ - but there are at least two problems with this:
- It looks weak; and
- It doesn't seem to work on all browsers.
And anyway, how do you then cope with keys like CTRL and ALT ?
False Trail 2 - Images
My next idea was to buy a stock of keyboard images: how hard could it be to find some? After some searching, the closest I came was from Shutterstock, but even then you had to pay 29 pounds to download 12 images. And even if I could find a perfect image for each key, I'd still have to find a way to include them in HTML.
The Answer - Use a Span Tag
Eventually I gave up trying to find the perfect answer, and resorted to putting keyboard text in span tags. The problem then is that we got missing borders. For example:
In this example, the bottom border of the key is missing
Also, where consecutive lines contained keys, this could give strange effects:
In this example, the F8 keys overlap
The obvious answer to the problems above is to set a top and bottom margin for the span tag used to create the key effect:
The selected text won't work: because the span tag isn't a block style, the top/bottom margin will be ignored.
The trick is to set the line-height property of the span class to something like 2em:
Setting the line-height property forces browsers to set a minimum line height for blocks of text containing our span class.
In Firefox, IE and Chrome, at any rate, this seems to solve the problem. Unfortunately, it means that arrow keys like Up Arrow and Down Arrow don't look that elegant, but you can't have everything!