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

<kbd> is a great way to mark up text to be entered. But when you use it on Stack Exchange sites, it's really difficult to read. For instance, say I typed this sentence by starting with a Shift+F, then used o, followed by r, then space, you can see that it quickly becomes an unreadable mess of boxes and smashed-together type.

Whoever is in Ctrl of the visual design should probably fix it.

Also, I'm so very sorry. Please don't let the silly answers below discourage you from fixing the styling.

share|improve this question
    
That's why you use them judiciously (goofy, but awesome!, answers below withstanding) and use the necessary white space to make the post look good. I think it's pretty cool. –  raven Jul 2 '09 at 20:21
142  
Now all they need is an onclick handler to make them look like you are pressing them. Then an alert box pops up and says "On your keyboard, idiot!". –  Macha Jul 2 '09 at 20:25
12  
ok improved, will deploy later –  Jeff Atwood Jul 5 '09 at 7:14
1  
Thanks for taking care of the little things like that Jeff. The polish really does help make this a great site. –  jjnguy Jul 7 '09 at 20:36
    
Thanks, Jeff! :) –  Paul Fisher Jul 8 '09 at 1:54
27  
@Macha jQuery('kbd').click(function(){alert('On your keyboard, idiot!');}); –  Yahel Jan 8 '11 at 18:31
1  
@Mache: see my answer :P –  nyuszika7h Jan 14 '11 at 13:07
    
+1, but for the current rendering too! Still too ugly, and hardly ever useful in my opinion. –  Arjan Nov 28 '11 at 18:12
4  
The kbd graphics are cool in my opinion why get rid of them? –  dragonloverlord Apr 15 '13 at 15:28
    
why doesn't this work on Mathematics? –  Ephraim Jun 23 at 4:44
add comment

18 Answers 18

up vote 68 down vote accepted
kbd {
    -moz-background-clip:border;
    -moz-background-inline-policy:continuous;
    -moz-background-origin:padding;
    background:#EEEEEE none repeat scroll 0 0;
    border-color:#CCCCCC #AAAAAA #888888 #BBBBBB;
    border-style:solid;
    border-width:1px 1px 2px 2px;
    color:#000000;
    padding:2px 1px;
    white-space:nowrap;
}

..would make <kbd> a bit less broken:

Demonstration of above CSS

Sadly, it breaks Pesto's castle.

share|improve this answer
    
+1: Seems to be the default padding in the SO CSS that is the problem. BUt changing it would probably destroy most of the answers here :-) –  Richard Jul 3 '09 at 10:23
    
Is this something one can run using Tampermonkey as a script to override the default <kbd>...</kbd> specification? If so, how do you go about doing that? –  Werner Jul 14 at 20:39
    
@Werner It would be very easy to do with the "Stylish" addon for Chrome/Firefox. Also definitely doable with Tampermonkey, you'd just need to inject the CSS via Javascript (searching for "tampermonkey add css" should find something).. but in this specific case, why do you need to? The site has been updated to make the kdb element much nicer –  dbr Jul 15 at 13:51
1  
@dbr: Not on TeX - LaTeX where I contribute mostly. –  Werner Jul 15 at 15:30
add comment

                                                                                                               
                                                                                           
                                                                                           
                                                                                            
                                                                                            
                                                                                            
                                                                                                                               
                                                                                                  
                                                                                                        
                                                                                                  
                                                                                                          
                                                                                                      
                                                                                                              
                                                                                                  
                                                                                                              
                                                                                                  
                                                                                                              

OUR PRINCESS IS IN ANOTHER CASTLE!


original keyboard castle

share|improve this answer
193  
You've just beaten the internet. –  Eric Jul 2 '09 at 21:03
1  
I just had a flashback to elementary school and NES-filled nights.. so awesome! –  Jarrod Dixon Jul 5 '09 at 7:02
    
It probably looks different on every combination of screen size, resolution, font, and operating system. On mine the blank spaces are too small. –  Brad Gilbert Jul 5 '09 at 15:51
15  
Slow work day, wasn't it? –  perbert Jul 28 '09 at 17:01
    
