I know we can use <kbd> to make keyboard short cuts like this ! For example, if I wanted to explain how to open the Run prompt on Windows, which is the Windows key and R, how would this be done? (And for clarity, I mean the Windows key which is typically between ctrl and alt)?
2 Answers
Joey has this trick of embedding the Windows logo image within the kbd tags. So
<kbd>![Windows Key][winlogo]</kbd>
Combined with a regular key, looks like:
R
Here's a better one that shows the 4 parts clearly:
R
<kbd>![Windows Key][newwinlogo]</kbd>
Although FWIW I like the old one much better:
R
<kbd>![Windows Key][oldwinlogo]</kbd>
Here are the images you have to use in your post's source code:
[winlogo]: https://i.stack.imgur.com/Rfuw7.png
[newwinlogo]: https://i.stack.imgur.com/B8Zit.png
[oldwinlogo]: https://i.stack.imgur.com/T0oPO.png
-
Err, "I like the old one much better" refers to me, not Sathya (although of course he may share my views!)– KaranDec 21, 2012 at 3:41
-
2The only issue with the huge icon is that you can't really use it in a paragraph (because it'll increase the line height) or with other keys because it's too large.– slhckDec 21, 2012 at 17:49
-
1
-
@slhck: 16x16 vs 12x12, so I guess it might be possible to shrink it without losing too much detail (then again, maybe it'll end up looking just like the one Joey uses).– KaranDec 23, 2012 at 6:57
-
1Hmmm, not too nice on mobile (or at least on some devices), nor for the few who have Imgur blocked at work.– ArjanMay 19, 2013 at 14:52
-
1Can someone please cleanup the excess white on
[newwinlogo]
– user345866Oct 20, 2016 at 19:25
Well, you could use a symbol that closely resembles a window, which is SQUARED PLUS
, or Unicode: U+229E
. It looks like this:
⊞
If it doesn't look like the Windows logo to you, you can also simply use ⊞ Win, Win, Windows or Windows-Key. The benefit here is that everyone will know what you mean.
ctrl
andalt
isn't a problem, why isWin
orWindows
? It's not printed on the key, but just as clear. How aboutshift
ortab
?backspace
?return
?left arrow
?