From StrategyWiki, the video game walkthrough and strategy guide wiki
Jump to navigation Jump to search
(line flow isn't crucial)
 
(9 intermediate revisions by 4 users not shown)
Line 2: Line 2:
It would be nice if these key graphics didn't hog so much vertical space. I'm suggesting we scale it down a bit, like [[wp:Template:Keypress]]. For comparison, see:
It would be nice if these key graphics didn't hog so much vertical space. I'm suggesting we scale it down a bit, like [[wp:Template:Keypress]]. For comparison, see:


<span class="keyboard-key" style="border: 0.2em outset #cecbc7; background: #f0ece8; padding: 0 0.4em 0.1em 0.3em; font-size: 0.8em; white-space: nowrap;">Enter</span> versus {{kbd|Enter}}.
<span class="keyboard-key" style="border: 0.3em outset #cecbc7; background: #f0ece8; padding: 0 0.4em 0.1em 0.3em; font-size: 0.8em; white-space: nowrap;">Enter</span> versus {{kbd|Enter}}.


<div style="width:90%;margin:auto"><p>Text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding. Text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding. '''Keyboard key in a line of text:''' <span class="keyboard-key" style="border: 0.2em outset #cecbc7; background: #f0ece8; padding: 0 0.4em 0.1em 0.3em; font-size: 0.8em; white-space: nowrap;">Enter</span> '''Much smaller profile, doesn't affect line height.''' Text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding. Text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding.</p></div>
Also, I think we should add <tt>font-weight:normal</tt> and <tt>font-style:normal</tt> to the style so the letter doesn't get bolded or italicized (like in control tables). — [[User:Najzere|<span style="color:#909090">najzere</span>]]<sup>[[User talk:Najzere|<span style="color:#993300">T</span>]]</sup> 23:45, 27 February 2010 (UTC)
:How does it work? -- [[User:Prod|Prod]] ([[User talk:Prod|Talk]]) 00:16, 28 February 2010 (UTC)
::How does what work? — [[User:Najzere|<span style="color:#909090">najzere</span>]]<sup>[[User talk:Najzere|<span style="color:#993300">T</span>]]</sup> 07:58, 28 February 2010 (UTC)
:::Current uses two images through a CSS class to build the outer border of the regular text.  Is that done the same way, or is it just a css border style or something? -- [[User:Prod|Prod]] ([[User talk:Prod|Talk]]) 18:58, 28 February 2010 (UTC)
::::They both use a span with border and background color set. The only change needed would be to replace what's currently in [[MediaWiki:Common.css]] for the "keyboard_button" class with the new styles. We can get bogged down in details after we decide if we even want to change it. — [[User:Najzere|<span style="color:#909090">najzere</span>]]<sup>[[User talk:Najzere|<span style="color:#993300">T</span>]]</sup> 19:30, 28 February 2010 (UTC)
:::::I like the smaller size, and as long as we keep usage the same it shouldn't be a problem, assuming the community agrees. -- [[User:Prod|Prod]] ([[User talk:Prod|Talk]]) 19:59, 28 February 2010 (UTC)
::::::The smaller size is good when used within a guide, but when used in comparison to joypad controls (such as [[Grand_Theft_Auto:_San_Andreas/Controls#Vehicles]]) they may appear a bit 2nd class, and I've seen more guides with control pages than using the keyboard setting in a guide so I'm going to vote we keep the current. ''On the side, I don't think specific control buttons should be used in any guide as "press use, to open the door" would apply across all platforms and consoles, in comparison to "press {{kbd|Enter}}, to open the door"'' - [[User:Trevman|Trevman]] 22:08, 28 February 2010 (UTC)
:::::::Key/button images in guides are a nice touch and let the reader immediately understand what to press without having to refer back to the Controls page. Use of {{t|control selector}} lets us switch between images for people on different consoles. I added a controls table (from Final Fantasy VII) for comparison below, and increased the border width slightly. — [[User:Najzere|<span style="color:#909090">najzere</span>]]<sup>[[User talk:Najzere|<span style="color:#993300">T</span>]]</sup> 20:43, 1 March 2010 (UTC)
::::::::I know I'm new here, and not very active, but I personally like the smaller one. That being said, why couldn't we have both? [[User:Jack Napier|Jack Napier]] 02:11, 2 March 2010 (UTC)
┌───────────────────────┘<br />
I'd say mainly for consistency. It would look pretty weird to go from one guide to the next (or even worse, one page the next) and see different looking keyboard markup. — [[User:Najzere|<span style="color:#909090">najzere</span>]]<sup>[[User talk:Najzere|<span style="color:#993300">T</span>]]</sup> 17:09, 3 March 2010 (UTC)
:There's always the possibility of just making the current one slightly smaller.  The current line-height is taller than some of the controller buttons, and we can reduce the padding to compensate. -- [[User:Prod|Prod]] ([[User talk:Prod|Talk]]) 08:22, 5 March 2010 (UTC)
::I don't think making it the size of the text is that crucial; none of the other button templates do so. Reducing it to the height of the other buttons--24x24 pixels--would probably be sufficient. --[[User:Garrett|Garrett]] ([[User talk:Garrett|talk]]) 10:36, 5 March 2010 (UTC)
 
===Comparisons===
;In text
<div style="width:90%;margin:auto"><p>Text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding. Text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding. '''Keyboard key in a line of text:''' <span class="keyboard-key" style="border: 0.3em outset #cecbc7; background: #f0ece8; padding: 0 0.4em 0.1em 0.3em; font-size: 0.8em; white-space: nowrap;">Enter</span> '''Much smaller profile, doesn't affect line height.''' Text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding. Text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding.</p></div>


<div style="width:90%;margin:auto"><p>Text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding. Text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding. '''Keyboard key in a line of text:''' {{kbd|Enter}} '''Much larger profile, creates extra spacing between lines.''' Text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding. Text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding.</p></div>
<div style="width:90%;margin:auto"><p>Text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding. Text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding. '''Keyboard key in a line of text:''' {{kbd|Enter}} '''Much larger profile, creates extra spacing between lines.''' Text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding. Text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding.</p></div>


Also, I think we should add <tt>font-weight:normal</tt> and <tt>font-style:normal</tt> to the style so the letter doesn't get bolded or italicized (like in control tables). — [[User:Najzere|<span style="color:#909090">najzere</span>]]<sup>[[User talk:Najzere|<span style="color:#993300">T</span>]]</sup> 23:45, 27 February 2010 (UTC)
;In tables
:How does it work? -- [[User:Prod|Prod]] ([[User talk:Prod|Talk]]) 00:16, 28 February 2010 (UTC)
{| {{prettytable}}
! PlayStation !! Windows !! Action
|-
! {{psx|Neutral|Dpad}} || <span class="keyboard-key" style="border: 0.3em outset #cecbc7; background: #f0ece8; padding: 0 0.4em 0.1em 0.3em; font-size: 0.8em; white-space: nowrap; font-weight:normal;">←</span> <span class="keyboard-key" style="border: 0.3em outset #cecbc7; background: #f0ece8; padding: 0 0.4em 0.1em 0.3em; font-size: 0.8em; white-space: nowrap; font-weight:normal;">&nbsp;↑&nbsp;</span> <span class="keyboard-key" style="border: 0.3em outset #cecbc7; background: #f0ece8; padding: 0 0.4em 0.1em 0.3em; font-size: 0.8em; white-space: nowrap; font-weight:normal;"></span> <span class="keyboard-key" style="border: 0.3em outset #cecbc7; background: #f0ece8; padding: 0 0.4em 0.1em 0.3em; font-size: 0.8em; white-space: nowrap; font-weight:normal;">&nbsp;↓&nbsp;</span>
| Move the lead character and the pointer in the menus.
|-
! {{psx|C}} || <span class="keyboard-key" style="border: 0.3em outset #cecbc7; background: #f0ece8; padding: 0 0.4em 0.1em 0.3em; font-size: 0.8em; white-space: nowrap; font-weight:normal;">Enter</span>
| Confirm choice in menus. Attempt to use/activate the item in front of the character (open chests, climb ladders, etc), or talk to an NPC.
|-
! {{psx|T}} || <span class="keyboard-key" style="border: 0.3em outset #cecbc7; background: #f0ece8; padding: 0 0.4em 0.1em 0.3em; font-size: 0.8em; white-space: nowrap; font-weight:normal;">+</span>
| Opens the menu.
|-
! {{psx|X}} || <span class="keyboard-key" style="border: 0.3em outset #cecbc7; background: #f0ece8; padding: 0 0.4em 0.1em 0.3em; font-size: 0.8em; white-space: nowrap; font-weight:normal;">0</span> or <span class="keyboard-key" style="border: 0.3em outset #cecbc7; background: #f0ece8; padding: 0 0.4em 0.1em 0.3em; font-size: 0.8em; white-space: nowrap; font-weight:normal;">Ins</span>
| Back one level in menus, or close the menu in question. Outside of the menus, hold down to make the character run (not available in Overworld).
|-
! {{psx|S}} || <span class="keyboard-key" style="border: 0.3em outset #cecbc7; background: #f0ece8; padding: 0 0.4em 0.1em 0.3em; font-size: 0.8em; white-space: nowrap; font-weight:normal;">.</span> or <span class="keyboard-key" style="border: 0.3em outset #cecbc7; background: #f0ece8; padding: 0 0.4em 0.1em 0.3em; font-size: 0.8em; white-space: nowrap; font-weight:normal;">Delete</span>
| Toggle between Equip and Materia screens. In combat, makes the command menu disappear temporarily so you can check your barrier gauges.
|-
! {{psx|Start}} || <span class="keyboard-key" style="border: 0.3em outset #cecbc7; background: #f0ece8; padding: 0 0.4em 0.1em 0.3em; font-size: 0.8em; white-space: nowrap; font-weight:normal;">5</span>
| In world map, changes map display. Pauses during battle.
|-
! {{psx|Select}} || <span class="keyboard-key" style="border: 0.3em outset #cecbc7; background: #f0ece8; padding: 0 0.4em 0.1em 0.3em; font-size: 0.8em; white-space: nowrap; font-weight:normal;">-</span>
| Outside of combat, shows a hand pointer above lead character's head, and shows exit markers. In combat, toggles target name window.
|-
! {{psx|L1}}<br>{{psx|R1}} || <span class="keyboard-key" style="border: 0.3em outset #cecbc7; background: #f0ece8; padding: 0 0.4em 0.1em 0.3em; font-size: 0.8em; white-space: nowrap; font-weight:normal;">9</span> or <span class="keyboard-key" style="border: 0.3em outset #cecbc7; background: #f0ece8; padding: 0 0.4em 0.1em 0.3em; font-size: 0.8em; white-space: nowrap; font-weight:normal;">PgUp</span><br><span class="keyboard-key" style="border: 0.3em outset #cecbc7; background: #f0ece8; padding: 0 0.4em 0.1em 0.3em; font-size: 0.8em; white-space: nowrap; font-weight:normal;">3</span> or <span class="keyboard-key" style="border: 0.3em outset #cecbc7; background: #f0ece8; padding: 0 0.4em 0.1em 0.3em; font-size: 0.8em; white-space: nowrap; font-weight:normal;">PgDn</span>
| Move the pointer up or down one page in the menus, or rotate view in world map. Hold down both to escape from battles.
|-
! {{psx|L2}} || <span class="keyboard-key" style="border: 0.3em outset #cecbc7; background: #f0ece8; padding: 0 0.4em 0.1em 0.3em; font-size: 0.8em; white-space: nowrap; font-weight:normal;">7</span> or <span class="keyboard-key" style="border: 0.3em outset #cecbc7; background: #f0ece8; padding: 0 0.4em 0.1em 0.3em; font-size: 0.8em; white-space: nowrap; font-weight:normal;">Home</span>
| Changes camera angle on the Overworld map.
|-
! {{psx|R2}} || <span class="keyboard-key" style="border: 0.3em outset #cecbc7; background: #f0ece8; padding: 0 0.4em 0.1em 0.3em; font-size: 0.8em; white-space: nowrap; font-weight:normal;">1</span> or <span class="keyboard-key" style="border: 0.3em outset #cecbc7; background: #f0ece8; padding: 0 0.4em 0.1em 0.3em; font-size: 0.8em; white-space: nowrap; font-weight:normal;">End</span>
| Changes camera angle on the Overworld map. In combat, shows targeting aid.
|}
 
{| {{prettytable}}
! PlayStation !! Windows !! Action
|-
! {{psx|Neutral|Dpad}} || {{kbd|left}} {{kbd|up}} {{kbd|right}} {{kbd|down}}
| Move the lead character and the pointer in the menus.
|-
! {{psx|C}} || {{kbd|Enter}}
| Confirm choice in menus. Attempt to use/activate the item in front of the character (open chests, climb ladders, etc), or talk to an NPC.
|-
! {{psx|T}} || {{kbd|+}}
| Opens the menu.
|-
! {{psx|X}} || {{kbd|0}} or {{kbd|Ins}}
| Back one level in menus, or close the menu in question. Outside of the menus, hold down to make the character run (not available in Overworld).
|-
! {{psx|S}} || {{kbd|.}} or {{kbd|Delete}}
| Toggle between Equip and Materia screens. In combat, makes the command menu disappear temporarily so you can check your barrier gauges.
|-
! {{psx|Start}} || {{kbd|5}}
| In world map, changes map display. Pauses during battle.
|-
! {{psx|Select}} || {{kbd|-}}
| Outside of combat, shows a hand pointer above lead character's head, and shows exit markers. In combat, toggles target name window.
|-
! {{psx|L1}}<br>{{psx|R1}} || {{kbd|9}} or {{kbd|PgUp }}<br>{{kbd|3}} or {{kbd|PgDn}}
| Move the pointer up or down one page in the menus, or rotate view in world map. Hold down both to escape from battles.
|-
! {{psx|L2}} || {{kbd|7}} or {{kbd|Home}}
| Changes camera angle on the Overworld map.
|-
! {{psx|R2}} || {{kbd|1}} or {{kbd|End}}
| Changes camera angle on the Overworld map. In combat, shows targeting aid.
|}

Latest revision as of 10:36, 5 March 2010

New key style[edit]

It would be nice if these key graphics didn't hog so much vertical space. I'm suggesting we scale it down a bit, like wp:Template:Keypress. For comparison, see:

Enter versus  Enter .

Also, I think we should add font-weight:normal and font-style:normal to the style so the letter doesn't get bolded or italicized (like in control tables). — najzereT 23:45, 27 February 2010 (UTC)

How does it work? -- Prod (Talk) 00:16, 28 February 2010 (UTC)
How does what work? — najzereT 07:58, 28 February 2010 (UTC)
Current uses two images through a CSS class to build the outer border of the regular text. Is that done the same way, or is it just a css border style or something? -- Prod (Talk) 18:58, 28 February 2010 (UTC)
They both use a span with border and background color set. The only change needed would be to replace what's currently in MediaWiki:Common.css for the "keyboard_button" class with the new styles. We can get bogged down in details after we decide if we even want to change it. — najzereT 19:30, 28 February 2010 (UTC)
I like the smaller size, and as long as we keep usage the same it shouldn't be a problem, assuming the community agrees. -- Prod (Talk) 19:59, 28 February 2010 (UTC)
The smaller size is good when used within a guide, but when used in comparison to joypad controls (such as Grand_Theft_Auto:_San_Andreas/Controls#Vehicles) they may appear a bit 2nd class, and I've seen more guides with control pages than using the keyboard setting in a guide so I'm going to vote we keep the current. On the side, I don't think specific control buttons should be used in any guide as "press use, to open the door" would apply across all platforms and consoles, in comparison to "press  Enter , to open the door" - Trevman 22:08, 28 February 2010 (UTC)
Key/button images in guides are a nice touch and let the reader immediately understand what to press without having to refer back to the Controls page. Use of {{control selector}} lets us switch between images for people on different consoles. I added a controls table (from Final Fantasy VII) for comparison below, and increased the border width slightly. — najzereT 20:43, 1 March 2010 (UTC)
I know I'm new here, and not very active, but I personally like the smaller one. That being said, why couldn't we have both? Jack Napier 02:11, 2 March 2010 (UTC)

┌───────────────────────┘
I'd say mainly for consistency. It would look pretty weird to go from one guide to the next (or even worse, one page the next) and see different looking keyboard markup. — najzereT 17:09, 3 March 2010 (UTC)

There's always the possibility of just making the current one slightly smaller. The current line-height is taller than some of the controller buttons, and we can reduce the padding to compensate. -- Prod (Talk) 08:22, 5 March 2010 (UTC)
I don't think making it the size of the text is that crucial; none of the other button templates do so. Reducing it to the height of the other buttons--24x24 pixels--would probably be sufficient. --Garrett (talk) 10:36, 5 March 2010 (UTC)

Comparisons[edit]

In text

Text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding. Text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding. Keyboard key in a line of text: Enter Much smaller profile, doesn't affect line height. Text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding. Text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding.

Text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding. Text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding. Keyboard key in a line of text:  Enter  Much larger profile, creates extra spacing between lines. Text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding. Text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding, text padding.

In tables
PlayStation Windows Action
Neutral dpad  ↑   ↓  Move the lead character and the pointer in the menus.
Circle button Enter Confirm choice in menus. Attempt to use/activate the item in front of the character (open chests, climb ladders, etc), or talk to an NPC.
Triangle button + Opens the menu.
Cross button 0 or Ins Back one level in menus, or close the menu in question. Outside of the menus, hold down to make the character run (not available in Overworld).
Square button . or Delete Toggle between Equip and Materia screens. In combat, makes the command menu disappear temporarily so you can check your barrier gauges.
Start button 5 In world map, changes map display. Pauses during battle.
Select button - Outside of combat, shows a hand pointer above lead character's head, and shows exit markers. In combat, toggles target name window.
L1 button
R1 button
9 or PgUp
3 or PgDn
Move the pointer up or down one page in the menus, or rotate view in world map. Hold down both to escape from battles.
L2 button 7 or Home Changes camera angle on the Overworld map.
R2 button 1 or End Changes camera angle on the Overworld map. In combat, shows targeting aid.
PlayStation Windows Action
Neutral dpad  ↑   ↓  Move the lead character and the pointer in the menus.
Circle button  Enter  Confirm choice in menus. Attempt to use/activate the item in front of the character (open chests, climb ladders, etc), or talk to an NPC.
Triangle button  +  Opens the menu.
Cross button  0  or  Ins  Back one level in menus, or close the menu in question. Outside of the menus, hold down to make the character run (not available in Overworld).
Square button  .  or  Delete  Toggle between Equip and Materia screens. In combat, makes the command menu disappear temporarily so you can check your barrier gauges.
Start button  5  In world map, changes map display. Pauses during battle.
Select button  -  Outside of combat, shows a hand pointer above lead character's head, and shows exit markers. In combat, toggles target name window.
L1 button
R1 button
 9  or  PgUp  
 3  or  PgDn 
Move the pointer up or down one page in the menus, or rotate view in world map. Hold down both to escape from battles.
L2 button  7  or  Home  Changes camera angle on the Overworld map.
R2 button  1  or  End  Changes camera angle on the Overworld map. In combat, shows targeting aid.