Did you use a script for this? Or all by hand... –  Zifre Jul 28 '09 at 18:42
24  
A true artiste does it all by hand, though there may have been some cut-and-paste. –  Hilarious Comedy Pesto Jul 28 '09 at 18:50
11  
Despite being empty of princess, this castle is full of win. –  sirlancelot Aug 5 '09 at 22:49
13  
Oh noes! Now the castle is in another castle! –  random Sep 26 '09 at 5:49
    
I rolled it back now that the <kbd> element is back! –  uɐɯsO uɐɥʇɐN Nov 22 '10 at 1:45
    
@George, but it looks different? –  Arjan Nov 27 '10 at 22:54
    
@Arjan: Not my fault :P –  uɐɯsO uɐɥʇɐN Nov 27 '10 at 22:59
    
But you did break the nice result, @George! –  Arjan Nov 27 '10 at 23:04
    
@Arjan: I just rolled it back to the way it was originally! –  uɐɯsO uɐɥʇɐN Nov 27 '10 at 23:06
    
No, it did not look like that bad a year ago, did it @George? –  Arjan Nov 28 '10 at 7:25
6  
Uh oh. I think the castle is now slightly lopsided. Unexpected geological activity! –  nhinkle May 5 '12 at 1:16
show 10 more comments

`1234567890-= ←

Tab qwertyuiop[]

Caps asdfghjkl;' Enter

Shift    zxcvbnm,./  Shift   

Ctrl Alt                           Alt

This is the most fun I've had all day.


original keyboard

share|improve this answer
6  
+1 for the completion of what I tried to do...but also +1 because trying was also the most fun I've had...although... –  Thomas Owens Jul 2 '09 at 19:46
1  
Try and change it to the Billy Mays button –  TheTXI Jul 2 '09 at 19:53
5  
Hey, where's the spacebar? –  fretje Jul 2 '09 at 20:25
129  
Whoneedsaspacebar? –  mmyers Jul 2 '09 at 20:27
1  
You made me laugh man. Thanks xD –  Andrea Ambu Jul 2 '09 at 23:45
8  
Now try a UK keyboard with a double height enter key :-) –  Richard Jul 3 '09 at 10:21
    
are the m, j, l, and i letters on that keyboard (in jeff's link) a little bit red or am I going insane? Maybe I'm a synesthete. –  Carson Myers Aug 5 '09 at 22:37
    
@Carson Either you're not insane or I am too. –  deleted Aug 20 '09 at 23:27
2  
I can see the red, it might be a result of anti-aliasing, think of the subpixels! –  Liam Sep 8 '10 at 15:48
    
Updated keyboard to new format :D (with a spacebar, @mmyers :P) –  Riking Mar 11 '13 at 23:26
add comment

This is a very old post and the system has changed, it includes the original code for the keyboard and below it the image it generated, currently the original code does not make a good keyboard.


Trying out beat Pesto's keyboard. Mine has square buttons and correct spacing between items.

 °  1  2  3  4  5  6  7  8  9  0  ö  - Backspace  

Tab   q  w  e  r  t  y  u  i  o  p  ð  ' ENTER    

Caps    a  s  d  f  g  h  j  k  l  æ  ´  +        

Shift <  z  x  c  v  b  n  m  ,  .  þ Shift         

Ctrl   Win Alt          Space           Alt  Win  Menu  Ctrl 


Orginal (image form)

alt text

share|improve this answer
10  
The right Ctrl key is sticking out to the right for me (on IE7). Is it meant to be flush with the others? –  mmyers Jul 2 '09 at 20:29
5  
Here as well (FF3) –  fretje Jul 2 '09 at 20:30
    
Cant test IE7 :S He is a little bit to the right here but only 1 pixel or so (FF 3.5) –  Ólafur Waage Jul 2 '09 at 20:31
    
The right edge of the Shift key is about even with the 'r' in "Ctrl". –  mmyers Jul 2 '09 at 20:33
    
I think it's more that the 4th line is sort. –  Ólafur Waage Jul 2 '09 at 20:33
    
Ok wow, well im on linux so the font difference is a possible culprit. –  Ólafur Waage Jul 2 '09 at 20:33
4  
There's quite a difference on Chrome. The third line is about 1 pixel longer (but that's only noticeable 'cos I'm looking). Oh, don't think I'm not impressed BTW. –  ChrisF Jul 2 '09 at 20:37
    
Ok i see the issue in IE now. Ill propose a patch for it soon and commit it to jeff so my keyboard always looks good :D –  Ólafur Waage Jul 2 '09 at 20:39
    
@Jeff is this after the change on a Windows machine? Since on Linux this keyboard has about a 10 pixel space between each line. Or is that the intended change? –  Ólafur Waage Jul 5 '09 at 12:04
    
Opera v9.64: the right Ctrl key is sticking out to the right. –  Peter Mortensen Aug 5 '09 at 23:30
    
@Peter it no longer looks as intended. Check out Jeffs image here in the comments. –  Ólafur Waage Aug 6 '09 at 10:40
    
+1 - Thanks for providing those who hadn't seen the old -vs- new, the opportunity to do so. This should be pinned at the top of the answers! :) –  user66001 Sep 10 '13 at 18:03
add comment

I tried to make a keyboard and failed miserably. :(

Although I will present this:

Any

The mystical Any key.

share|improve this answer
add comment

Shiftt h i s space i s space w h y space w e space c a n ' t space h a v e space n i c e space t h i n g s .

Or so I'm told.

share|improve this answer
8  
I thought we couldn't have nice things because of me. But I guess it was you all along. –  Thomas Owens Jul 2 '09 at 19:25
3  
Shouldn't the T be a Shift+t? –  BalusC Jul 1 '12 at 19:48
3  
@Chichiray FREE COUNTRY I DO WHAT I WANT –  Paul Fisher Jul 5 '12 at 21:48
8  
IN UR POST USIN MY FREEDOMS –  badp Oct 25 '12 at 21:02
2  
@badp: Because that really needed to be fixed. –  Robert Harvey Oct 25 '12 at 21:06
add comment

Felt sorry for the poor broken{*} castle, felt that it MUST be fixed as a tribute to the history of meta.

Take THAT, Jin!!

*Today I realised that non-breaking spaces can break stuff as well O-0

                                                                                   
                                                                    





                               
                                                                                  

                                                                            

                                                                                  

                                                                                  

                                                                                  

                                                                                                                            

                                                                                   

                                                                                         

                                                                                    

                                                                                           

                                                                                                 

                                                                                                       

                                                                                             

                                                                                                       

                                                                                            

                                                                                                        

OUR PRINCESS IS IN ANOTHER CASTLE!

share|improve this answer
3  
Our princess could never be in that castle. It's so... plain ... and white. –  Cody Gray May 7 '12 at 10:34
    
@ThE blame Jin, not me. ;-) –  Manishearth May 7 '12 at 10:46
14  
I bow to your brick laying skills. –  Jin May 8 '12 at 5:07
    
@Jin: Technically, they're tiles, now that someone changed the design ;-) . Anyway, the design is actually much better--I just felt sorry for the poor castle :P –  Manishearth May 8 '12 at 5:19
3  
@animuson The flag has a unicorn! Try doing **THAT** with inline code blocks! –  Manishearth May 9 '12 at 7:55
add comment

I would like to propose that from here on out we replace

Caps Lock

with

Billy Mays

William Darrell "Billy" Mays, Jr. (July 20, 1958 – June 28, 2009) was an American television direct-response advertisement salesperson most notable for promoting OxiClean, Orange Glo, and other cleaning, home-based, and maintenance products. His distinctive beard and loud sales pitches made him a recognized television presence in the United States.

share|improve this answer
9  
Seconded. Now only to get PC makers to get on this. –  Thomas Owens Jul 2 '09 at 19:37
20  
MAY HE REST IN PEACE!!! –  Bill the Lizard Jul 2 '09 at 20:08
2  
Was he similar to BRIAN BLESSED? –  TRiG is Timothy Richard Green Aug 6 '11 at 1:29
add comment

You don't need keyboards to make castles! Inline code blocks work just as well!

Look, it has a flag! Try doing that with keyboards!

                                                 
                                                 
                                                 
                                         
                                         
                                         

                                                               

                                           

                                               

                                                         

                                                     

                                                         

                                                                    

                                                

                                            

                                                

                                            

                                                       

                                                      

                                                             

                                                     

                                                             

                                                     

                                                             

P.S. The new keyboard styles are awesomesauce. The unicorns are happy.

share|improve this answer
8  
cough –  Ullallulloo May 9 '12 at 18:39
    
@Ullallulloo: Yes, I know, he completed my challenge. Then I threatened to pull out the ASCII art, which I may yet still do. –  animuson May 9 '12 at 19:05
add comment

Esc     F1F2F3F4   F5F6F7F8   F9F10F11F12  PrSnScLkBrek

 `  1  2  3  4  5  6  7  8  9  0  -  = Backspace  Ins HomePgUp  
