Template:KeySmall: Difference between revisions

Latest revision as of 22:18, 16 May 2025

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

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

Key combos should look decent: Ctrl+Shift+Y

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 the text and not interfere visually with surrounding lines too much:

Push the ~
` key to open the developer console.
Enter the command gs_show_ui=0 to hide the HUD.

Known issues

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.

Certain characters may not display unless prefixed with another character; known problem characters are #, *, :, and ;. Insert a zero-width non-joiner (&‌zwnj;) before the character to fix the problem.

{{KeySmall|#}}
yields this broken result:

…whereas…
{{KeySmall|&‌zwnj;#}}
yields:
‌#

@@ 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:-3px;">{{
+    #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>
+:''If you want to display a larger key onscreen, see [[Template:KeyLarge]].''
-{{Quote|Push the {{KeySmall|esc}} key or the {{KeySmall|Q}} key to quit.|size=100%}}
+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}}
-To display a larger key onscreen, see [[Template:KeyLarge]].
+Key combos should look decent: {{KeySmall|Ctrl}}+{{KeySmall|Shift}}+{{KeySmall|Y}}
+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 the text and not interfere visually with surrounding lines too much:
+{{Quote|Push the {{KeySmall|~|`}} key to open the developer console.<br>Enter the command <tt>gs_show_ui{{=}}0</tt> to hide the HUD.|size=100%}}
+==Known issues==
+*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.
+*Certain characters may not display unless prefixed with another character; known problem characters are <code>#</code>, <code>*</code>, <code>:</code>, and <code>;</code>. Insert a zero-width non-joiner (<code>&&zwnj;zwnj;</code>) before the character to fix the problem.
+<code><nowiki>{{KeySmall|#}}</nowiki></code><br>
+yields this broken result:<br>
+{{KeySmall|#}}<br>
+…whereas…<br>
+<code><nowiki>{{KeySmall|&&zwnj;zwnj;#}}</nowiki></code><br>
+yields:<br>
+{{KeySmall|&zwnj;#}}
 [[Category:Basic formatting templates]]</noinclude>