Video Game Keyboard Diagrams
- Select a keyboard (key positions).
- Select a theme (visual formatting).
- Select a game (key bindings).
- Select a format (output media type).
- Toggle the numeric keypad on/off.
- Select the diagram's orientation. (Horizontal or vertical.)
- Click on the "Create New Diagram" button. A new window with your selected diagram will appear in your browser.
- Print the page in the new window if needed.
Items marked with a star (✦) are the "default" or most common options.
The vast majority of the bindings are for the US 104 Key (ANSI) keyboard at this time. If you would like to see more bindings for the other keyboards, you are welcome to contribute! (More on that, below.)
Licenses & Submissions:
The source code for this project is licensed under the GNU LGPLv3. The content is licensed under the CC BY-SA 3.0. Visit the GitHub repository for the project's source code. The change log contains the project's update history and credits, as well as links to further reading. The "to do" list outlines some of the tasks I've planned for the future.
To submit a new set of bindings or a layout, you can fill out this and this spreadsheet and email me the contents by copying and pasting the data into the email form. Note that any content you submit falls under the CC BY-SA 3.0 license, as per the project as a whole. Your name will then appear at the bottom of each chart you contributed to.
I have also developed a form-based submission page. You can use it by selecting the "Editor" option in Step 4, above. To update a game's binding simply select it from the "Games" menu above. To start a brand new submission, select the "Blank Starter" item in the "Reference" category of the "Games" menu. (Here is a direct link for the most common keyboard.) There are "Blank Starters" for every keyboard. That being said, I personally still prefer using the spreadsheet for creating new bindings.
MediaWiki, SVG & PDF:
I have created templates for MediaWiki wikis that do basically the same thing as the charts available on this site. You can find templates as well as instructions on how to use them at StrategyWiki and Fandom. There is a test case located here. By selecting the "MediaWiki" format type in the menu above, you can generate the code you will need in order to populate this template with data. Note that on the destination wiki page, you may also want to wrap the charts in scrollable DIV elements, since the charts are typically wider than a browser window.
I have also created SVG versions of the charts that you can select in the "Format" menu on the front page. I have not migrated over to using SVG for everything yet since it is less compatible with older browsers. Further, I have not yet decided how I want to implement the mouse and joystick controls charts, and this will affect my future choices. (In particular, I have not yet figured out how to create text containers in SVG that expand, wrap and scale automatically as the number of characters inside them increases.)
PDF versions of the charts will hopefully be implemented at some point in the future. Right now the PDF option is still disabled in the menu. That being said, there are virtual printer drivers such as "Microsoft Print to PDF" or "Adobe Print to PDF" that will allow you to print any document to PDF, even from your Web browser.
- When printing, the diagram may not fit within a single letter- or legal-sized page, even when selecting "Landscape" mode instead of "Portrait" mode in your printer dialog settings. Your browser or printer may have a "shrink to fit" option that allows you to automatically adjust the size of the output to fit the size of the paper, so you could try this. Unfortunately, Google Chrome is missing such a feature at this time, so I recommend investigating one of these workarounds if you are using that browser.
- You may also free up some space by hiding the numeric keypad. Be aware that many games and software bind commands to these keys! Though not all do.
- I recommend not enabling the printing of background colors and images in your printer settings, as this will consume a lot of ink. This setting is found in "Page Setup" (Mozilla Firefox and Internet Explorer) or within the print dialog itself (Google Chrome). The setting appears to not exist in Microsoft Edge.
- If the colors or keyboard theme are not to your liking, select a different "Theme", then try generating the chart again.
- Printing at 96 DPI (dots-per-inch) and 100% scaling should result in printed output that closely approximates the dimensions of a real physical keyboard. Of course, not every keyboard meets one of the various keyboard standards exactly, so YMMV. In particular, the distance between the function keys and the number keys at the top of the keyboard seems to vary considerably between different keyboard models. Laptop computers seem to not follow any standards at all.
- In MS Windows, some Web browsers (Google Chrome for instance) use your desktop DPI scaling settings to adjust the size of on-screen HTML elements, resulting in a document that appears larger or smaller than the Web developer intended. I am not exactly sure if this affects printer output. It may vary from browser to browser, or between browser versions and operating systems. I need to investigate this further.
- Note, that the darker themes in general will waste a lot of ink. You might want to select a lighter-colored theme when printing.