Tab   q  w  e  r  t  y  u   i   o  p   [    ]    \          Del  End PgDn
Caps    a  s  d  f  g  h   j   k   l   ;   '    Enter         
Shift         z  x  c  v  b  n  m   ,    .   / Shift                             ▲  
Ctrl   Win Alt                                                        Alt   Win MenuCtrl    ◀   ▼    ▶  

I couldn't find my keyboard layout here, so I thought I'd post it. You guys are using real small keyboards... (image below for posterity in case the CSS changes in future)

rendered 20-11-2012

share|improve this answer
    
Best one yet. I am in awe. –  Justin Morgan Nov 20 '12 at 4:15
16  
I'm horrified at the amount of time you must have spent on building this! ;) –  Shadow Wizard Nov 20 '12 at 7:29
add comment

Atwood should have never told us about this. This will only end in disaster.

share|improve this answer
add comment

I couldn't resist:-)

Which computer had this keyboard?

    ⟵ 1  2  3  4  5  6  7  8  9  0  +  -  £ HOMEDEL      f 1 

   CTRL Q  W  E  R  T  Y  U  I  O  P  @  *  ↑ RESTORE      f 3 

RUNSHIFT A  S  D  F  G  H  J  K  L  :  ;  = RETURN         f 5 

C=SHIFT Z  X  C  V  B  N  M  ,  .  / SHIFTCRSRCRSR         f 7 

                                                           

