Typing around the world

KeymanWeb Updates: Supplementary Planes, Deadkey fixes and IE9 On Screen Keyboard

We've just released an update to KeymanWeb 1.0 that includes fixes for a number of issues.  This version is already live on www.keymanweb.com and KeymanWeb subscriptions.

• Internet Explorer 9 broke the On Screen Keyboard -- when clicking on keys in the On Screen Keyboard, it would sometimes clear the whole text field.  This has now been resolved in KeymanWeb 1.0.164. (I3342)
• Internet Explorer (all versions) had an inconsistency in handling deadkeys, which meant that some keyboards that relied on deadkeys worked incorrectly.  This would be especially evident at the start of a text field.  This was resolved in build 1.0.163. (I3318)
• KeymanWeb did not support supplementary multilingual plane characters correctly.  This was highlighted by the recent release of the Egyptian Hieroglyphic keyboard, in which spacebar rotation for selecting alternate hieroglyphs was not working in KeymanWeb.  This involved a fair bit of work to comprehensively support supplementary planes, including developing a supplementary plane string library which we have made available for anyone to use.  This was resolved in build 1.0.163. (I3319)

If you are a KeymanWeb Professional registered user, you can login to your account at tavultesoft.com to download the update at your convenience.  If you are a KeymanWeb subscriber, you'll already have the update!

Tricks to implementing a character count field when using KeymanWeb

A common technique in web forms is to show a character count a-la Twitter to let the user know how many characters they have left before the field is full to the brim.

Many examples online show how to update this counter with an onkeydown and/or an onkeyup event attached to the control, for example:

<textarea id="ta" onkeydown="updateCharCount(this)" onkeyup="updateCharCount(this)"></textarea>

When KeymanWeb is added to the site, you will often find that these methods no longer work.  This is because KeymanWeb takes over the onkeydown and onkeyup events (as well as onkeypress) in order to manage all input to the control.  However, there is a simple workaround.  Instead of using the legacy event model as illustrated above, use the more modern addEventListener (and for Internet Explorer 6-8, attachEvent) functions, viz:

var ta = document.getElementById('ta');
if(document.addEventListener) {
  ta.addEventListener(
    'keyup',
    function() { updateCharCount(ta) },
    false);
}
else if(document.attachEvent) {
  document.getElementById('ta').attachEvent(
    'onkeyup',
    function() { updateCharCount(ta); });
}

This code, while simplistic, shows you an approach which will work even when KeymanWeb is attached to the control, and what's more, will not interfere with KeymanWeb.  By attaching to onkeyup instead of onkeydown, the character count will be more closely in sync with the actual number of characters in the control.

The Future of Ancient Egyptian — Typing in Hieroglyphs

Have you ever wanted to type in Egyptian hieroglyphs? Today we've released a keyboard which will let you do just that. Christian Casey's Unicode Hieroglyphic keyboard allows you to type Ancient Egyptian on the web and in any application with full Unicode support.

Ancient Signs

Ancient Egyptian hieroglyphs have a history of use spanning some 4,000 years, from the late Roman empire back to the 3rd millennium BC, which means they share the distinction with Sumerian cuneiform of being older than any other known writing system. For most of their long history, hieroglyphs were usually used for monumental writing and inscriptions. They could be written left-to-right (like English), right-to-left (like Hebrew), or top-to-bottom (like Mongolian), with reading direction indicated by the direction of the faces (you read into the faces, as if conversing with them).

The Ancient Egyptians used hieroglyphs somewhat similarly to modern Japanese. Some signs indicate sounds (like for the 'ch' in loch), some signs indicate entire words (like  for 'flamingo'), some signs explain the reading of other signs (like to mark a word feminine), and most signs can be read in more than one way. In an effort to make writing aesthetically more beautiful and reading clearer(!), scribes would combine and repeat sound, word, and marker signs to create redundancies when making a word. For example, the word 'birds' can be written  , which is made up of the signs for the sounds in the word birds (  = ꜣpdw), together with the marker for bird ( ) and the marker for plural (). Attractive? Yes. Efficient? Maybe not.

Cutting-edge Keyboard

Designing a method to type Ancient Egyptian on computers is no easy task, made all the harder by the fact that the Unicode standard didn't admit hieroglyphs until October 2010, in version 6.0. Because of the size and scope of the task, until now the two primary ways to work with hieroglyphs on computers were a) as images or b) in dedicated hieroglyphic text-editors. There was no easy way to type hieroglyphs in, say, an email, a website, a Word document, an Excel spreadsheet, or an Adobe document. The new Hieroglyphic keyboard fills that gap. It allows you to type hundreds of hieroglyphs in all of those situations and more.

The Hieroglyphic keyboard allows you to type Ancient Egyptian in three ways:

• Transliteration using the Manuel de Codage standard
• Hieroglyphs using the Manuel de Codage standard
• Hieroglyphs using Gardiner's Sign List numbers

The keyboard automatically types in transliteration using the Manuel de Codage (MdC) standard transliteration system. Then, the keyboard converts transliteration to hieroglyphs each time you press spacebar. Pressing spacebar repeatedly cycles through signs which sound the same. Pressing ctrl+spacebar lets you output a space or stop transliteration from becomming hieroglyphs.

You can also output hieroglyphs with this keyboard using their Gardiner number. The Gardiner numbers come from a comprehensive set of sign lists generated in the early part of the last century by the eminent British egyptologist, Sir Alan Gardiner. Together with the MdC method, the Gardiner numbers make it easy to quickly access hundreds of standard hieroglyphs.

Try it Out

Download the new Hieroglyphics keyboard for Keyman Desktop on Microsoft Windows.

You can type Egyptian Hieroglyphics directly into your web browser, no download required, at our KeymanWeb Egyptian Hieroglyphic Online Keyboard page.  You can even embed this into your own website!

