Class Names and Identifiers for On-Screen Keyboard and Other KeymanWeb Elements
The appearance of the KeymanWeb on-screen keyboard, menu amd other elements can be customized
by a web designer by redefining (or adding to) the default styles. Styles and named elements
all have the class name (or id) prefix kmw-
joined to the object and item names,
for example kmw-key-text
, to set the basic style for the keycap text on each on-screen keyboard key.
Multiple classes are applied to many objects, with top-level classes of tablet
,
phone
and desktop
used to set different element styles according to the device type.
Unique elements, such as the menu and pop-up key frame, are named rather than referred to by class.
Most visual attributes such as text size and colour, background colour, shading, margins, etc. can be varied according to preference but developers should avoid changing positional attributes.
Class names applied to on-screen keyboard elements:
Class name | Keyboard element |
---|---|
kmw-osk-frame |
Outer keyboard frame |
kmw-osk-inner-frame |
Inner keyboard frame |
kmw-key-layer-group |
Keyboard layers container element |
kmw-key-layer |
Keyboard layer element |
kmw-key-row |
Keyboard row container element |
kmw-key-square |
Keyboard key container element |
kmw-key-square-ex |
Pop-up key container element |
kmw-key |
Key element |
kmw-key-label |
Key label (desktop OSK and phonetic layouts) |
kmw-key-text |
Keycap text |
kmw-key-popup-icon |
Text or graphic to indicate that a keyboard key has associated popup keys |
kmw-spacebar-caption |
Style applied to caption on spacebar |
Class names applied to different types of keys:
Class name | Key style |
---|---|
kmw-key-default |
Default |
kmw-key-shift |
Shift key, layer-switching keys |
kmw-key-shift-on |
Active shift key |
kmw-key-deadkey |
Dead key |
kmw-key-blank |
Blank, unmapped key |
kmw-key-hidden |
Hidden spacer key |
kmw-key-touched |
Active (touched) key |
Element identifiers for keys:
Useful reference: Keys, Virtual Keys, and Virtual Character Keys
Each key element (kmw-key
) has an ID based on the key code used for it within Keyman Developer. Each ID is based on
two or three pieces:
- The key's layer
- The key's code
- If it differs from the key's actual layer, the "modifier" setting for the key as set within the Touch Layout editor.
The format:
<display layer>
-<key code>
<display layer>
-<key code>
+<modifier layer>
(if different from<display layer>
)
Some example IDs:
default-K_K
- theK_K
key on thedefault
layercurrency-U_20B2
- theU_20B2
key (₲) on thecurrency
layernumeric-K_0+default
- theK_0
key displayed on thenumeric
layer, using the same modifiers as thedefault
layer.
For keys reached by longpress, the form of the ID is the same, just with one extra piece: it is prepended with popup-
.
popup-default-U_1E0F
- theU_1E0F
subkey (ḏ) on thedefault
layer- This is one of the subkeys of the 'd' key on the
default
layer on the EuroLatin (SIL) keyboard.
- This is one of the subkeys of the 'd' key on the
You can set styles for specific keys by using CSS selectors against specific key IDs.
The following selector will find the key element for all keys with the key code K_RBRKT
of the keyboard's phone layout.
.phone div.kmw-key.kmw-key-default[id*='K_RBRKT']
Note the [id*='K_RBRKT']
part. There can be a few variations here:
*=
- "contains"^=
- "starts with"$=
- "ends with"
So, to match all keys reached by longpress, you could use:
div.kmw-key.kmw-key-default[id^='popup-']
Also, :not(...)
can be used to invert a selector. The following selector will match all base keys, but not
any longpress keys.
div.kmw-key.kmw-key-default:not([id^='popup-'])
Element identifiers and class names for desktop on-screen keyboard elements:
Class name or id | Desktop OSK element |
---|---|
kmw-title-bar |
OSK title bar |
kmw-title-bar-caption |
OSK title bar caption (keyboard name) |
kmw-title-bar-actions |
Container for image elements in OSK title bar |
kmw-title-bar-image |
Active image element (button) in OSK title bar |
kmw-footer |
Desktop OSK footer element |
kmw-footer-caption |
Caption in desktop OSK footer |
kmw-footer-resize |
Style for the footer's resizing icon |
kmw-osk-static |
Container style for non-sizable keyboards |
kmw-osk-none |
Empty keyboard container style |
#kmw-pin-image |
Style of icon to return OSK to default position |
#kmw-config-image |
Style of icon to open configuration options window |
#kmw-help-image |
Style of icon to open keymanweb help window |
#kmw-close-button |
Style of close button image |
Element identifiers and class names applied to pop-up key container elements:
Class name | Element |
---|---|
#kmw-popup-keys |
Pop-up key container |
arrow-border |
Style setting callout arrow border |
arrow-content |
Style setting callout arrow background |
Element identifiers and class names applied to language menu elements:
Class name | Menu element |
---|---|
#kmw-language-menu |
Language menu container element |
#kmw-language-menu-background |
Hidden background layer preventing unwanted action while selecting a language or keyboard |
#kmw-menu-scroll-container |
Container for language list scroller |
#kmw-menu-scroller |
Langauge list scroller |
#kmw-menu-index |
Container for language index |
#kmw-menu-footer |
Placeholder at bottom of scroller |
kbd-list |
Style for language-list element |
kmw-list-open |
Style for list element when expanded |
kmw-list-closed |
Style for list element when not expanded |
kmw-list-entry |
Language entry in language list |
kmw-single-entry |
Single keyboard entry in language list |
current |
Active keyboard entry in language list |
selected |
Touched entry in language list |
Message box class names:
Class name | Element |
---|---|
kmw-wait-box |
Message box |
kmw-wait-background |
Message box background |
kmw-wait-text |
Message box wait text |
kmw-wait-graphic |
Message box wait icon |
kmw-alert-text |
Message box alert text |
kmw-alert-close |
Message box close icon |
The default styles for KeymanWeb can be found online at https://github.com/keymanapp/keyman/blob/master/web/src/resources/osk/kmwosk.css.
For the styles for specific released versions, they can also be found through s.keyman.com, such as https://s.keyman-staging.com/kmw/engine/17.0.326/osk/kmwosk.css for version 17.0.326.