What is meta? ×
Meta Stack Exchange is where users like you discuss bugs, features, and support issues that affect the software powering all 138 Stack Exchange communities.

I have just edited this post where OP is apparently not afraid to talk about his kbd.

Now look at that mess. F1s fighting each other...

all the KBDs...

I'm not a CSS person, but think that making he <kbd/>ized font little bit smaller could prevent keys from overlapping.

I believe that <kbd/> should be usable as markup, without such devastating effect on visual part.

(I know <kbd/>s used to be more intrusive back in old days of Pesto's castles.)

share|improve this question
YOU CAN HAVE MY kbd TAG WHEN YOU PRY THEM FROM MY COLD, DEAD HANDS! –  The Unhandled Exception Mar 26 '12 at 23:34
Perhaps you'd be interested in supporting this other feature request? –  Cody Gray Mar 26 '12 at 23:34
@TheEstablishment I'd love to see those Applovely tags applied on my example :) –  Alois Mahdal Mar 26 '12 at 23:43
I agree it's too intrusive (and also some would say it's even wrong and one should use an additional pair: <kbd> <kbd>Shift</kbd><key>F1</kbd> </kbd>). But what is keeping you from rolling back that edit? –  Arjan Mar 27 '12 at 6:08
@Arjan I did the markup intentionally because I think that markup should be done. (...no matter the real influence on display and/or formatting.) I don't want to revert it, I just don't like how it looks like. –  Alois Mahdal Mar 27 '12 at 7:35
@Arjan (That "feel wrong" part was meant ironically, I have removed it since now I realize it can be misleading.) –  Alois Mahdal Mar 27 '12 at 7:35
(Hmmm, I'd almost remove my upvote as I really feel your edit was too excessive and I dislike <kbd> for both its ugly rendering and wrong usage. But well, as I'm afraid it's here to stay, making it less intrusive helps a bit too...) –  Arjan Mar 27 '12 at 15:59

3 Answers 3

Our designer, Jin, has much improved the styles on <kbd> elements.

View an example here: <kbd> elements are way intrusive

(Forgive the broken castle above it)

share|improve this answer
Why should I forgive the castle? It has done nothing wrong. On the other hand, I HATE JIN FOREVER. –  BoltClock's a Unicorn May 5 '12 at 5:00
Could we have the less-bad <kbd>s network-wide, or at least on Arqade as well? Looks like this was only deployed to the trilogy sites. –  lunboks May 5 '12 at 10:38
@BoltClock'saUnicorn: The castle has been reincarnated :) –  Manishearth May 7 '12 at 5:35
I agree with @lunboks, can we have the pretty keys on all sites (like, for example, TeX - LaTeX) pretty please? –  doncherry May 14 '12 at 19:40
@Jarrod - Arqade is still waiting for a response, either yay or nay. Any chance you could prod Jin a bit? :) –  Robotnik Mar 2 at 3:16
@Robotnik consider him prodded. –  Jarrod Dixon Mar 2 at 3:20
thanks :) <extra chars> –  Robotnik Mar 2 at 3:23

Just for visual comparison, what I was able to manage with couple of !important attributes on Opera on my Debian box (the same machine as I used for the first example):

Example of the same post with x-small font-size and some position adjustments


kbd {
    font-size:x-small !important;
    position: relative;
    bottom: 3px !important;
    padding:1px 4px !important;

(Please don't blast me for incorrect CSS practices ;-D)

share|improve this answer

Well...yeah . . .

I mean, bold would be intrusive too, if you used that much of it. A little bit of formatting goes a long way.

I don't really think this is a problem that is inherent to the styling used for the <kbd> tag...

share|improve this answer
Yes, the same way using too much emphasis in real speech would be. But unlike bold, the <kbd/> is not meant to emphasize. And I don't see such way as mentioning keyboard shortcuts too much. –  Alois Mahdal Mar 26 '12 at 23:37
@Alois: it is emphasis though. It emphasizes that it's a keystroke. The way you might say "Hold the Control key, the Alt key, and then press the Delete key in order to save your game" when doing phone support, but merely say "press control-alt-delete" when speaking to a co-worker who already knows that these are keys. –  Shog9 Mar 27 '12 at 22:43
@Shog9 your point of view proves that there are other points of view than mine. Thanks. But (from Wikipedia): "emphasis is the exaggeration of words in a text with a font in a different style from the rest of the text—to emphasize them." When I review for markup, I do not want to think about what the rendering engine will make it look like (will it actually emphasize or not?). I merely want to preserve the information that this is a keystroke. Just as when you insert an <a/>nchor among other data: You don't really want to say "make it blue and underline it", do you? –  Alois Mahdal Mar 27 '12 at 22:54
I sympathize with your point of view, @Alois - and I do like your mock-up: the overlap shown in your question's screenshot is wrong no matter how you slice it. But I do think these are supposed to stand out a bit - you want them to be noticed. –  Shog9 Mar 27 '12 at 23:02
Thanks, @Shog9. Yes, even I actually do want them to stand out a little---In a diffenent way on SO site, on Apple site, on mobile SE, on archaic-wooden-keyboards-club-site or when viewing any of those in Lynx. –  Alois Mahdal Mar 27 '12 at 23:07

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .