Inserting in-line keys in HTML using CSS
Getting keyboard keys to display properly in HTML can be hard. This blog shows two ways which don't work, and one way (using CSS, inevitably) which seems to do the trick.

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:

Press CTRL + N to create a new file

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:

  1. It looks weak; and
  2. 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:

Example of key missing bottom border

In this example, the bottom border of the key is missing

 

Also, where consecutive lines contained keys, this could give strange effects:

Example of two keys running into each other

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:

Example of top/bottom margin in style

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:

Example of line-height property

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!

 

This blog has 0 threads Add post