How we integrated the Tavultesoft KeymanWeb web keyboard into Wikipedia: it was just a few small steps and a couple of hours of graphic design.

We recently published a KeymanWeb Wikipedia Plugin to allow you to use KeymanWeb anywhere in Wikipedia — editing pages, searching for information, or participating in discussions.  In this post, I wanted to talk about the process of integration from beginning to end.

The whole process took us about 4 hours.

  1. We created a free subscription for KeymanWeb at http://www.tavultesoft.com/account/home/kmw/  We followed the steps in the subscription process, added every keyboard for every language, and added the domain "en.wikipedia.org" as the primary domain for the subscription.  (We later extended the subscription to every Wikipedia domain).
  2. Next, we created a new plugin Javascript file at http://en.wikipedia.org/wiki/User:Keymanweb/keymanweb.js which linked to our KeymanWeb subscription and imported the KeymanWeb Javascript components as the page loaded, using the Wikipedia Monobook function addOnloadHook:
    addOnloadHook( function() {
    document.writeln("<"+"scr"+"ipt type='text/javascript' "+
    "src='http://r.keymanweb.com/code/?domain="+
    location.hostname+"&id=243&page="+
    encodeURIComponent(location.pathname)+"'>"+
    <"
    +"/"+"scr"+"ipt>");
     
    document.getElementById('bodyContent').innerHTML =
    "<div id='KeymanWebControl'></div>"
    +
    document.getElementById('bodyContent').innerHTML;
    } );
  3. Also in the same Javascript file, we inserted an element at the top of the bodyContent as a container for the KeymanWeb toolbar:
    importStylesheetURI(
    'http://en.wikipedia.org/w/index.php?title='+
    'User:Keymanweb/keymanweb.css&action=raw&'+
    'ctype=text/css'
    );
  4. At this point, we had KeymanWeb working within Wikipedia, and could select a keyboard and type with it in any edit box in Wikipedia.
  5. However, we decided that the normal KeymanWeb toolbar was too intrusive for Wikipedia, and replaced it with a new, smaller toolbar.  This took the most time, including drawing, scaling and modifying the CSS rules for displaying the toolbar.  We recorded our CSS changes in http://en.wikipedia.org/wiki/User:Keymanweb/keymanweb.css.  Firebug in Firefox was an invaluable tool for tweaking the CSS to get it just right.
  6. Finally, we took some time to write up the instructions for integrating KeymanWeb into your own user profile in Wikipedia.

As you can see, the actual integration process was dead easy.  Most of the time we spent was taken on polishing the look and feel of KeymanWeb for a better fit into Wikipedia.  We were surprised ourselves by how straightforward it was to get the basic integration right.

Try it yourself at http://en.wikipedia.org/wiki/User:Keymanweb!


1 thought on “How we integrated KeymanWeb in Wikipedia”

Deksiyos Desta · December 16, 2009 at 7:54 am

it is good Aportunity to youse on oure languge
very Good thanks
—–
PING:
TITLE: Using KeymanWeb in Wikipedia
URL: http://blog.tavultesoft.com/2010/01/using-keymanweb-in-wikipedia.html
IP: 10.17.151.36
BLOG NAME: Typing around the world
DATE: 01/05/2010 10:34:29 AM
A month ago we blogged about our new KeymanWeb Wikipedia Plugin. Now you can use KeymanWeb to type in your native language anywhere in Wikipedia. That’s right – without a specialised keyboard, you can edit pages, search for information, or…

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Posts

Uncategorized

Welcome to blog.keyman.com

As part of the transition to SIL, we’ve moved all the content from blog.tavultesoft.com to this new site, hosted on WordPress.

Uncategorized

Should I upgrade to Keyman Desktop 9.0?

If you currently use Keyman Desktop 6, 7.1 or 8.0, you may have questions about whether you should upgrade to version 9.0 or not. This post outlines the various upgrade paths and provides information on Read more…

Uncategorized

Enable custom fonts in Opera Mini

Configure Opera Mini to make Amharic and other custom text visible.  1) In Opera Mini, visit opera:config by typing it into the URL bar: 2) Find "Use bitmap fonts for complex scripts", set it to Read more…