13

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.)

Improve this question
7
  • 6
    YOU CAN HAVE MY kbd TAG WHEN YOU PRY THEM FROM MY COLD, DEAD HANDS! Commented Mar 26, 2012 at 23:34
  • 1
    Perhaps you'd be interested in supporting this other feature request? Commented Mar 26, 2012 at 23:34
  • @TheEstablishment I'd love to see those Applovely tags applied on my example :) Commented Mar 26, 2012 at 23:43
  • 1
    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? Commented Mar 27, 2012 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. Commented Mar 27, 2012 at 7:35
  • @Arjan (That "feel wrong" part was meant ironically, I have removed it since now I realize it can be misleading.) Commented Mar 27, 2012 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...) Commented Mar 27, 2012 at 15:59

3 Answers 3

Reset to default
14

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)

Improve this answer
7
  • 7
    Why should I forgive the castle? It has done nothing wrong. On the other hand, I HATE JIN FOREVER. Commented May 5, 2012 at 5:00
  • 4
    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. Commented May 5, 2012 at 10:38
  • Yep. meta.cstheory.stackexchange.com/questions/1521/… Commented May 7, 2012 at 5:07
  • 1
    @BoltClock'saUnicorn: The castle has been reincarnated :) Commented May 7, 2012 at 5:35
  • I agree with @lunboks, can we have the pretty keys on all sites (like, for example, TeX - LaTeX) pretty please? Commented May 14, 2012 at 19:40
  • @Jarrod - Arqade is still waiting for a response, either yay or nay. Any chance you could prod Jin a bit? :) Commented Mar 2, 2015 at 3:16
  • 1
    @Robotnik consider him prodded. Commented Mar 2, 2015 at 3:20
7

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

I.e.:

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)

Improve this answer
1

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...

Improve this answer
5
  • 2
    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. Commented Mar 26, 2012 at 23:37
  • 3
    @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. Commented Mar 27, 2012 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? Commented Mar 27, 2012 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. Commented Mar 27, 2012 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. Commented Mar 27, 2012 at 23:07

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.