share|improve this answer
    
I give up. Which is it? –  Carson Myers Aug 5 '09 at 22:44
5  
4  
The function keys give that away, if only from a top view. Its also the C-64C. –  Tim Post Jul 1 '10 at 23:22
2  
@Tim: there's also a [restore] key; I've never seen that on another system. –  Marcel Korpel Dec 3 '10 at 21:44
add comment

I saw this in an answer once
and have been baffled about how it worked
ever since then. But I
guess I know now.
I'm terribly sorry about this

it looks like a label maker

share|improve this answer
16  
Now it looks like Messages on the iPhone... –  Cody Gray May 9 '12 at 8:09
add comment

I had no idea you could even do this, but now that I know, I want to do it everywhere!!!

Ins HomePgUp

Del End PgDn

           ↑  

  ←  ↓   →  

share|improve this answer
19  
If only that were an actual key on my keyboard... –  Eric Jul 2 '09 at 19:20
3  
+1 for echoing my thought exactly! –  Kip Jul 2 '09 at 20:01
2  
Paul has unleashed a monster. –  raven Jul 2 '09 at 20:18
    
You missed the arrows: ← ↑ → ↓ –  DisgruntledGoat Jul 8 '09 at 14:04
add comment
          I 

       am ok

     w  i t  h 

  t   h   i   s  

share|improve this answer
add comment

I totally agreeI totally agreeI totally agreeI totally agreeI totally agree

I totally agree

You know, I totally agree.
You see, on my posts I'm never intrusive, that's why I never use <kbd></kbd>

Though I always wanted to make an unpressable button.

And, ladies and gentlemen, the nothing-button!

You see, now that this is fixed,

I use buttons all day long.

share|improve this answer
3  
Wow it's even worse than backticks... hope it won't become the new formatting trend any time soon! –  Shadow Wizard Feb 9 at 21:48
add comment

BA

share|improve this answer
add comment

Eliminating this is an affront to Emacs users everywhere. They will then delete SO with:

Ctrl + End + Del + S + O + F8

share|improve this answer
14  
False! There is no way there is an emacs keybinding for that without Meta, Super and/or Hyper. –  derobert Sep 6 '09 at 9:52
    
-1: I tried that, and a million "Save As" windows appeared. –  user Nov 10 '13 at 9:07
add comment

You must log in to answer this question.

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