Introducing KeymanWeb 2.0 Beta

KeymanWeb 2.0 today entered beta! In this new version of KeymanWeb we have put a big effort into redesigning the internals, restructuring and designing the code according to modern JavaScript principles, and using many of the techniques that other major JavaScript libraries use today. As well as this, we have created 4 user interface designs that are cleanly integrated into KeymanWeb, and even provided the flexibility for you to design your own user interface if you want!

So what has changed in version 2.0 beta? The key changes are:

• Complete refactoring of the KeymanWeb objects, splitting the user interface, the on screen keyboard, the core keystroke processing, and the various mapping tables.
• A new, consistent and clear API for accessing the KeymanWeb functionality from a web page.
• Bringing the user interfaces developed for KeymanWeb Subscriptions into the KeymanWeb Professional feature set.
• Exposing Language, Region, Language Code and Region Code properties for each keyboard registration.
• A consistent approach to user interface integration and making the feature set consistent between each user interface.
• Providing the API hooks to create your own KeymanWeb user interface.

As well as the major rework in the points above, we have done a lot of work with:

• Compatibility for various browsers – each browser has different limitations and issues for input
• Bug fixes

The most visible changes for web site owners looking to upgrade to the new KeymanWeb are around the API. We made the difficult decision to terminate support for the version 1.0 API rather than try to provide backward compatibility support. This is primarily because the original API grew organically as the product developed, and we could see many limitations and structural issues with continuing to maintain it. A clean break means we can provide a consistent, straightforward API now that can grow in the future.

KeymanWeb User Interfaces

KeymanWeb 2.0 makes available 4 standardized user interfaces. You can use any of these or implement your own.

Toggle User Interface

This UI appears to the right of the focused control; hovering over the button shows the drop down list as in the image above.

Float User Interface

This interface is much the same as the original KeymanWeb user interface, although some small bugs have been corrected, and support for multiple languages for each keyboard has been added.

Button User Interface

This control appears as a static button on the page, in a location of your choice; hovering over the button allows the user to select a keyboard and change the visibility of the On Screen Keyboard.

Toolbar User Interface

This user interface is the most powerful and flexible, and is best suited to a web page where many keyboards may be used by your site visitors. It groups the keyboard layouts by region and by language, and where more than one keyboard for a given language is available, allows easy selection of the most appropriate keyboard for the language.

KeymanWeb API Changes

In the remainder of this blog post I'll cover some of the key API changes.

Getting started with KeymanWeb

The original KeymanWeb added a number of global variables, actually expandos of the window object. These were prefixed with KeymanWeb_, but this was somewhat ugly. KeymanWeb 2.0 now defines single global object, tavultesoft, and the object tavultesoft.keymanweb contains all the functionality of KeymanWeb.

This means that initializing KeymanWeb is now much clearer as shown in the example below. Additionally, you can now specify the user interface that you want to use with KeymanWeb during initialization.

Initializing KeymanWeb 1.0

<script type="text/javascript">
var KeymanWeb_Key='your_key_here';
var KeymanWeb_Root = '';
</script>
<script src="keymanweb.js" type="text/javascript"></script>
<script type='text/javascript'>
window.onload = function()
{
KeymanWeb.Init();
}
</script>

Initializing KeymanWeb 2.0

<script type="text/javascript" src="kmw-release.js"></script>
<script type="text/javascript">
tavultesoft.keymanweb.init({
key: 'your-KeymanWeb-key',
ui: 'toggle',
root: ''
});
</script>

Registering keyboards

KeymanWeb 2.0 adds a number of properties to the keyboard registration, including language and region. This enables keyboards to be registered for more than one language, which is particularly helpful for keyboards such as European Latin, which supports over 100 different languages. Additionally, the region information is used to group the languages by continent for the Toolbar user interface. The example code below shows the old and new keyboard registration functions.

Note: a tavultesoft.keymanweb.registerKeyboard function is on the roadmap for release. This function will use more clearly named properties such as 'name', 'language', 'languageCode', etc. However, this change was not ready for the beta release.

Loading Keyboards – KeymanWeb 1.0

KeymanWeb.KRS(new Stub_Keyboard_european());
function Stub_Keyboard_european()
{
this.KF="european.js";
this.KI="Keyboard_european";
this.KN="European Latin";
}

Loading Keyboards – KeymanWeb 2.0

tavultesoft.keymanweb.KRS({
KN: 'European Latin',
KI: 'Keyboard_european',
KL: 'French',
KLC:'fra',
KR: 'Europe',
KRC:'eu',
KF: 'european.js'
});

Selecting Keyboards

This call is similar between the two versions of KeymanWeb.

Selecting a Keyboard – KeymanWeb 1.0

KeymanWeb.SetActiveKeyboard("Keyboard_european");

Selecting a Keyboard – KeymanWeb 2.0

tavultesoft.keymanweb.setActiveKeyboard("Keyboard_european");

Controlling the On Screen Keyboard

As well as providing much more control over the On Screen Keyboard, KeymanWeb 2.0 makes available a number of events that allow the web page to take action when something happens within KeymanWeb, for example, when the On Screen Keyboard is shown, moved or hidden.

KeymanWeb 1.0

// displays the On Screen Keyboard
KeymanWeb.ShowHelp();

KeymanWeb 2.0

// displays the On Screen Keyboard
tavultesoft.keymanweb.osk.show(true);

// calls my_adjustOSK whenever the On Screen Keyboard is shown
tavultesoft.keymanweb.osk.addEventListener('show', function(x, y, userLocated) { my_adjustOSK(x, y, userLocated); });

How to get the Beta

You can access downloads and live demos at the KeymanWeb Beta Home Page.