Template:KeySmall: Difference between revisions

docs: added note about problem characters and solution
(added ability to show two-symbol keys)
(docs: added note about problem characters and solution)
 
(One intermediate revision by the same user not shown)
Line 26: Line 26:
     position:relative;
     position:relative;
     vertical-align:middle;
     vertical-align:middle;
     top:-5px;">{{
     top:-3px;">{{
     #if:{{{2|}}}
     #if:{{{2|}}}
       |{{
       |{{
Line 59: Line 59:
       |{{{1}}}
       |{{{1}}}
     }}</span></includeonly><noinclude>
     }}</span></includeonly><noinclude>
:''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: {{KeySmall|esc}}
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}}




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}}
Key combos should look decent: {{KeySmall|Ctrl}}+{{KeySmall|Shift}}+{{KeySmall|Y}}




The button is carefully designed to remain in line with text on the same line:
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}}


{{Quote|Push the {{KeySmall|~|`}} key to open the developer console.|size=100%}}
The button is carefully designed to remain in line with the text and not interfere visually with surrounding lines too much:


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.
{{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.


If you want to display a larger key onscreen, see [[Template:KeyLarge]].
<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>
[[Category:Basic formatting templates]]</noinclude>