Keyboard input can be indicated with the kbd HTML tag, as in

<kbd>Ctrl</kbd> + <kbd>S</kbd>

which displays as Ctrl + S. The boxes created by this tag are quite large, so that they are in contact with the line below, and if such boxes occur directly above one another on different lines they overlap, see for example:

enter image description here

On Stack Overflow these boxes are smaller, so there is no overlap, see for example:

enter image description here

Can a similar design be implemented at TeX.SX? As commented by doncherry this should really have been done last year:

2012-05-05: Keyboard shortcuts (created with <kbd>) on all sites are now rendered like they've always been on Ask Different, with a less boxy layout.

But this obviously hasn't happened here.

Indeed the CSS tag for the kbd style is given by

kbd {
    white-space: nowrap;
    color: rgb(0, 0, 0);
    background: none repeat scroll 0% 0% rgb(238, 238, 238);
    border-style: solid;
    border-color: rgb(204, 204, 204) rgb(170, 170, 170) rgb(136, 136, 136) rgb(187, 187, 187);
    padding: 2px 4px;
    border-width: 1px 3px 3px 1px;
}

Tweaking it a little (removing the padding and adding border-radius:5px; gives the following which looks quite nicer. I think there are finer settings on the SO version.

enter image description here

  • 2
    First, Matlab. Then TikZ. Now CSS. ♥ – Paulo Cereda Sep 18 '13 at 14:11
  • @PauloCereda Powered by Firefox developer tools :) Right click and inspect element :P – percusse Sep 18 '13 at 14:21
  • It doesn't answer the question.... – percusse Nov 15 '13 at 10:13
  • I don't know why but there were two undelete votes so why not... – percusse Oct 12 '14 at 16:10
  • Nice, very nice, but I think the left / right padding has been shrunk a little too much. – Kevin Fegan Jul 12 at 7:07

You must log in to answer this question.

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