HTML Keyboard

Click here for instructions


   




Instructions
  1. If you have just used the page, click the Clear button to empty the fields.
  2. Click on character buttons, and type normally on your keyboard as required, to create the text you require in the upper field.
  3. When you have finished a short text, click on the Get HTML button and the corresponding HTML suitable for ASCII (well, non-Unicode) editors with be placed in the lower field and selected.
  4. Simply do a Copy to your Clipboard (Ctrl C on your keyboard is quickest) and paste the text into your HTML editor.
  5. Save the result in your editor!
  6. Repeat as required.
Requires JavaScript enabled. Back to top

The purpose of this page is to allow you, especially if you use an English language keyboard, to create web pages that contain more than one or two characters that do not have their own key on your keyboard, provided they are among the ranges implemented. The page has also been designed so that you can use it even if you are using a simple HTML source editor that does not yet support Unicode.

To create a bit of web page content that uses such characters, simply click on the buttons. The corresponding characters will appear in the upper text area. You can intersperse keystrokes on your keyboard with clicks to the buttons. For example, for typing Greek or Russian text, use the keyboard spacebar and punctuation keys as usual; and you can edit the output with the Delete and Backspace keys in the usual way.

So far, here, as you can see I have implemented Cyrillic, Greek, the extended Latin set including stand-alone accents, currency, playing cards, punctuation and other publishing symbols, and the simple and advanced mathematical symbols, all as set out in the basic character entities table for HTML4. To make possibe all this completely stand-alone client-side functionality, obviously this page requires JavaScript to be enabled in your browser.

As you should know if you are making web pages using a text editor that does not assist with all of these, the character names such as À for A grave that were defined for all of these characters as a means of them putting the characters into web pages in systems that did not support Unicode (in which every character uses two bytes) is being phased out and for the future all web pages should use the &#nnn; syntax, where nnn is any of a vast quantity of possible values. Although only a tiny subset of all the defined Unicode characters are supported here, these are the main ones likely to be required by English speaking users who are not versed in the less known languages of Eastern Europe, or the languages of the non-European world.

Note that, as you move the mouse pointer over the character buttons, you are told the category of the character at which you are pointing. For letters with upper and lower case available, to obtain the upper case character you must first click on Shift or Caps Lock. If you use Shift, Caps Lock goes on for just one character, but if you use the Caps Lock button, Caps Lock goes on and stays on until you click the Caps Lock button again to cancel it.

Note also that the glyphs (letter forms) shown on the buttons are always the uppercase forms of the letters, just as on any computer (or indeed typewriter) keyboard. I felt it was better just to show "CAPS" above the buttons rather than to change the glyphs on all the keys every time you clicked on Shift or Caps Lock which would almost certainly prove slow to happen, and disconcerting to users..

Finally, note that if you have Caps Lock on, the signal CAPS is visible only when you are not pointing at a button for a character that has no uppercase glyph; this applies to esszet (ß ) and to three Greek letters (ϑ, ς, and ϒ), as well as (of course) to all the non-alphabetic characters.