Typing Hindi like a Remington typewriter, in a browser textarea

Indian government jobs require a computer typing test, such as the Staff Selection Commission's data entry test, railways typing skill test, or court and police clerk exams. Many candidates type in Hindi using either the Remington layout, which is used by those trained on a typewriter, or Inscript, the Government of India standard.

Practicing at home usually involves installing input methods or legacy fonts. Our goal was to create a page where the keyboard remains in English, allowing candidates to select the exam's layout, and produce correct Unicode Devanagari output.

The key event to consider is that KeyboardEvent.key represents the character the operating system produced, while KeyboardEvent.code represents the physical key, regardless of the active operating system layout. A Hindi layout is defined by key positions, so the code is the appropriate input. To convert a code to the US-QWERTY character for that key, we defined an object mapping keys to their respective characters and shift states.

The keydown handler checks if the event is a native key press (without Ctrl, Meta, or Alt, and not during composition) and applies the Hindi layout to obtain a result. If a result exists, it prevents the default action and commits the new value into the textarea. Shortcuts with Ctrl, Alt, or Meta pass through, as do any compositions by an input method. Phone keyboards also compose text in their own IME and are scored the same way.

A typewriter layout consists of a lookup table from key to output, along with a few rules. For example, a half letter followed by ा becomes the full letter, and ा followed by े becomes ओ. The GAIL table is based on SIL's MIT-licensed Remington GAIL Keyman keyboard, while Kruti Dev uses the same physical layout but with a few key positions moved.

Inscript is typed in spoken order and requires minimal context rules. The significant challenge lies in the fact that Unicode stores text in logical order, while typewriter typists press keys in visual order. To accommodate this, the reducer's state includes text, caret position, and a flag (pendingI) to handle pending output.