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!
    – The Unhandled Exception
    Mar 26, 2012 at 23:34
  • 1
    Perhaps you'd be interested in supporting this other feature request?
    – Cody Gray - on strike
    Mar 26, 2012 at 23:34
  • @TheEstablishment I'd love to see those Applovely tags applied on my example :)
    – Alois Mahdal
    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?
    – Arjan
    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.
    – Alois Mahdal
    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.)
    – Alois Mahdal
    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...)
    – Arjan
    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

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.
    – Alois Mahdal
    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.
    – Shog9
    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?
    – Alois Mahdal
    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.
    – Shog9
    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.
    – Alois Mahdal
    Mar 27, 2012 at 23:07

You must log in to answer this question.

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