Template:KeySmall: Difference between revisions

Revision as of 20:47, 16 May 2025

Call this template and pass it a character or string that serves as the label of a keyboard button to see that text printed as a cute little key: esc

You can also print two-symbol keys by passing in a second parameter with the second character: !
1 @
2 #
3 $
4 %
5 ^
6 &
7 *
8 (
9 )
0

The button is carefully designed to remain in line with text on the same line:

Push the ~
` key to open the developer console.

It has not been tested with all possible keys on all possible keyboards so some characters may need special tweaking to look good or even be legible. The only special layout created so far is for the tilde key, so this can serve as a model for future special layouts being added to the template code.

If you want to display a larger key onscreen, see Template:KeyLarge.

@@ Line 1: / Line 1: @@
 <includeonly><span style="
      box-sizing:border-box;
+    min-width:21px;
+    min-height:21px;
+    max-height:21px;
      white-space:nowrap;
      background-color:rgba(255, 255, 255, 1.0);
@@ Line 12: / Line 15: @@
      text-align:center;
      color:#3a3a3a;
-     font-size:0.8rem;
+     font-size:{{#if:{{{2|}}}|0.5|0.8}}rem;
      font-weight:500;
-     line-height:0.8;
+     line-height:{{#if:{{{2|}}}|1.0|0.8}}em;
      -webkit-font-smoothing:antialiased;
      -webkit-tap-highlight-color:transparent;
@@ Line 22: / Line 25: @@
      display:inline-block;
      position:relative;
-     top:-5px;">{{{1}}}</span></includeonly><noinclude>
+    vertical-align:middle;
-Call this template and pass it a character or string to see that text printed as a cute little key:
+     top:-5px;">{{
+    #if:{{{2|}}}
+      |{{
+       #ifeq:{{{2}}}<!--special layout for the tilde key to make it more legible-->
+         |`<!--assumption is that if the bottom char is '`' then the top char is '~'-->
+         |<span style="
+          position:absolute;
+          top:50%;
+          left:50%;
+          transform:translate(-50%, -85%);
+          line-height:1.0;
+          display:inline-block;
+          font-size:0.80rem;
+          text-align:center;">{{{1}}}</span><br><span style="
+          position:absolute;
+          top:50%;
+          left:50%;
+          transform:translate(-50%, 10%);
+          line-height:1.0;
+          display:inline-block;
+          font-size:0.85rem;
+          text-align:center;">{{{2}}}</span></span>
+         |<span style="
+          position:absolute;
+          top:50%;
+          left:50%;
+          transform:translate(-50%, -50%);
+          line-height:1.0;
+          display:inline-block;
+          text-align:center;">{{{1}}}<br>{{{2}}}</span>
+       }}
+      |{{{1}}}
+    }}</span></includeonly><noinclude>
+Call this template and pass it a character or string that serves as the label of a keyboard button to see that text printed as a cute little key: {{KeySmall|esc}}
-{{Quote|Push the {{KeySmall|esc}} key or the {{KeySmall|Q}} key to quit.|size=100%}}
-To display a larger key onscreen, see [[Template:KeyLarge]].
+You can also print two-symbol keys by passing in a second parameter with the second character: {{KeySmall|!|1}} {{KeySmall|@|2}} {{KeySmall|#|3}} {{KeySmall|$|4}} {{KeySmall|%|5}} {{KeySmall|^|6}} {{KeySmall|&|7}} {{KeySmall|*|8}} {{KeySmall|(|9}} {{KeySmall|)|0}}
+The button is carefully designed to remain in line with text on the same line:
+{{Quote|Push the {{KeySmall|~|`}} key to open the developer console.|size=100%}}
+It has not been tested with all possible keys on all possible keyboards so some characters may need special tweaking to look good or even be legible. The only special layout created so far is for the tilde key, so this can serve as a model for future special layouts being added to the template code.
+If you want to display a larger key onscreen, see [[Template:KeyLarge]].
 [[Category:Basic formatting templates]]</noinclude>