Keyboard Support

Contact and Search

Keyman.com Homepage

Header bottom

Keyman.com

Other versions
Version 15.0Version 14.0 (current version)Version 13.0Version 12.0Version 11.0Version 10.0Version 2.0Version 1.0 (home page)

On this page

User Interface Design

This page displays all the different KeymanWeb user interface options available for non-mobile consumption. Use whichever one best complements your website. Depending on the number of keyboards you are using and the way your website is designed, the various interfaces will be more or less suitable.

The Button Interface


Button Interface

Display: Fixed Element

No of Keyboards: up to 20

HTML: Header & Control

For an interface which fits unobtrusively into your website while maintaining full functionality, try the Button Interface. All KeymanWeb's functions are displayed in a menu appearing whenever the user hovers over the button, which can be placed anywhere on the website.

To keep this interface as compact as possible, it is controlled through a single menu. While there is technically no limit to the number of keyboards that can be used, the Button interface works best on sites using up to 20 different keyboards, which are listed alphabetically.

The include for this interface is <script src="kmwuibutton.js">.

To select where the interface will be displayed on your page, add the following element where desired: <div id="KeymanWebControl" display="block"></div>

The property display may take two values: block and none, the latter of which temporarily hides the element.

For information on how your site users will interact with the Button Interface, click here.

The Floating Interface


Floating Interface

Display: Floating Element

No of Keyboards: up to 20

HTML: Header Only

The Floating Interface provides a clear, menu-based approach to selecting from a list of keyboards. This interface can be incorporated without changing the layout of your existing site, as it automatically appears when users click in a a supported control (such as a textbox) and disappears again when they click outside. You can choose to have the interface float below (DefaultBelow) or to the right of (DefaultRight) the active control.

This interface is simple to use, and with its single alphabetical list of keyboards, works most effectively on sites supporting up to around 20 keyboards.

The include for this interface is <script src="kmwuifloat.js">.

For information on how your site users will interact with the Floating Interface, click here.

The Toggle Interface


Toggle Interface

Display: Floating Element

No of Keyboards: 1

HTML: Header Only

For a website incorporating KeymanWeb to support a single keyboard, the Toggle is the ideal solution. The interface floats at the right of the active control, and is hidden when the mouse is clicked outside, which means that no changes have to be made to your site design. A simple on-off interface makes it easy for users to switch between their default language and the supported keyboard.

The include for this interface is <script src="kmwuitoggle.js">.

For information on how your site users will interact with the Toggle Interface, click here.

The Toolbar Interface


Toolbar Interface

Display: Fixed Element

No of Keyboards: unlimited

HTML: Header & Control

The standard interface for many sites incorporating KeymanWeb is the Toolbar. This interface, which can be positioned anywhere on a website by inserting the HTML code provided, provides an instant visual indication that the site allows users to type in a range of languages.

The Toolbar's map-based menu, displayed whenever a user clicks on the Keyboards button, works particularly well with multilingual sites integrating languages from all over the world. The most recently-used keyboard is remembered in a cookie, making it as easy to switch between English and another language as the Toggle interface, while maintaining full functionality and support for an essentially unlimited number of keyboards.

The include for this interface is <script src="kmwuitoolbar.js">.

To select where the interface will be displayed on your page, add the following element where desired: <div id="KeymanWebControl" display="block"></div>, as with the Button Interface above.

A live example of the KeymanWeb Toolbar Interface is available on the KeymanWeb Demo Site. For information on how your site users will interact with the Toolbar Interface, click here.