KeyBoarder - making dynamic keyboard shortcut rendering appealing and interactive

Update: The KeyBoarder's project website is at
. All resources of this site are freely licensed under CC-BY-SA 3.

Keyboarder automatically converts textual references of keyboard shortcuts into graphical representations. The javascript is fast, small and has no other dependencies (such as jquery). The idea behind KeyBoarder is that updating past or new documents with static markup-clutter is tedious, put mildly. Imagine updating hundreds of blog posts and tens of html-manpages.

Keyboarder provides event binding of individual keys and css-designing. When loaded the user can navigate documents by shortcut simply by pressing the corresponding keys.

KeyBoarder may be ideally suited for blogs, documents and help files which contain lots of keyboard shortcuts. Only two lines of code are required, one for importing the css-file containing the styles, and the other for importing the JavaScript into the HTML document.

< head >
< title>KeyBoarder Demo site - JS Library for dynamic keybord shortcut rendering
< style>
@import url("");
< /style >
< script type="text/javascript" src="" charset="utf-8">
< /script >

KeyBoarder takes as configuration arguments the css class-name of the HTML elements holding the main article's or document's content with key shortcuts. (e.g. a blog post). Often such a class is aptly called 'content', and as such is part of the default parameters.

If you press a key which is part of a shortcut, KeyBoarder will highlight and focus the key-shortcut, and upon each further press will go to the next consecutive element that contains the pressed key in the key-shortcut.
This is particularly suited for navigating long texts, like a blog or a help-file / html-manpage. Keys can be bound to other events, and rendered individually based on per-key-type css-rules .

From the design perspective, KeyBoarder features several appealing styles to choose from:

KeyBoarder uses the kbd element of html, which allows device specific native treatment by the browser of the client.

In order to recognize keys, KEYS must conform to certain conventions: They must be written in UPPERCASE or Startcase and concatenated by a symbol e.g. '+' or '-', '~', unless otherwise specified:
A minimum number of consecutive keys can be configured, in order for shortcut rendering to only take place, once that number is met. e.g. rendering ALT+X but not ALT

Keys can be designed with css, and several default design are included.

Examples for writing Key-shortcuts which KeyBoarder recognizes:
This is a simple shortcut ALT+WIN+U 
ALT + WIN+ P /*this is fine*/!
somewhere in the text, ALT + RETURN - a key shortcut! order to enter the text press, STRG+ ENTER
you can set different styles in preformatted tex
For demonstration purposes, provided here is an excerpt of the shortcut key table for Open Office Writer:

Shortcut Keys Effect
Ctrl+A Select All.
Ctrl+J Justify.
Ctrl+D Double Underline.
Ctrl+E Centred.
Ctrl+F Find and Replace.
Ctrl+Shift+P Superscript.
Ctrl+L Align Left.
Ctrl+R Align Right.
Ctrl+Shift+B Subscript.
Ctrl+Y Redo last action.
Ctrl+0 (zero) Apply Default paragraph style.
Ctrl+1 Apply Heading 1 paragraph style.
Ctrl+2 Apply Heading 2 paragraph style.
Ctrl+3 Apply Heading 3 paragraph style.
Ctrl+5 1.5 Line Spacing.
Ctrl+Enter Manual page break.
Ctrl+Shift+Enter Column break in multi-columnar texts.
Alt+Enter Inserting a new paragraph without numbering.
Alt+Enter Inserting a new paragraph directly before or after a section or a table.

Keys can be nested:
STRG - ALT - DEL //Single key reconition mode is set, thus the last key 'Del' is recognized but not the others, as the current concatenator symbol is set to '+'
STRG+P+D WIN T , or RETURN X should not be rendered

In the following examples, keys will not be rendered due to varrying issues (with KeyBoarder v.7 most are rendered):

STG+ALT //missspelling

STRG+OI //missing concatenator
ALT+G�Z //illegal symbol: non recognized concatenator