Template talk:Keypress

A full, cursed list of all the different key IDs and classes

I hate everything about this. Taken from our custom CSS, can't be changed unless you can change the CSS. You will best follow my rant if you understand the difference between a CSS class and a CSS ID.

Present in the CSS:

• Key IDs key-left, key-up, key-right, key-down with special border conditions ← ↑ → ↓ I think they were meant to be used with images of the arrows
• Key ID esc esc, the only one that doesn't begin with key-
• the fact that we have both a class key key-fn and an ID key-fn and they look different fn fn
  • the class has the properties height: 26px; width: 46px
  • the ID has the font property specified twice (font: bold 9pt arial) but otherwise inherits everything from the basic key span
• These are identical: del ID key-delete tab ID key-tab (width: 72px)
• These are also all identical: caps ID key-caps and enter ID key-enter (width 85px)
• Shift keys are cursed
  • We have two different classes for key-shiftleft and key-shiftright and they are THE SAME lshift rshift (width 112px)
  • but if you do a class with a SPACE and not a HYPHEN it's different key shiftleft lshift (width 50px)
• incidentally the shift-class-with-a-space is identical to all of these IDs control ctrl tab tab
• Command, presumably for Mac, is 67px wide and a class because sure cmd

Someone with CSS edit permissions, please make it make sense. -- Veerserif (talk here or on Discord) 18:38, 31 July 2023 (UTC)

Proposal to make the CSS make sense for this

Use only CSS classes in line with best practices, since these will be called multiple times potentially on the same page, and there is no inherent reason for them to be unique (which is what IDs are for).

Best solution: a single base class keyboard-key for all keys, which uses padding to automatically adjust width as necessary. See English Wikipedia's key press CSS, used in their Key press template.

Compromise solution: group the classes under classes of keys based on formatting needs.

• base class keyboard-key for all regular-width keys, A-Z 0-9 and all punctuation, including arrow keys. Pick one unified font family, style, size, color, and key background.
• key.modifier Covers Shift (left and right), Control (CTRL), Alt, Command (CMD), Caps, Tab, Backspace (BKSPC) and Delete (DEL) keys. This should be slightly wider than the base class and fit 5-6 characters.
• key.function Covers F1-12 and ESC, as well as Insert (INS), Home, End, Page Up (PGUP) and Page Down (PGDN). Wider than key but not as much as key.modifier.
• key.space Covers the spacebar. Probably doesn't need to be a full 226px wide.

-- Veerserif (talk here or on Discord) 19:01, 31 July 2023 (UTC)